一粒按钮的进化史

我是一个后台管理系统列表页面里列表上的的一粒按钮。

我脱胎于element ui

<el-button
  size="mini"
  type="primary"  @click="回调方法(行元素)">
  <i class="iconfont icon-btn-xxx"/>
  一粒按钮
</el-button>

然而这个爱搞事情的程序员觉得这样不直观；

搞成了下面这样

const btn = {
    type: 'primary',
    fn: () => {},
    text: '一粒按钮'
}
<el-button
  size="mini"
  :type="btn.type"
  @click="btn.fn(行元素)"
>
  <i :class="`iconfont icon-btn-${getIcon(btn.text)}`"/>
  {{$t(btn.text)}}
</el-button>

然后需求有变化，我多了几个兄嘚

所以改成了通过一个列表去循环渲染按钮元素

<el-button
  size="mini"
  v-for="(btn, index) in btnList"
  :key="index"
  :type="btn.type"
  @click="btn.fn"
>
  <i :class="`iconfont icon-btn-${getIcon(btn.text)}`"/>
  {{$t(btn.text)}}
</el-button>

const btnList = [
  {
    type: 'primary',
    fn: () => {},
    text: '一粒按钮'
  },
{
    type: 'primary',
    fn: () => {},
    text: '另一粒按钮'
  }
]

然后我有被用到很多个页面， 但是并不是每个页面都需要我们兄弟全上；

class RowBtns {
  getBtns(vm, otherParams, btnList){
    btnList.map(btnType => RowBtns[btnType](canshu1, canshu2))},
    edit(vm, otherParams){
    return {
      type: 'primary',
      fn: (row) => {vm.$router.push({name: 'xx编辑页', query: {id: row.id}})},
      text: ''
    }
  },
  view(vm, otherParams){
    return {
      type: 'primary',
      fn: (row) => {vm.$router.push({name: 'xx详情页', query: {id: row.id}})},
      text: ''
    }
  },
}

const btnList = RowBtns.getBtns(页面一的Vue实例, otherParams, ['view','edit']);
const btnList1 = RowBtns.getBtns(页面二的Vue实例, otherParams, ['view']);
const btnList2 = RowBtns.getBtns(页面三的Vue实例, otherParams, ['edit']);