bab-icon/resources/assets/js/components/UiInputSelect.vue

<template>
    <el-row class="form-group">
        <el-col :span="3" style="min-height:50px;padding-top:10px;">
            <label style="margin-left:10px;vertical-align: middle;"
                   class="control-label">{{ label ? label : 'Text' }}</label>
        </el-col>
        <el-col :span="9">
            <el-input
                :type="typeV"
                v-model="text"
                :placeholder="placeholder ? placeholder : ''"
                disabled="disabled"
                :minlength="minlength ? parseInt(minlength) : 0"
                :maxlength="maxlength ? parseInt(maxlength) : 200"
                :auto-complete="autoComplete ? 'on' : 'off'"
                :readonly="readonly ? true : false"
                :show-password="showPassword ? true : false"
                :autofocus="autofocus ? true : false"
                :size="size ? size : 'large'"
            >
            </el-input>
            <el-input
                type="hidden"
                v-model="id"
                :placeholder="placeholder ? placeholder : ''"
                :name="name ? name : 'text'"
                :minlength="minlength ? parseInt(minlength) : 0"
                :maxlength="maxlength ? parseInt(maxlength) : 200"
                :auto-complete="autoComplete ? 'on' : 'off'"
                :readonly="readonly ? true : false"
                :show-password="showPassword ? true : false"
                :autofocus="autofocus ? true : false"
                :id="name"
                :size="size ? size : 'large'"
                @change="selectChange">
            </el-input>
        </el-col>
        <el-col :span="5">
            <a class="createForm" data-title="create">
                <button type="button" @click="openForm(send_url)" class="btn btn-info">
                    {{ button_title == '' ? '查看' : button_title }}
                </button>
            </a>
        </el-col>

        <el-col :span="6">
            <div class="classJs">
                <div v-if="tips">
                    <span class="red">*</span>&ensp;{{ tips }}
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    props: ['label', 'value', 'placeholder', 'disabled', 'name', 'minlength', 'maxlength', 'readonly', 'autofocus', 'autoComplete', 'size', 'tips', 'type','title', 'showPassword', 'send_url', 'button_type', 'button_title','options'],
    data() {
        return {
            'text': this.title ? this.title : '',
            'id': this.value ? this.value : '',
            'typeV': this.type ? this.type : 'text',
            'time_num': 0,
            'layer_index':null
        };
    },
    mounted() {
    },
    methods: {
        selectChange(value) {
            this.$emit('set-keys', value);
        },
        openForm: function (send_url) {
         this.layer_index=  layer.open({
                type: 2,
                title: this.label,
                closeBtn: 1,
                time: 0,
                id: 'openFormSelect' ,
                // move: false,
                maxmin: true,
                area: ['70%', '80%'],
                scrollbar: false,
                shadeClose: false,
                skin: '',
                zIndex: 9999999, //> 当前设置层级
                content: send_url,
                full: function (ele) {

                },
                cancel: function () {

                },
                moveEnd: function () {

                }
            })
            console.log(  this.layer_index+'-----------layer_index')
        }

    },
    watch: {
        '_props.options.value': function () {
            console.log('获取到父级数据变化:' + this._props.options.value);
            this.id = this._props.options.value;
            layer.close(this.layer_index);

        },
        '_props.options.title': function () {
            console.log('获取到父级数据变化:' + this._props.options.title);
            this.text = this._props.options.title;
        },

    },
}
</script>

<style scoped>
.classJs {
    margin-left: 10px;
    vertical-align: middle;
    height: 42px;
    line-height: 42px;
}

.red {
    color: red;
}
</style>