[新增] select组件支持create
This commit is contained in:
parent
0be015e449
commit
262fb12e28
@ -188,6 +188,44 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 传入create属性和接收create事件用于开启创建子项功能
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-select v-model="selected" :items="items" :create="true" @create="createEvent">
|
||||||
|
</lay-select>
|
||||||
|
当前元素: {{items.map(o=>o.label).join()}}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const selected = ref('1');
|
||||||
|
const items=ref([
|
||||||
|
{label:'选项1',value:'1',keyword:'选项xuanxiang1'},
|
||||||
|
{label:'选项2',value:2,keyword:'选项xuanxiang2'},
|
||||||
|
{label:'选项3',value:3,keyword:'选项xuanxiang3',disabled:true},
|
||||||
|
]);
|
||||||
|
function createEvent(v){
|
||||||
|
items.value.push({
|
||||||
|
label:v,
|
||||||
|
value:items.value.length
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
selected,items,createEvent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title 海量数据
|
::: title 海量数据
|
||||||
@ -283,6 +321,7 @@ export default {
|
|||||||
| disabled | 是否禁用 | `boolean` | `true` `false` | `false` |
|
| disabled | 是否禁用 | `boolean` | `true` `false` | `false` |
|
||||||
| showEmpty | 是否增加空提示选项 | `boolean` | `true` `false` | `true` |
|
| showEmpty | 是否增加空提示选项 | `boolean` | `true` `false` | `true` |
|
||||||
| multiple | 是否为多选 | `boolean` | `true` `false` | `false` |
|
| multiple | 是否为多选 | `boolean` | `true` `false` | `false` |
|
||||||
|
| create | 是否允许创建 | `boolean` | `true` `false` | `false` |
|
||||||
|
|
||||||
|
|
||||||
:::
|
:::
|
||||||
@ -296,6 +335,7 @@ export default {
|
|||||||
| ------ | ---------- | --------------- |
|
| ------ | ---------- | --------------- |
|
||||||
| change | 切换事件 | value |
|
| change | 切换事件 | value |
|
||||||
| search | 关键词变化事件 | 用户输入的关键词 string |
|
| search | 关键词变化事件 | 用户输入的关键词 string |
|
||||||
|
| create | 允许创建情况下的创建回调事件 | 用户输入的关键词 string |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -29,6 +29,7 @@ export interface LaySelectProps {
|
|||||||
showEmpty?: boolean;
|
showEmpty?: boolean;
|
||||||
emptyMessage?: string;
|
emptyMessage?: string;
|
||||||
multiple?: boolean;
|
multiple?: boolean;
|
||||||
|
create?: boolean;
|
||||||
items?: { label: string, value: string | number | [] | null, key: string }[]
|
items?: { label: string, value: string | number | [] | null, key: string }[]
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,6 +45,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
|
|||||||
disabled: false,
|
disabled: false,
|
||||||
showEmpty: true,
|
showEmpty: true,
|
||||||
multiple: false,
|
multiple: false,
|
||||||
|
create: false
|
||||||
});
|
});
|
||||||
|
|
||||||
const openState = ref(false);
|
const openState = ref(false);
|
||||||
@ -55,9 +57,10 @@ const open = function () {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
openState.value = !openState.value;
|
openState.value = !openState.value;
|
||||||
|
console.log(props.create)
|
||||||
};
|
};
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue", "change", 'search']);
|
const emit = defineEmits(["update:modelValue", "change", 'search', 'create']);
|
||||||
const selectItem = ref<SelectItem>({
|
const selectItem = ref<SelectItem>({
|
||||||
value: !props.multiple
|
value: !props.multiple
|
||||||
? props.modelValue
|
? props.modelValue
|
||||||
@ -114,7 +117,7 @@ const value = computed({
|
|||||||
: null
|
: null
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const selectItemHandle = function (
|
const selectItemHandle = async function (
|
||||||
_selectItem: SelectItem,
|
_selectItem: SelectItem,
|
||||||
isChecked?: boolean
|
isChecked?: boolean
|
||||||
) {
|
) {
|
||||||
@ -230,9 +233,12 @@ provide("keyword", txt)
|
|||||||
|
|
||||||
<!-- 下拉内容 -->
|
<!-- 下拉内容 -->
|
||||||
<dl class="layui-anim layui-anim-upbit">
|
<dl class="layui-anim layui-anim-upbit">
|
||||||
<template v-if="!multiple && showEmpty">
|
<template v-if="!multiple && showEmpty && !props.create">
|
||||||
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
|
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
|
||||||
</template>
|
</template>
|
||||||
|
<template v-if="props.create">
|
||||||
|
<dd @click="emit('create', txt)">{{ txt }}</dd>
|
||||||
|
</template>
|
||||||
<template v-if="props.items">
|
<template v-if="props.items">
|
||||||
<lay-select-option
|
<lay-select-option
|
||||||
v-for="(v, k) in props.items"
|
v-for="(v, k) in props.items"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user