|
|
@@ -1,41 +1,40 @@
|
|
|
<!-- 嵌套列表 -->
|
|
|
<template>
|
|
|
<div :style="{ width: item.width ? item.width + 'px' : '100%' }">
|
|
|
- <v-menu :close-on-content-click="closeOnContentClick" @update:modelValue="handleMenuUpdate">
|
|
|
- <template v-slot:activator="{ props }">
|
|
|
- <v-text-field
|
|
|
- v-bind="props"
|
|
|
- v-model="model_selectLabel"
|
|
|
- variant="outlined" hide-spin-buttons
|
|
|
- :density="item.dense || 'compact'"
|
|
|
- :type="item.type"
|
|
|
- :rules="item.rules"
|
|
|
- :disabled="item.disabled"
|
|
|
- :style="{width: item.width}"
|
|
|
- :color="item.color || 'primary'"
|
|
|
- :label="item.label"
|
|
|
- :placeholder="item.placeholder || item.label"
|
|
|
- :autofocus="item.autofocus"
|
|
|
- :required="item.required"
|
|
|
- :class="item.class"
|
|
|
- :suffix="item.suffix"
|
|
|
- :append-icon="item.appendIcon"
|
|
|
- :append-inner-icon="item.appendInnerIcon"
|
|
|
- :clearable="item.clearable"
|
|
|
- :readonly="item.readonly"
|
|
|
- :counter="item.counter"
|
|
|
- :prepend-inner-icon="item.prependInnerIcon"
|
|
|
- :hide-details="hideDetails || false"
|
|
|
- @update:modelValue="modelValueUpDate"
|
|
|
- ></v-text-field>
|
|
|
- </template>
|
|
|
+ <v-text-field
|
|
|
+ v-bind="props"
|
|
|
+ id="menu-activator"
|
|
|
+ v-model="model_selectLabel"
|
|
|
+ variant="outlined" hide-spin-buttons
|
|
|
+ :density="item.dense || 'compact'"
|
|
|
+ :type="item.type"
|
|
|
+ :rules="item.rules"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ :style="{width: item.width}"
|
|
|
+ :color="item.color || 'primary'"
|
|
|
+ :label="item.label"
|
|
|
+ :placeholder="item.placeholder || item.label"
|
|
|
+ :autofocus="item.autofocus"
|
|
|
+ :required="item.required"
|
|
|
+ :class="item.class"
|
|
|
+ :suffix="item.suffix"
|
|
|
+ :append-icon="item.appendIcon"
|
|
|
+ :append-inner-icon="item.appendInnerIcon"
|
|
|
+ :clearable="item.clearable"
|
|
|
+ :readonly="item.readonly"
|
|
|
+ :counter="item.counter"
|
|
|
+ :prepend-inner-icon="item.prependInnerIcon"
|
|
|
+ :hide-details="item.hideDetails || false"
|
|
|
+ @update:modelValue="modelValueUpDate"
|
|
|
+ >
|
|
|
+ </v-text-field>
|
|
|
+ <v-menu activator="#menu-activator" :close-on-content-click="closeOnContentClick" >
|
|
|
<listGroup
|
|
|
:list="item.items"
|
|
|
:option="option"
|
|
|
:selectValue="value"
|
|
|
class="px-1"
|
|
|
style="max-height: 258px; border-radius: 5px;"
|
|
|
- :class="{'detailMargin': detailMargin}"
|
|
|
@labelUpdate="labelTxt => labelUpdateDeal(labelTxt)"
|
|
|
@clickUpdate="val => clickUpdate(val)"
|
|
|
></listGroup>
|
|
|
@@ -59,13 +58,8 @@ const option = {
|
|
|
items: []
|
|
|
}
|
|
|
const emit = defineEmits(['update:modelValue', 'change'])
|
|
|
-const modelValueUpDate = (newText) => {
|
|
|
- if (option.rules) {
|
|
|
- model_selectLabel.value = static_selectLabel
|
|
|
- } else {
|
|
|
- model_selectLabel.value = ''
|
|
|
- console.log(newText)
|
|
|
- }
|
|
|
+const modelValueUpDate = () => {
|
|
|
+ model_selectLabel.value = option.rules ? static_selectLabel : '' // 必填时不可删除，非必填时则直接删除
|
|
|
}
|
|
|
let static_selectLabel = ''; const model_selectLabel = ref('')
|
|
|
const value = ref(propsData.modelValue) // selectValue // modelValue
|
|
|
@@ -81,20 +75,11 @@ const labelUpdateDeal = (txt) => {
|
|
|
static_selectLabel = model_selectLabel.value = txt
|
|
|
}
|
|
|
|
|
|
-const hideDetails = ref(item.hideDetails || false)
|
|
|
-const detailMargin = ref(false)
|
|
|
-
|
|
|
-const handleMenuUpdate = (bool) => {
|
|
|
- if (item.hideDetails) return
|
|
|
- if (bool) {
|
|
|
- hideDetails.value = true
|
|
|
- detailMargin.value = true
|
|
|
- } else {
|
|
|
- hideDetails.value = item.hideDetails || false
|
|
|
- detailMargin.value = false
|
|
|
- }
|
|
|
-}
|
|
|
+// // 回显label
|
|
|
+// if (item?.items?.length) {
|
|
|
+// const options = item.items
|
|
|
|
|
|
+// }
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.showOnTop {
|
