Пользовательская инструкция Vue v-has, сделать оценку разрешения кнопки

Vue.js

Сценарии применения

Взяв в качестве примера систему управления фоном, каждый пользователь имеет разные права доступа к кнопкам. После того, как администратор настроит разрешения, когда пользователь входит в систему, он получает список разрешений кнопок из интерфейса, а затем судит, какие кнопки отображаются в соответствии с фоновыми данными.

В двух словах, индивидуальные инструкции

Официальный сайт Vue.js объясняет пользовательские инструкции

Talent.v UE JS.org/V2/expensive/rough…

Основные понятия

В дополнение к встроенным директивам по умолчанию (v-model и v-show) основных функций, Vue также может регистрировать пользовательские директивы.

В Vue 2.0 основной формой повторного использования кода и абстракции являются компоненты. Однако в некоторых случаях все же необходимо выполнять низкоуровневые операции над общими элементами DOM, в этом случае используются пользовательские инструкции.

Например, настройте инструкцию v-focus, когда страница загружается, поле ввода получает фокус

<input v-focus>

Глобальная настройка

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

Местный обычай

//如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

функция ловушки

bind

只调用一次，指令第一次绑定到元素时调用。 Здесь можно выполнить одноразовые настройки инициализации.

inserted

update

所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。 Значение инструкции может измениться, а может и не измениться. Но вы можете игнорировать ненужные обновления шаблона, сравнив значения до и после обновления.

componentUpdated

unbind

Вызывается только один раз, когда инструкция вызова и решение элемента связи.

разное

В дополнение к этому есть некоторые основные понятия, параметры функции ловушки, динамические параметры директивы и так далее.

Talent.v UE JS.org/V2/expensive/rough…

Официальный сайт очень ясен, здесь здесь нет подробности.

принцип

Если вас интересует исходный код пользовательских инструкций, в саду блога также есть очень прозрачная статья.

Блог woohoo.cn на.com/great Desert…

Принцип таков:

  • При анализе свойств Vue просматривайте каждое свойство;
  • Добавьте атрибут директив к объекту, чтобы сохранить информацию о директиве;
  • После завершения рендеринга будет выполнена функция создания хука модуля директив;
  • Чтобы выполнить каждую функцию, она будет выполнять нашу пользовательскую функцию вставленного хука.

Сегодня в основном подведем итоги: пользовательская инструкция v-has, решение о разрешении кнопки

Интерфейс входа получает список разрешений кнопок и сохраняет его в локальном кэше LOGIN_USER_BUTTON_AUTH.

Формат данных следующий:

[
    {
        "checked":false,
        "component":"",
        "createTime":"2019-06-29 18:21:06",
        "createUser":"026a564bbfd84861ac4b65393644beef",
        "icon":"",
        "id":"1503273153861066776",
        "name":"今日采集（案卷）",
        "open":"true",
        "parentId":"2328050996633395469",
        "parentName":"首页",
        "permission":"sys:index:vol",
        "sort":103,
        "status":"0",
        "type":"2",
        "updateTime":"2021-01-27 15:51:15",
        "updateUser":"026a564bbfd84861ac4b65393644beef",
        "url":""
    }
]

Настройка пользовательских директив v-has

В папке Utils новый файл Haspermission.js в Unified Export Index.js

const hasPermission = {
    install (Vue, options) {
        Vue.directive('has', {
            inserted: (el, binding, vnode)=>{
                filterGlobalPermission(el, binding, vnode);
            }
        });
    }
};
/**
 * 全局权限控制
 */
export const filterGlobalPermission = (el, binding, vnode) => {
    let permissionList = [];
    let authList = JSON.parse(localStorage.getItem('LOGIN_USER_BUTTON_AUTH') || "[]");
    for (let auth of authList) {
        permissionList.push(auth);
    }
    if (!permissionList.length) {
        el.parentNode.removeChild(el);
        return;
    }
    let permissions = [];
    for (let item of permissionList) {
        permissions.push(item.permission);
    }
    if (!permissions.includes(binding.value)) {
        el.parentNode.removeChild(el);
    }
}
export default hasPermission;

index.js в файле utils

Другие файлы js в папке utils также можно экспортировать в index.js.

import hasPermission from './hasPermission'
export { hasPermission }

Представлено в main.js

import { hasPermission } from '@/utils'
Vue.use(hasPermission)

Используйте v-has в компоненте, чтобы определить, следует ли отображать кнопку в соответствии с разрешениями кнопки.

<el-button v-has="'sys:arch:add'" type="primary" size="mini" icon="el-icon-plus" @click="add('1')">
    新增
</el-button>
Категории