enum MyComponents {
one = "ComponentOne",
two = "ComponentTwo",
three = "ComponentThree",
}
const currentComponent = shallowRef()
onMounted(async () => {
const component = await axios.get()
switch (component) {
case MyComponents.one: currentComponent .value = ComponentOne,
break
case MyComponents.two: currentComponent .value = ComponentTwo
break
case MyComponents.three: currentComponent .value = ComponentThree
break
}
})
enum IRores {
ADMIN = 'admin',
MODERATOR='moderator',
USER = 'user',
BLACK_USER='black_user'
}
enum IPermissions{
WRITE = 'write',
READ = 'read',
UPDATE='update'
DELETE='delete'
ALL='all'
}
const ROLES_PERMISSIONS = new Map([
[IRoles.Admin, [IPermissions.ALL]],
[IRoles.MODERATOR, [IPermissions.READ, IPermissions.WRITE, IPermissions.UPDATE],
[IRoles.USER , [IPermissions.READ, IPermissions.WRITE]],
[IRoles.BLACK_USER, [IPermissions.READ]],
])
const currentUserPermissions = ROLES_PERMISSIONS.get(currentUser.role)
<div v-if="currentUserPermissions.includes(ROLES_PERMISSIONS.DELETE)">some content</div>
enum IRores {
ADMIN = 'admin',
USER = 'user'
}
<div v-if="currentUser.role === IRoles.ADMIN"></div
<div :v-role="[IRoles.ADMIN]"></div
const switcher = ref(widget.active)
const emits = defineEmits<{
(e: 'editWidget', param: any) : void
}>()
<el-switch size="small" v-model="switcher" inline-prompt/>
watch(switcher , () => {
emits('editWidget', switcher.value)
})
@import file-with-media from './'
... а потом тут переопределены стили контейнеров которые подпадают под медиа запросы
И обработчики удаляются, мистер куратор - потому что мы передаём в директиву функцию, пусть и анонимную, и и засовываем её в листенер, а потом такой же листенер с этой же функцией и удаляем.
Если куратор не заметил, bind.value() - это и есть обработчик. И в add и в remove он одинаковый