指令练习---实现按钮级别的权限控制

<template>
  <div class="permission">
    <h1>指令练习--按钮级权限控制</h1>
    <ul class="clearFix">
      <li v-has="'create'"><button>新增</button></li>
      <li v-has="'view'"><button>查看</button></li>
      <li v-has="'audit'"><button>审核</button></li>
      <li v-has="'search'"><button>高级查询</button></li>
    </ul>
  </div>
</template>

<script>
import hasDirective from '../directives/has'
export default {
  name: 'Permission',
  directives: {
    has: hasDirective
  },
  created () {
    window.sessionStorage.setItem(
      'permission',
      ['create', 'audit', 'search'].toString()
    )
    console.log('created')
  },
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  }
}
</script>

<style scoped>
.permission {
  width: 800px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.permission h1 {
  font-size: 20px;
  color: #000;
  text-align: center;
}
.permission ul {
  margin-top: 50px;
}
.permission li {
  float: left;
  list-style: none;
}
.permission li + li {
  padding-left: 20px;
}
.clearFix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
</style>

export default {

  // bind 就是指令绑定到元素上执行的方法
  bind (el, bindings) {
    const permission = window.sessionStorage.getItem('permission')
    const needPermission = bindings.value
    const result = permission.includes(needPermission)
    console.log('has Permission')
    if (!result) {
      // 在指令中操作dom元素，要将操作方法放到红任务中
      //   指定将在beforeMount之后mounted之前执行，此时组件还未渲染完毕
      //   添加setTimeout之后组件就会在mounted之后执行
      setTimeout(() => {
        console.log('setTimeout')
        el.parentNode.removeChild(el)
      }, 0)
    }
  }
}