zq
5 days ago
6 changed files with 186 additions and 11 deletions
@ -0,0 +1,7 @@ |
|||
import GuipSelect from './src/index.vue' |
|||
|
|||
GuipSelect.install = function(Vue) { |
|||
Vue.component(GuipSelect.name || 'GuipSelect', GuipSelect) |
|||
} |
|||
|
|||
export default GuipSelect |
|||
@ -0,0 +1,128 @@ |
|||
<template> |
|||
<el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required" |
|||
:class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" |
|||
:label="label" :prop="prop" :rules="rules"> |
|||
<p v-if="desc" class="desc_right">{{ desc }}</p> |
|||
<el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue" |
|||
v-bind="$attrs"> |
|||
<el-option v-for="item in processedOptions" :key="getItemValue(item)" :label="getItemLabel(item)" |
|||
:disabled="item.disabled" :value="getItemValue(item)"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipSelect', |
|||
props: { |
|||
value: [String, Number, Array], |
|||
options: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
// 新增配置字段 |
|||
valueKey: { |
|||
type: String, |
|||
default: 'value' |
|||
}, |
|||
labelKey: { |
|||
type: String, |
|||
default: 'label' |
|||
}, |
|||
// 新增动态添加项的配置 |
|||
extraItem: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
styleObject: Object, |
|||
disabled: Boolean, |
|||
required: Boolean, |
|||
defaultValue: [String, Number, Array], |
|||
placeholder: String, |
|||
width: String, |
|||
height: String, |
|||
label: String, |
|||
type: String, |
|||
prop: String, |
|||
rules: [Object, Array], |
|||
column: Boolean, |
|||
addClass: String, |
|||
desc: String |
|||
}, |
|||
data() { |
|||
return { |
|||
selectedValue: '', |
|||
style: {}, |
|||
placeholder1: '请选择', |
|||
} |
|||
}, |
|||
computed: { |
|||
// 处理options为空的情况 |
|||
processedOptions() { |
|||
let options = this.options || []; |
|||
// 当extraItem存在且不是空对象时，添加到options数组开头 |
|||
if (this.extraItem && Object.keys(this.extraItem).length > 0) { |
|||
return [ |
|||
{ |
|||
[this.labelKey]: this.extraItem.label || '', |
|||
[this.valueKey]: this.extraItem.value || '', |
|||
disabled: this.extraItem.disabled || false |
|||
}, |
|||
...options |
|||
]; |
|||
} |
|||
return options; |
|||
} |
|||
}, |
|||
watch: { |
|||
value(newVal) { |
|||
this.selectedValue = newVal |
|||
}, |
|||
defaultValue(newVal) { |
|||
if (newVal !== undefined && newVal !== null) { |
|||
this.selectedValue = newVal |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 默认值赋值 |
|||
if (this.defaultValue !== undefined && this.defaultValue !== null) { |
|||
this.selectedValue = this.defaultValue |
|||
} |
|||
if (this.value !== undefined && this.value !== null) { |
|||
this.selectedValue = this.value |
|||
} |
|||
// 默认提示语 |
|||
if (this.placeholder) { |
|||
this.placeholder1 = this.placeholder |
|||
} |
|||
this.$nextTick(() => { |
|||
let els = document.querySelectorAll('.el-input'); |
|||
els.forEach(item => { |
|||
item.onmouseover = function () { |
|||
item.classList.add("hoverclass") |
|||
} |
|||
item.onmouseout = function () { |
|||
item.classList.remove("hoverclass") |
|||
} |
|||
|
|||
}) |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 获取value值 |
|||
getItemValue(item) { |
|||
return item[this.valueKey] |
|||
}, |
|||
// 获取label值 |
|||
getItemLabel(item) { |
|||
return item[this.labelKey] |
|||
}, |
|||
handleChange(value) { |
|||
this.$emit('input', value) |
|||
this.$emit('change', value) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue