VUE通过配置显示不同按钮属性（简单事例）

通过配置显示不同按钮对应的属性

所有示例代码

<template>
    <div style="width: 375px;">
        <div>
            <ul style="list-style: none">
                <li v-for="(i, index) in config" :key="index" style="float:left;">
                    <el-button @click="type=i.name">{{i.name}}</el-button>
                </li>
            </ul>
        </div>
        <div style="width: 300px; height:800px;
                    border: solid 1px rgb(220, 223, 230);
                    float: left;padding-top: 10px">
            <!-- 通过配置,来展示按钮各属性 item.type标识属性的模块类型 -->
            <el-form>
                <el-form-item v-for="(item, index) in attr" :key="index" style="padding: 0 10px">
                    <div :style="{width: item.labelWidth, float: item.float, textAlign:item.labelPosition}">
                        <span >{{item.label}}</span>
                    </div>
                    <el-input v-if="item.type==='input'"  placeholder="请输入内容" :style="{width: item.width}" />
                    <el-select v-if="item.type==='select'" v-model="value" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button v-if="item.type ==='button'"
                    >{{item.label}}</el-button>
                    <el-row  v-if="item.type ==='button'" >
                        <el-col :span="24">
                            <el-card :body-style="{ padding: '0px' }">
                                <img style="width: 140px; height: 140px; float: left; border: solid 1px black" src="../assets/image/1.png" class="image">
                                <div style=" width: 120px; float:right;">
                                    <span>切换时间：</span>
                                    <el-input  placeholder="请输入内容" :style="{width: item.width}" />
                                    <span>切换模式：</span>
                                    <el-select v-model="optionsValue" placeholder="请选择">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    export default {
        name: "text1",
        data(){
            return{
                label:'',
                label_width:'80px',
                //按钮的属性配置
                config:[
                    { name:1,
                      attr:[
                          {
                              label:'输入框了：',
                              type:'input',
                              float:'left',
                              labelWidth:'100px',
                              labelPosition:'right',
                              attrWidth:'150px',
                          },
                      ]
                    },
                    { name:2,label_width:'80px',
                        attr:[
                            {
                                label:'按钮',
                                type:'button'
                            }]
                    },
                    { name:3,label_width:'60px',
                        attr:[
                            {
                                label:'输入框',
                                type:'input'
                            },
                            {
                                label:'选择框',
                                type:'select',
                                value:'选项5',
                                options: [{
                                    value: '选项1',
                                    label: '黄金糕'
                                }, {
                                    value: '选项2',
                                    label: '双皮奶'
                                }, {
                                    value: '选项3',
                                    label: '蚵仔煎'
                                }, {
                                    value: '选项4',
                                    label: '龙须面'
                                }, {
                                    value: '选项5',
                                    label: '北京烤鸭'
                                }]},
                        ]
                    },

                ],
                //选择框的选项内容
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                //选择框的已选择值
                optionsValue: '',
                attr:'',
                type:1
            }
        },
        methods:{
            // 通过类型获取按钮的属性内容
            getMatByType(type) {
                return this.compsMap.get(type) || {};
            },
        },
        created() {
            this.attr = this.getMatByType(this.type).attr
        },
        watch: {
            type(type){
                this.attr = this.getMatByType(type).attr;
            }
        },
        computed:{
            compsMap(){
                return new Map(this.config.map(mat => [mat.name, mat]));
            }
        }


    }
</script>

<style scoped>
</style>

事列效果：



注意：

• v-if 只加载显示满足条件的dom，不满足调试的不加载不显示
• v-show 只加载所有的dom，只显示满足条件的dom