28 lines
740 B
Vue
28 lines
740 B
Vue
 
|
<template>
|
||
|
|
<template v-if="visibility === 'interactive'">
|
||
|
|
<slot />
|
||
|
|
</template>
|
||
|
|
<div v-else-if="visibility === 'readonly'" class="pg-readonly" :title="`${widgetId} 当前为只读`">
|
||
|
|
<slot />
|
||
|
|
<div class="pg-mask" />
|
||
|
|
</div>
|
||
|
|
<!-- hidden: 不渲染任何内容 -->
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { useAuthStore } from '@/stores/auth'
|
||
|
|
|
||
|
|
const props = defineProps<{ widgetId: string }>()
|
||
|
|
const auth = useAuthStore()
|
||
|
|
const visibility = computed(() => auth.widgetOf(props.widgetId))
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.pg-readonly { position: relative; }
|
||
|
|
.pg-mask {
|
||
|
|
position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3);
|
||
|
|
pointer-events: all; cursor: not-allowed;
|
||
|
|
}
|
||
|
|
</style>
|