问题遇到的现象和发生背景
一个后台的侧边栏，其中数据时接口请求过来的，但是想给每个菜单栏前面加一个图片，但是图片是本地图片，求怎么吧图片渲染到上面去
用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%
<template>
<aside class="the-menu-aside" :style="{ width: !is_collapse ? '200px' : '60px' }" :class="!is_collapse ? 'showMenu' : 'hideMenu'">
<div class="dx-theme-text-color the-title">
<div :class="!is_collapse ? 'fixedImg' : 'fixedImgs'">
<img v-show="!is_collapse" :src="require('../assets/images/系统logo.png')" />
<img v-show="is_collapse" :src="require('../assets/images/系统小logo.png')" />
</div>
</div>
<div class="the-aside" :style="{ textIndent: !is_collapse ? '8px' : '0' }">
<div class="the-menu">
<DxMenu
orientation="vertical"
:data-source="menu"
submenu-direction="auto"
:show-first-submenu-mode="showFirstSubmenuModes"
:activeStateEnabled="false"
:hide-submenu-on-mouse-leave="false"
:focusStateEnabled="true"
:adaptivity-enabled="true"
display-expr="menuName"
items-expr="children"
@item-click="goto"
@dxWheel="Wheel"
@dxmousewheel="Wheel"
@wheel="Wheel"
@submenuShown="submenuShown"
item-template="list-item"
>
<template #list-item="{ data }" >
<div :title="data.menuName" >
<img :src="'../assets/images/resfile/Menu'" class="dx-icon" v-if="data.icon" />
<span class="dx-menu-item-text">{{ data.menuName }}</span>
<span class="dx-menu-item-popout-container" v-if="data.children.length > 0">
<div class="dx-menu-item-popout"></div>
</span>
</div>
</template>
</DxMenu>
</div>
</div>
<div class="search" v-show="!this.is_collapse">
<el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="请输入编码或名称" @select="handleSelect">
<i class="el-icon-search" slot="prefix"></i>
<template slot-scope="{ item }">
<div class="name">{{ item.menuName }}</div>
<span class="addr">{{ item.menuId }}</span>
</template>
</el-autocomplete>
</div>
<div class="the-aside-collapse">
<div class="collapse-content" @click="setMenuCollapseStatus()">
<img :src="require('../assets/images/collapse.png')" />
</div>
</div>
</aside>
</template>
<script>
import DxMenu from 'devextreme-vue/menu'
import { mapGetters } from 'vuex' // 引入状态共享
import { CheckMenuPassword } from '@/api'
import { DxScrollView } from 'devextreme-vue/scroll-view'
// import {srcurl} from "../assets/images/resfile/Menu"
export default {
name: 'theMenu',
components: {
DxMenu,
// DxScrollView,
},
data() {
return {
// srcurl:srcurl,
fileUrl: window.configUrl.fileUrl,
showFirstSubmenuModes: {
name: 'onHover', // onHover || onClick
delay: { show: 0, hide: 3000 },
},
pullDown: false,
showScrollbar: 'onScroll',
scrollByContent: true,
scrollByThumb: true,
input: '',
lastLevelMenuList: [],
restaurants: [],
state: '',
}
},
computed: {
isCollapse() {
return this.$store.getters.is_collapse
},
// 导入vuex菜单数据，菜单折叠状态
...mapGetters(['menu', 'is_collapse']),
},
mounted() {
let that = this
// 开启鼠标滚轮监听
window.addEventListener('mousewheel', that.listerWhell, true)
this.getAllLastLevelMenu()
},
methods: {
querySearch(queryString, cb) {
var restaurants = this.restaurants
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
// 调用 callback 返回建议列表的数据
cb(results)
},
// simplePinYin fullPinYin
createFilter(queryString) {
return (menu) => {
return menu.menuId == queryString || menu.menuName.includes(queryString) || menu.simplePinYin.includes(queryString) || menu.fullPinYin.includes(queryString)
}
},
handleSelect(item) {
let obj = {
itemData: item,
}
this.goto(obj)
},
handleIconClick(ev) {
console.log(ev)
},
getAllLastLevelMenu() {
let allMenuList = JSON.parse(JSON.stringify(this.menu))
this.getLastLevelMenu(allMenuList)
},
getLastLevelMenu(list) {
list.forEach((menu) => {
if (menu.children.length > 0) {
this.getLastLevelMenu(menu.children)
} else {
this.lastLevelMenuList.push(menu)
}
})
this.restaurants = this.lastLevelMenuList
},
// 设置左侧菜单折叠状态
setMenuCollapseStatus() {
this.$store.dispatch('menu/setCollapseStatus', !this.isCollapse)
},
Wheel() {
console.log('wheel')
},
/**
* 子菜单显示后的回调事件
* @param { DxMenu } component 组件的实例
* @param { Node } element 组件的容器
* @param { any } model 模型数据。只有使用Knockout时才可用
* @param { Node } rootItem 根菜单元素的容器
*/
submenuShown({ component, element, model, rootItem }) {
let that = this
try {
// 菜单弹出后 定位问题处理
// 页面高度
let BodyHeight = document.getElementsByTagName('body')[0].clientHeight
// 子菜单容器
let content = document.getElementsByTagName('body')[0].getElementsByClassName('dx-swatch-custom-xhzq')[0]
for (let item of content.getElementsByClassName('dx-submenu')) {
if (item?.style?.visibility == 'visible') {
// 若代码item?.style?.visibility == 'visible' 报错 则注释该行启用下行代码即可。因vscode组件不同可能存在兼容问题。
// if(item.style && item.style && item.style.visibility=='visible'){
let cTop = item.getBoundingClientRect().top // 当前弹出菜单距离页面顶部距离
let cHeight = item.getBoundingClientRect().height // 当前菜单高度
// #region 以下内容均为调试时使用
// console.log('距离顶部距离 : ', cTop)
// console.log('组件高度 : ', cHeight)
// console.log('容器高度 : ', BodyHeight)
// console.log('是否需要调整 : ', cTop < 0 || cTop + cHeight > BodyHeight)
// #endregion
// 判断子菜单高度 + 子菜单距离顶部定位 是否超出实际页面高度 或 是否为负数
if (cTop < 0 || cTop + cHeight > BodyHeight) {
// 确定需要修改TOP的DOM节点. (二级菜单时修改现节点的父级 二级以下均修改自身TOP)；
let theDom = item.parentElement.role && item.parentElement.role == 'menuitem' ? item : item.parentElement
// 重置子菜单定位 在此之前判断是否为未处理的DOM节点 避免出现闪动效果
if (!theDom.style.top || theDom.style.top == '0px') {
theDom.style.top = 0 - (cTop + cHeight - BodyHeight) + 'px'
}
}
}
}
} catch (e) {
void 0
}
},
// 滚动事件监听回调
listerWhell(e) {
// 判断当前滚动是否位于菜单容器中
if (!e.target.className || !e.target.className.includes('dx-menu')) {
return
}
let that = this
e = e || window.event
if (e.wheelDelta) {
//判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) {
//当滑轮向上滚动时
that.handleWhell(e.target, 'top')
}
if (e.wheelDelta < 0) {
//当滑轮向下滚动时
that.handleWhell(e.target, 'bottom')
}
} else if (e.detail) {
//Firefox滑轮事件
if (e.detail > 0) {
//当滑轮向上滚动时
that.handleWhell(e.target, 'top')
}
if (e.detail < 0) {
//当滑轮向下滚动时
that.handleWhell(e.target, 'bottom')
}
}
},
// 滚轮事件处理
handleWhell(target, isTop) {
let that = this
// 递归获取菜单容器
function getMenuVessel(t, n = 0) {
if (n < 5) {
if (t.className.split(' ').includes('dx-submenu')) {
return t
} else {
return getMenuVessel(t.parentElement, n++)
}
} else {
return null
}
}
// 获取菜单容器
let menuVessel = getMenuVessel(target)
// 非菜单容器时 中断后续操作
if (!menuVessel) return
// 进行计算srool值
switch (isTop) {
case 'top':
if (menuVessel.scrollTop !== 0) {
menuVessel.scrollTop -= 20
if (menuVessel.scrollTop < 0) {
menuVessel.scrollTop = 0
}
}
break
case 'bottom':
if (menuVessel.scrollHeight - menuVessel.clientHeight > menuVessel.scrollTop) {
if (menuVessel.scrollHeight - menuVessel.clientHeight - menuVessel.scrollTop > 20) {
menuVessel.scrollTop += 20
} else {
menuVessel.scrollTop += menuVessel.scrollHeight - menuVessel.clientHeight - menuVessel.scrollTop
}
}
break
}
},
// 跨应用路由跳转
goto({ itemData }) {
console.log(itemData)
this.$emit('sendPageDetail', itemData)
if (itemData.hasOwnProperty('children')) {
if (itemData.children.length === 0) {
if (itemData.password) {
const passWord = prompt('请输入页面密码', '')
if (passWord) {
CheckMenuPassword(itemData.menuId, passWord).then((res) => {
if (res) {
this.$_loadMicroApp1(itemData)
} else {
this.$_Methods.notifyMsg('密码校验失败', 'error', 2000)
}
})
}
} else {
this.$_loadMicroApp1(itemData)
}
}
}
},
},
destroyed() {
let that = this
// 注销鼠标滚轮监听
window.removeEventListener('mousewheel', that.listerWhell, true)
},
}
</script>
运行结果及详细报错内容
我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%
这个代码里面没有for循环 一下给我整不会了
