vue中组件内容如何根据js编程创建

Question

基于element-ui

页面上有个按钮组

`<el-button-group>

<el-button>按钮A</el-button>
<el-button>按钮B</el-button>
<el-button>按钮C</el-button>
…

</el-button-group>`

因为很多页面复用，现在想把它定义成组件，现在问题是

我有一张权限验证表，希望根据用户该页权限，动态生成按钮组中内容，且按钮组中的按钮click事件需要能自定义

这个组件该咋写

Answer 1

效果：

Button Group

<template>
  <div>
    <el-button-group>
      <span v-for="btn in btnGroupContent"
        :key="btn.lebal">
        <el-button
          v-if="authority.actions.includes(btn.action)"
          @click="handleClick(btn.action)"
        >
            {{btn.lebal}}
        </el-button>
      </span>
    </el-button-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      btnGroupContent: [
        {
          lebal: 'Create',
          action: 'create'
        },
        {
          lebal: 'Update',
          action: 'update'
        },
        {
          lebal: 'Delete',
          action: 'delete'
        }
      ]
    }
  },
  methods: {
    handleClick (action) {
      // console.log('action', action)
      this.$emit(action, this.authority)
    }
  },
  props: {
    authority: {
      type: Object,
      default: function () {
        return {
          // name: 'admin',
          // actions: [
          //   'create',
          //   'update'
          // ]
        }
      }
    }
  }
}
</script>

Main

<template>
  <div class="content">
    Admin:
    <pri-btn-group
      :authority="admin"
      @create="handleCreate"
      @update="handleUpdate"
      @delete="handleDelete"
    />
    Editor:
    <pri-btn-group
      :authority="editor"
      @create="handleCreate"
      @update="handleUpdate"
    />
  </div>
</template>

<script>
import priBtnGroup from './utils/PriBtnGrp.vue'
export default {
  components: {
    priBtnGroup
    // rankings
  },
  data () {
    return {
      // showRanking: false
      admin:
        {
          id: 0,
          name: 'admin',
          actions: [
            'create',
            'update',
            'delete'
          ]
        },
      editor:
        {
          id: 1,
          name: 'editor',
          actions: [
            'create',
            'update'
          ]
        }
    }
  },
  created () {

  },
  methods: {
    handleCreate (user) {
      console.log(user)
      this.$message(user.name + ' clicked create button')
    },
    handleUpdate (user) {
      this.$message(user.name + ' clicked update button')
    },
    handleDelete (user) {
      this.$message(user.name + ' clicked delete button')
    }
  }
}
</script>

Answer 2

把按钮封装成组件，权限通过props传进来，根据权限过滤出要显示的按钮。按钮的点击事件通过emit触发父组件事件，父组件再执行对应的自定义方法

Answer 3

那就传个数组控制按钮组里按钮展示，click事件中emit返回父组件实现

Answer 4

父组件

<my-button-group
  :authority="['管理员']"
  @on-open="aaa"
  @on-close="bbb"
  @on-confirm="ccc"
/>

子组件

<template>
  <div>
    <button v-if="canUse('管理员')" @click="$emit('on-open')">打开</button>
    <button v-if="canUse('所有人')" @click="$emit('on-close')">关闭</button>
    <button v-if="canUse('普通员工')" @click="$emit('on-confirm')">确定</button>
  </div>
</template>

<script>
export default {
  name: 'my-button-group',
  props: {
    authority: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    canUse (key) {
      if(!this.authority.length) {
        return true
      } else {
        return this.authority.some(c => c===key)
      }
    }
  }
}
</script>

Answer 5

<component :is="'el-button'" v-bind="props">按钮名称</component>

Answer 6

<component :is="'el-button'" v-bind="props">按钮名称</component>