让世界变的美丽

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

      <!-- 初号机 -->
      <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 里 这样页面也变的清晰了 逻辑也统一到了一块 维护起来也方便了很多
对了 这里顺便感谢一个我楠哥（后端）
哈哈