Shulou(Shulou.com)05/31 Report--

Today Xiaobian to share with you how vue uses custom instructions to achieve button permissions display function of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

First, create a new directive folder under src

Second, define the index.js file, inject the custom instruction import hasBtn from'. / permission/hasBtn'const install = function (Vue) {Vue.directive ('hasBtn', hasBtn)} if (window.Vue) {window [' hasBtn'] = hasBtn Vue.use (install); / / eslint-disable-line} export default install 3. Write custom instructions

HasBtn.js file

/ * set the operation permission identifier * / export default {inserted (el, binding, vnode) {/ * * get the value of the dom element from binding * / const {value} = binding / * * store the value * / const btn_permission = value / * * get all the collections with permission buttons, match * / const permissions = JSON.parse (sessionStorage.getItem ('btnarr')) / * * using some query through the passed button id, and return true as long as one element meets the condition All are not satisfied. Return false * / var hasPermissions = permissions.some (permission = > {return btn_permission = = permission.menuId}) / * * if the passed button id does not exist in the collection, remove the node * / if (! hasPermissions) {el [XSS _ clean] & & el [XSS _ clean] .removeChild (el)}} IV. Use

For example, add a v-hasBtn attribute to a new button in a vue page

Add

Directly pass in the id of the button, that is, vmurhasBtn = "15". The custom instructions of vue can all start with v -. At this time, you can trigger the functions defined by the custom instructions to achieve the purpose of controllable permissions of the button.

These are all the contents of the article "how to use custom instructions to display button permissions in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.