273 lines
10 KiB
Vue
273 lines
10 KiB
Vue
<template>
|
||
<div>
|
||
<LimitsFrontEndPage />
|
||
<!-- 演示1：组件方式 -->
|
||
<el-card shadow="hover" header="演示1：组件方式" class="mt15">
|
||
<el-row class="mb10" style="color:#808080;">单个权限验证（:value="xxx"）：</el-row>
|
||
<div class="flex-warp">
|
||
<Auth :value="'btn.add'">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="primary" size="small" icon="el-icon-document-add">新增
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</Auth>
|
||
<Auth :value="'btn.edit'">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||
</div>
|
||
</div>
|
||
</Auth>
|
||
<Auth :value="'btn.del'">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="danger" size="small" icon="el-icon-delete">删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</Auth>
|
||
<Auth :value="'btn.link'">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="success" size="small" icon="el-icon-link">跳转
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</Auth>
|
||
</div>
|
||
|
||
<el-row class="mb10 mt10" style="color:#808080;">多个权限验证，满足一个则显示（:value="[xxx,xxx]"）：</el-row>
|
||
<div class="flex-warp">
|
||
<Auths :value="['btn.addsss','btn.edit','btn.delsss','btn.linksss']">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="primary" size="small" icon="el-icon-document-add">新增
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</Auths>
|
||
<Auths :value="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||
</div>
|
||
</div>
|
||
</Auths>
|
||
<Auths :value="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="danger" size="small" icon="el-icon-delete">删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</Auths>
|
||
<Auths :value="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="success" size="small" icon="el-icon-link">跳转
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</Auths>
|
||
</div>
|
||
|
||
<el-row class="mb10 mt10" style="color:#808080;">多个权限验证，全部满足则显示（:value="[xxx,xxx]"）：</el-row>
|
||
<div class="flex-warp">
|
||
<AuthAll :value="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="primary" size="small" icon="el-icon-document-add">新增
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</AuthAll>
|
||
<AuthAll :value="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||
</div>
|
||
</div>
|
||
</AuthAll>
|
||
<AuthAll :value="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="danger" size="small" icon="el-icon-delete">删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</AuthAll>
|
||
<AuthAll :value="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="success" size="small" icon="el-icon-link">跳转
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</AuthAll>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 演示2：指令方式 -->
|
||
<el-card shadow="hover" header="演示2：指令方式（页面初始化时执行）" class="mt15">
|
||
<el-row class="mb10" style="color:#808080;">单个权限验证（v-auth="xxx"）：</el-row>
|
||
<div class="flex-warp">
|
||
<div class="flex-warp-item" v-auth="'btn.add'">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="primary" size="small" icon="el-icon-document-add">新增
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item" v-auth="'btn.edit'">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item" v-auth="'btn.del'">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="danger" size="small" icon="el-icon-delete">删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item" v-auth="'btn.link'">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="success" size="small" icon="el-icon-link">跳转
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-row class="mb10 mt10" style="color:#808080;">多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）：</el-row>
|
||
<div class="flex-warp">
|
||
<div class="flex-warp-item" v-auths="['btn.addsss','btn.edit','btn.delsss','btn.linksss']">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="primary" size="small" icon="el-icon-document-add">新增
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item" v-auths="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item" v-auths="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="danger" size="small" icon="el-icon-delete">删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item" v-auths="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="success" size="small" icon="el-icon-link">跳转
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-row class="mb10 mt10" style="color:#808080;">多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）：</el-row>
|
||
<div class="flex-warp">
|
||
<div class="flex-warp-item" v-auth-all="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="primary" size="small" icon="el-icon-document-add">新增
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item" v-auth-all="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item" v-auth-all="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="danger" size="small" icon="el-icon-delete">删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item" v-auth-all="['btn.add','btn.edit','btn.del','btn.link']">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="success" size="small" icon="el-icon-link">跳转
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 演示3：函数方式 -->
|
||
<el-card shadow="hover" header="演示3：函数方式（点击按钮查看有无权限，用于判断）" class="mt15">
|
||
<el-row class="mb10" style="color:#808080;">auth('xxx')、auths(['xxx','xxx'])、authAll(['xxx','xxx'])：</el-row>
|
||
<div class="flex-warp">
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="primary" size="small" icon="el-icon-document-add" @click="onAuthClick">新增
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="info" size="small" icon="el-icon-edit-outline" @click="onAuthsClick">编辑</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-warp-item">
|
||
<div class="flex-warp-item-box">
|
||
<el-button type="danger" size="small" icon="el-icon-delete" @click="onAuthAllClick">删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { ElMessage } from "element-plus";
|
||
import LimitsFrontEndPage from "/@/views/limits/frontEnd/page/index.vue";
|
||
import Auth from "/@/components/auth/auth.vue";
|
||
import Auths from "/@/components/auth/auths.vue";
|
||
import AuthAll from "/@/components/auth/authAll.vue";
|
||
import { auth, auths, authAll } from "/@/utils/authFunction.ts";
|
||
export default {
|
||
name: "limitsFrontEndBtn",
|
||
components: { LimitsFrontEndPage, Auth, Auths, AuthAll },
|
||
setup() {
|
||
// 单个权限验证
|
||
const onAuthClick = () => {
|
||
if (!auth("btn.add")) ElMessage.error("抱歉，您没有权限！");
|
||
else ElMessage.success("恭喜，您有权限！");
|
||
};
|
||
// 多个权限验证，满足一个则为 true
|
||
const onAuthsClick = () => {
|
||
if (!auths(["btn.add", "btn.edit", "btn.del", "btn.link"]))
|
||
ElMessage.error("抱歉，您没有权限！");
|
||
else ElMessage.success("恭喜，您有权限！");
|
||
};
|
||
// 多个权限验证，全部满足则为 true
|
||
const onAuthAllClick = () => {
|
||
if (!authAll(["btn.add", "btn.edit", "btn.del", "btn.link"]))
|
||
ElMessage.error("抱歉，您没有权限！");
|
||
else ElMessage.success("恭喜，您有权限！");
|
||
};
|
||
return {
|
||
onAuthClick,
|
||
onAuthsClick,
|
||
onAuthAllClick,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.flex-warp {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: flex-start;
|
||
margin: 0 -5px;
|
||
.flex-warp-item {
|
||
padding: 5px;
|
||
.flex-warp-item-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style> |