kuailelunwen_new_houtai/src/components/GuipFormItem.vue

<template>
    <div 
    :class="[{'column':column},{'error':hasError},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item1']">
        <div class="form-item-top">
            <label v-if="label" for="">{{ label }}
                <img src="../assets/require.svg" v-if="required" alt="">
            </label>
            <template >
                <slot name="formLeft"></slot>
            </template>
            <template >
                <slot name="formRight"></slot>
            </template>
        </div>
        <div class="form-item-bottom">
            <template >
                <slot name="formDom"></slot>
            </template>
        </div>
    </div>
</template>
<script>
export default {
     name: 'GuipFormItem',
     props:['label','required','addClass','column'],
     data() {
         return {
            hasError: false,
            // 目前这两个宽度用的最多，其余宽度自定义类名修改吧
            classList:{
                'w510':'w510',
                'w388':'w388'
            }
         }
     },
     computed: {
        // dynamicClasses() {
        //     return {
        //         active: this.isActive, // 如果isActive为true，则添加'active'类
        //         error: this.hasError,  // 如果hasError为true，则添加'error'类
        //         highlighted: this.isHighlighted, // 如果isHighlighted为true，则添加'highlighted'类
        //     };
        // }
    },
     mounted(){
         console.log(this.required,'required----');
     }
   }
</script>
<style lang="scss" scoped>

</style>