做網(wǎng)站模塊百度一下首頁(yè)極簡(jiǎn)版
搜索關(guān)鍵字：
自定義指令傳參| +"自定義指令"+"dataset"|自定義指令dataset| +"Vue"+"directives"|vue按鈕權(quán)限實(shí)現(xiàn)
1、完整代碼：
<template>
? ? <div>
? ? ? ? <el-breadcrumb separator-class="el-icon-arrow-right">
? ? ? ? ? ? <el-breadcrumb-item>報(bào)表管理</el-breadcrumb-item>
? ? ? ? ? ? <el-breadcrumb-item>折線圖</el-breadcrumb-item>
? ? ? ? </el-breadcrumb>
? ? ? ? <el-card>
? ? ? ? ? ? <el-row type="flex" justify="center" style="margin-top:20px">
? ? ? ? ? ? ? ? <el-col :push="12" :span="12">
? ? ? ? ? ? ? ? ? ? <el-button type="primary" v-btnOp = "{name:'BtnAdd',loadOps:ops}">新增</el-button>
? ? ? ? ? ? ? ? ? ? <el-button type="success" v-btnOp = "{name:'BtnExp',loadOps:ops}">導(dǎo)出</el-button>
? ? ? ? ? ? ? ? ? ? <el-button type="info" v-btnOp = "{name:'BtnPrint',loadOps:ops}">打印</el-button>
? ? ? ? ? ? ? ? ? ? <el-button type="warning" v-btnOp = "{name:'BtnShare',loadOps:ops}">分享</el-button>
? ? ? ? ? ? ? ? </el-col>
? ? ? ? ? ? </el-row>
? ? ? ? </el-card>
? ? </div>
</template>
<script>
export default {
? ? data() {
? ? ? ? return {
? ? ? ? ? ? // 用戶ID
? ? ? ? ? ? userpx: '',
? ? ? ? ? ? // 頁(yè)面ID
? ? ? ? ? ? pageID: '',
? ? ? ? ? ? // 操作權(quán)限加載標(biāo)志
? ? ? ? ? ? loaded: false,
? ? ? ? ? ? // 操作權(quán)限
? ? ? ? ? ? ops: []
? ? ? ? }
? ? },
? ? created() {
? ? ? ? this.getUserIDPageID();
? ? },
? ? methods: {
? ? ? ? // 獲取登錄用戶ID+頁(yè)面ID
? ? ? ? getUserIDPageID() {
? ? ? ? ? ? this.pageID = this.$route.query.id;
? ? ? ? ? ? console.log("頁(yè)面ID",this.pageID);
? ? ? ? ? ? if(sessionStorage.getItem("user") !== null) {
? ? ? ? ? ? ? ? let user = JSON.parse(sessionStorage.getItem("user"));
? ? ? ? ? ? ? ? this.userpx = user.id;
? ? ? ? ? ? ? ? console.log("用戶ID",this.userpx);
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? // 加載操作權(quán)限
? ? ? ? loadAssignedOps() {
? ? ? ? ? ? this.$axios.get("/api/operation/assignedops",{
? ? ? ? ? ? ? ? params: {
? ? ? ? ? ? ? ? ? ? userpx: this.userpx,
? ? ? ? ? ? ? ? ? ? pageID: this.pageID
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? .then( res => {
? ? ? ? ? ? ? ? console.log("獲取操作權(quán)限返回?cái)?shù)據(jù)：",res.data);
? ? ? ? ? ? ? ? this.ops = res.data.data;
? ? ? ? ? ? ? ? console.log("看一下操作數(shù)組ops:",this.ops);
? ? ? ? ? ? ? ? console.log("包括BtnShare:",this.ops.includes("BtnShare"));
? ? ? ? ? ? })
? ? ? ? ? ? .catch( function(error) {
? ? ? ? ? ? ? ? console.log(error);
? ? ? ? ? ? });
? ? ? ? }
? ? },
? ? watch: {
? ? ? ? userpx: function(data) {
? ? ? ? ? ? if(this.loaded) {
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? } ? ? ? ? ? ?
? ? ? ? ? ? console.log("userpx有值了：,在看一下this.pageID",data,this.pageID);
? ? ? ? ? ? if(this.pageID ) {
? ? ? ? ? ? ? ? this.loaded = true;
? ? ? ? ? ? ? ? this.$nextTick( () => {
? ? ? ? ? ? ? ? ? ? this.loadAssignedOps();
? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? pageID: function(data) {
? ? ? ? ? ? if(this.loaded) {
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? console.log("pageID有值了：,再看一下this.userpx",data,this.userpx);
? ? ? ? ? ? if(this.userpx) {
? ? ? ? ? ? ? ? this.loaded = true;
? ? ? ? ? ? ? ? this.$nextTick( () => {
? ? ? ? ? ? ? ? ? ? this.loadAssignedOps(); ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? directives: {
? ? ? ? "btnOp": {
? ? ? ? ? ? componentUpdated: function(el,binding,vnode) {
? ? ? ? ? ? ? ? console.log("改進(jìn)之后binding.value.name",binding.value.name);
? ? ? ? ? ? ? ? console.log("改進(jìn)之后binding.value.loadOps",binding.value.loadOps)
? ? ? ? ? ? ? ? let ops = binding.value.loadOps;
? ? ? ? ? ? ? ? console.log("看一下Ops是否包括按鈕值：",ops.includes(binding.value.name),binding.value.name);
? ? ? ? ? ? ? ? if( ops != null && !ops.includes(binding.value.name)) {
? ? ? ? ? ? ? ? ? ? el.parentNode.removeChild(el);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}
</script>
<style lang="scss" scoped>
.el-breadcrumb {
? ? margin-bottom: 15px;
? ? font-size: 12px;
}
.el-card {
? ? box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
</style>
2、后臺(tái)接口"/api/operation/assignedops"
返回實(shí)際數(shù)據(jù)：
[
??? "BtnShare",
??? "BtnExp",
??? "BtnPrint"
]
3、判斷頁(yè)面按鈕是否在返回值里面
<el-button type="success" v-btnOp = "{name:'BtnExp',loadOps:ops}">導(dǎo)出</el-button>
4、效果圖：
?