网络广告图片_推广普通话宣传海报_惠州百度seo_网销怎么做

一、mixin & directives

我们想要将每个页面的面包屑设置为当前选中的菜单项的名称，而不是固定将各个页面的面包屑名称分别写在各个页面内。
那么我们可以通过v-breadcrumb的directives 控制面包屑名称显示,同时为了避免重复代码，我们使用mixin。实现如下：

(function(){let Utils = {};let mixinDirective = {directives:{breadcrumb:{inserted(el){//PLAT_menu 存储当前选中菜单项的名称let val = sessionStorage.getItem('PLAT_menu');let firstChild = el.firstElementChild;if(firstChild){firstChild.innerText = val;}else{el.innerText = val;}}}}}Utils.mixinDirective = mixinDirective;
})

index.js

const user = new Vue({mixins:[Utils.mixinDirective]
})

index.html

<p-pageheader v-breadcrumb></p-pageheader>

v-auth实现权限控制

如下，根据权限控制新增按钮是否显示。

const dataForward = new Vue({directives:{auth:{bind:function(el,bind){el.originDisplay = el.style.display;if(!window.authObject || !bind || bind.value === undefined){return;}if(!window.authObject[bind.value]){el.style.display = 'none'}},update:function(el,bind){if(bind.value !== undefined && !window.authObject[bind.value]){el.style.display = 'none';} else{el.style.display = el.originDisplay;}}

 <Button v-auth="10934">增加</Button>window.authObject = {10934:1}

二、虚拟滚动列表

站内信消息列表数据最多可达1000条数据，数据加载过多，前端页面卡顿。我们可以使用虚拟滚动列表库进行优化。

let internal_message = {template:`<vxe-list :data="notifyList" :height="treeHeight"><template v-slot="{ items }"><notifyCard v-for="(item,index) in items" :key="item.id" :item="item" :index="index" /></template></vxe-list>`,components:{vxeList:VXETable.List}}