if 和做到优雅的判断状态

Question

根据状态显示下列个个按钮，比如-1的时候只展示订单详情，0代付款需要展示 订单详情，去付款，取消订单...

/**
 * 订单状态 -1订单取消 0代付款 10 待发货 20 待发货|待取货 30待收货 40待确认 50 待评价 60 完成
 */
 <div class="r">
    <div class="btn" v-if="">订单详情</div>
    <div class="btn" v-if="">申请退款</div>
    <div class="btn" v-if="">发票申请</div>
    <div class="btn" v-if="">取消订单</div>
    <div class="btn" v-if="">去付款</div>
</div>

Answer 1

这样挺好，你的优雅是指代码少？

Answer 2

优雅莫过于自定义指令：

const permissionSet = {
    '-1': [0],
    '0': [0, 1]
    // ...
};

const permissionCalcu = (level, state) => {
    return !permissionSet[state].includes(level)
}

Vue.directive('permission',
    {
        inserted(el, binding, vnode) {
            const { value: [level, state] } = binding;
            
            if(permissionCalcu(value, state)){
                el.style.display = 'none';
            }
        }
    }
);

在模板里：

 <div class="r">
    <div class="btn" v-permission="[0, state]">订单详情</div>
    <div class="btn" v-permission="[1, state]">申请退款</div>
    <div class="btn" v-permission="[1, state]">发票申请</div>
    <div class="btn" v-permission="[1, state]">取消订单</div>
    <div class="btn" v-permission="[1, state]">去付款</div>
</div>

这样如果鉴权机制有变的时候只需修改 permissionCalcu 就可以了。
不过这个 permissionCalcu 函数过于简陋，没有容错性，不能直接使用。

Answer 3

 <div class="r">
    <div class="btn" >订单详情</div>
    <template v-if="state==0">
        <div class="btn">申请退款</div>
        <div class="btn">发票申请</div>
        <div class="btn">取消订单</div>
        <div class="btn">去付款</div>
    </template>
</div>

Answer 4

确实累！你这种场景可以直接顶一个Map对象，维护好状态值和对应文本关系。然后定义一个方法，核心是map对象.get(状态值) , Html模板这里只需要引种这个方法传入对应状态值即可，就一行代码解决。

Answer 5

<div class="btn">{{getText(item)}}</div>

getText: function(item) {
          switch (key) {
            case '1': return '退款';  
            case '2': return '取消';  
             // ...
      }
}

Answer 6

枚举值很明显，定义一个filter,从字典中取出对应的值即可
如<button>{{status|buttonText}}</button>

filters: {
    buttonText: s => ({
        '-1': '订单取消',
        // ...other key-value
    })[s]
}

Answer 7

data: function() {
    return {
        order: {status: -1},
        order_state_items: {
            '-1': {
                url: null,
                text: '订单详情',
            },
            '1': {
                url: null,
                text: '申请退款',
            },
        }
    }
}

computed: {
    order_status: function() {
        return this.order_state_items[this.order.status];
    }
}

<div>
    {{ order_status.url }}
    {{ order_status.text }}
</div>