让世界变的美丽

想必大家都有过这样的经历 页面会有许多按钮 然后这些按钮需要通过一些后端返回的字段来做显隐藏
第一种做法：平铺到页面上 挨个判断 类似下面这样

      <!-- 初号机 -->
      <button v-if="info.status ==='起草'" @click="submit">提交</button>
      <button v-if="info.status ==='起草'" @click="edit">编辑</button>
      <button v-if="info.status ==='起草'" @click="revoke">撤回</button>
      <button v-if="info.status === '审核'" @click="agree">提交</button>
      <button v-if="info.status === '审核'" @click="reject">驳回</button>
      <button
        v-if="info.status ==='起草' || info.status === '审核' || info.status === '签署'"
        @click="setWorker"
      >设置执行人</button>
      <button @click="goback">返回</button>

现在看着还算工整 但一旦按钮多起来 判断多起来 然后整个页面就花了 人也就疯了 就算是加上注释 也于事无补 甚至注释也会变成一种负担
第二种：换汤不换药

      <!-- 二号机 -->
      <template v-if="info.status ==='起草'">
        <button @click="submit">提交</button>
        <button @click="edit">编辑</button>
        <button @click="revoke">撤回</button>
        <button @click="setWorker">设置执行人</button>
      </template>
      <template v-if="info.status === '审核'">
        <button @click="agree">提交</button>
        <button @click="reject">驳回</button>
        <button @click="setWorker">设置执行人</button>
      </template>
      <template v-if="info.status === '签署'">
        <button @click="setWorker">设置执行人</button>
      </template>
      <button @click="goback">返回</button>

怎么说呢 就像if else换成了swich 也就是看着得劲了 糊弄糊弄自己罢了
第三种：策略模式

      <!-- 三号机 -->
      <template v-for="(val, key) in buttons">
        <button :key="key" @click="val.fn">{{val.text}}</button>
      </template>
      <button @click="goback">返回</button>
      
  computed: {
    buttons() {
      const _this = this;
      const { status } = this.info;
      const qc = "起草";
      const sh = "审核";
      const qs = "签署";
      const buttonPermissions = {
        [qc]: {
          submit: {
            text: "提交",
            fn: _this.submit
          },
          edit: {
            text: "编辑",
            fn: _this.edit
          },
          revoke: {
            text: "撤回",
            fn: _this.revoke
          },
          setWorker: {
            text: "设置执行人",
            fn: _this.setWorker
          }
        },
        [sh]: {
          agree: {
            text: "提交",
            fn: _this.agree
          },
          reject: {
            text: "驳回",
            fn: _this.reject
          },
          setWorker: {
            text: "设置执行人",
            fn: _this.setWorker
          }
        },
        [qs]: {
          setWorker: {
            text: "设置执行人",
            fn: _this.setWorker
          }
        }
      };
      return buttonPermissions[status] || {};
    }
  },

这样做是不是就好了很多 把逻辑从页面里抽出来 放在js里 这样页面也变的清晰了 逻辑也统一到了一块 维护起来也方便了很多
对了 这里顺便感谢一个我楠哥（后端）
哈哈