设计模式-策略模式

vue中应用策略模式

减少if elseif 判断

使代码更加简洁,易于拓展

<template>
	<el-row v-for="(item,index) in list" :key="index">
       	<el-col :span="16">{{item.title}}</el-col>
        <el-col :span="8">
            <el-tag :type="type[item.type].tagType">{{type[item.type].status}}</el-tag>
    	</el-col>
    </el-row>
</template>
<script setup>
    const list=ref([
    {
        title:'文章1',
        type:1
    },
    {
        title:'文章2',
        type:2
    },
    {
        title:'文章3',
        type:3
    },
])
let type=ref([
    {
        status:'待审核',
        tagtype:'warning'
    },
    {
        status:'已通过',
        tagtype:'success'
    },
    {
        status:'未通过',
        tagtype:'danger'
    }
])
</script>