Cheng Zhou
38 lines
817 B
Vue
38 lines
817 B
Vue
<template>
|
|
<el-tooltip v-if="!allowed && tooltip" :content="reason" placement="top">
|
|
<span class="perm-wrapper perm-disabled">
|
|
<slot />
|
|
</span>
|
|
</el-tooltip>
|
|
<span v-else-if="!allowed" class="perm-wrapper perm-disabled">
|
|
<slot />
|
|
</span>
|
|
<span v-else class="perm-wrapper">
|
|
<slot />
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { usePermission } from "../utils/permission";
|
|
|
|
const props = defineProps<{
|
|
action: string;
|
|
tooltip?: boolean;
|
|
}>();
|
|
|
|
const { can, reason: reasonFn } = usePermission();
|
|
const allowed = computed(() => can(props.action));
|
|
const reason = computed(() => reasonFn(props.action));
|
|
</script>
|
|
|
|
<style scoped>
|
|
.perm-wrapper {
|
|
display: inline-block;
|
|
}
|
|
.perm-disabled {
|
|
opacity: 0.55;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|