|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div :class="{ inputable, border }" :style="{ width }" class="magic-select not-select" @click.stop="showList($refs.container, $refs.selectList)" ref="container">
|
|
|
<span v-if="!inputable">{{ showText }}</span>
|
|
|
- <input v-if="inputable" ref="input" v-model="value" autocomplete="off" type="text" @input="(e) => triggerSelect(e.target.value)" :placeholder="placeholder"/>
|
|
|
+ <input v-if="inputable" ref="input" v-model="inputValue" autocomplete="off" type="text" @input="(e) => triggerSelect(e.target.value)" :placeholder="placeholder"/>
|
|
|
<ul v-show="visible" :style="{ width: selectWidth, marginTop, marginLeft}" ref="selectList">
|
|
|
<li v-for="item in options" :key="item.value" @click.stop="triggerSelect(item.value)">
|
|
|
{{ item.text }}
|
|
@@ -33,7 +33,14 @@ const visible = ref(false)
|
|
|
const selectWidth = ref('auto')
|
|
|
const marginLeft = ref('0px')
|
|
|
const emit = defineEmits(['update:value', 'select'])
|
|
|
-
|
|
|
+const inputValue = computed({
|
|
|
+ get() {
|
|
|
+ return props.value
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ emit('update:value', value)
|
|
|
+ }
|
|
|
+})
|
|
|
const showText = computed(() => {
|
|
|
const find = props.options.find(it => it.value === props.value) || props.options.find(it => it.value === props.defaultSelect)
|
|
|
return find && find.text || ''
|