83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
Vue
<template>
|
|
<section class="AiSelect">
|
|
<div class="display" v-if="$slots.default" @tap="handleShowOptions">
|
|
<slot/>
|
|
</div>
|
|
<div v-else class="display" @tap="handleShowOptions">
|
|
<div class="selectedLabel" v-if="selectedLabel">{{ selectedLabel }}</div>
|
|
<i v-else>{{ placeholder }}</i>
|
|
<u-icon name="arrow-right" color="#ddd"/>
|
|
</div>
|
|
<u-picker v-model="show" :columns="options" @confirm="handleConfirm"/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AiSelect",
|
|
props: {
|
|
value: String,
|
|
placeholder: {default: "请选择"},
|
|
list: {default: () => []},
|
|
dict: {default: ""},
|
|
disabled: Boolean
|
|
},
|
|
computed: {
|
|
selectedLabel() {
|
|
let label = this.options.find(e => e.value == this.value)?.label
|
|
return this.selected?.map(e => e.label)?.join(",") || label
|
|
},
|
|
options() {
|
|
return this.dict ? this.$dict.getDict(this.dict).map(e => ({
|
|
value: e.dictValue,
|
|
label: e.dictName
|
|
})) : this.list
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
selected: []
|
|
}
|
|
},
|
|
methods: {
|
|
handleConfirm(v) {
|
|
this.selected = v
|
|
this.$emit("data", this.selected)
|
|
this.$forceUpdate()
|
|
},
|
|
handleShowOptions() {
|
|
if (!this.disabled) this.show = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiSelect {
|
|
max-width: 100%;
|
|
|
|
::v-deep .u-icon {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.display {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.selectedLabel {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
color: $uni-text-color-grey;
|
|
}
|
|
}
|
|
</style>
|