Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

C V series features:

  1. Focus only on the implementation of functionality. Let you copy and paste can feel at ease to use
  2. Code comments will be detailed, line by line if possible, to clarify the details
  3. Involving third-party libraries and so on do not repeat, the library will be used for you to put a link to facilitate your in-depth understanding

So without further ado about the code

Access directives

/** * permissions *@param {string} Value Permission identifier * Example: <div v-Permission ="'table/del'"></div> */
Vue.directive('permission', {
  inserted: function (el, binding) {
    const { value } = binding
    // Get the list of permission buttons in VueX
    const buttonList = store.state.user.permission

    if (value) {
      // some completes traversal when it encounters return true
      const hasPermission = buttonList.some(btnKey= > btnKey === value)
      // Do not have permission to remove dom elements directly
      if(! hasPermission) { el.parentNode && el.parentNode.removeChild(el) } }else {
      throw new Error('Permission id needs to be specified! Such as: v - permission = "' table_del" `)}}})Copy the code

If you order

/** * Only triggers the last time per unit time *@param {Function} fn- Execute event *@param {? String|"click"} event- Event type: "click" *@param {? Number|500} time- Interval *@param {Array} Binding. Value - [fn,event,time] * To use: <XXX v-debounce="reset "> refresh </XXX> <button v-debounce="[reset,'click',500]"> </button> < button v - debounce = "[() = > reset (param), ` click `, 500]" > refresh < / button > * /
Vue.directive('debounce', {
    bind: function (el, binding) {
        try {
            let fn, event = "click", time = 500;
            if (typeof binding.value == 'function') {
                fn = binding.value
            } else {
                [fn, event = "click", time = 500] = binding.value
            }
            let timer;
            el.addEventListener(event, () = > {
                timer && clearTimeout(timer)
                timer = setTimeout(() = > fn(), time)
            })
        } catch (e) {
            console.log(e)
        }
    }
})
Copy the code

The throttle command

/** * Throttling command is executed immediately when triggered for the first time in a period of time. If triggered again in this period, it will not be executed! *@param {Function} fn- Execute event *@param {? String|"click"} event- Event type: "click" *@param {? Number|500} time- Interval *@param {Array} Binding. Value - [fn,event,time] <XXX v-throttle="reset "> <button V-throttle ="[reset,'click',500]"> </button> < button v - throttle = "[() = > reset (param), ` click `, 500]" > refresh < / button > * /
Vue.directive('throttle', {
    bind: function (el, binding) {
        let fn, event = "click", time = 1500;
        if (typeof binding.value == 'function') {
            fn = binding.value
        } else {
            [fn, event = "click", time = 1500] = binding.value
        }

        /** * El.pretime records the last time the event was triggered, * Each time the difference between nowTime (current time) and el.pretime is greater than the specified time period! * /
        el.addEventListener(event, () = > {
            const nowTime = new Date().getTime()
            if(! el.preTime || nowTime - el.preTime > time) { el.preTime = nowTime fn(); }})}})Copy the code

instructions

  1. I think it is necessary to use the permission instruction. This instruction is mainly suitable for button class permission judgment
  2. Throttling, anti – shake function, there are too many ways to implement, make it a command is a joy

Welcome to see more C V series C V big method