theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 实现 select 组件单选多选禁用

Browse Source
This commit is contained in:
就眠儀式 2022-09-27 17:25:07 +08:00
parent c97fedb8c5
commit 8ed10c4a67
5 changed files with 31 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
package/component/src/component/select/index.less
View File

@ -13,8 +13,10 @@
}
}
.layui-select-options {
padding: 5px 0;
.layui-select-content {
max-height: 300px;
padding: 5px 0px;
overflow: auto;
}
.layui-select .layui-icon-triangle-d {
@ -27,7 +29,7 @@
transform: rotate(180deg);
}
.layui-select-options .layui-select-option {
.layui-select-content .layui-select-option {
padding: 0 10px;
line-height: 36px;
white-space: nowrap;
@ -35,11 +37,16 @@
text-overflow: ellipsis;
}
.layui-select-options .layui-select-option .layui-form-checkbox[lay-skin="primary"] {
.layui-select-content .layui-select-option.layui-disabled {
color: var(--global-neutral-color-6)!important;
cursor: not-allowed!important;
}
.layui-select-content .layui-select-option .layui-form-checkbox[lay-skin="primary"] {
padding-left: 12px;
}
.layui-select-options .layui-select-option.layui-this {
.layui-select-content .layui-select-option.layui-this {
background-color: var(--global-neutral-color-2);
color: var(--global-checked-color);
font-size: 700;

6
package/component/src/component/select/index.vue
View File

@ -56,7 +56,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
multiple: false,
size: "md",
allowClear: false,
showSearch: false
showSearch: false,
});
const slots = useSlots();
@ -100,7 +100,7 @@ onMounted(() => {
const handleSearch = (value: string) => {
searchValue.value = value;
}
};
const getOption = function (nodes: VNode[]) {
nodes?.map((item: VNode) => {
@ -174,7 +174,7 @@ provide("multiple", multiple);
</template>
</lay-input>
<template #content>
<dl class="layui-select-options">
<dl class="layui-select-content">
<div class="layui-select-search" v-if="multiple && showSearch">
<lay-input
v-model="searchValue"

31
package/component/src/component/selectOption/index.vue
View File

@ -37,7 +37,7 @@ const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
const multiple: ComputedRef = inject("multiple") as ComputedRef;
const handleSelect = () => {
if (!multiple.value) {
if (!multiple.value && !props.disabled) {
openState.value = false;
selectedValue.value = props.value;
select();
@ -54,22 +54,22 @@ const selected = computed(() => {
const select = () => {
const info = {
label: props.label,
value: props.value,
dispabled: props.disabled,
keyword: props.keyword,
};
const info = {
label: props.label,
value: props.value,
dispabled: props.disabled,
keyword: props.keyword,
};
if (multiple.value) {
if (Array.isArray(selectedItem.value)) {
if (notChecked.value) selectedItem.value.push(info);
} else {
selectedItem.value = [info];
}
if (multiple.value) {
if (Array.isArray(selectedItem.value)) {
if (notChecked.value) selectedItem.value.push(info);
} else {
selectedItem.value = info;
selectedItem.value = [info];
}
} else {
selectedItem.value = info;
}
};
const display = computed(() => {
@ -95,12 +95,13 @@ onMounted(() => {
<template>
<dd
v-show="display"
:class="['layui-select-option', { 'layui-this': selected && !multiple }]"
:class="['layui-select-option', { 'layui-this': selected && !multiple, 'layui-disabled': disabled}]"
@click="handleSelect"
>
<template v-if="multiple">
<lay-checkbox
v-model="selectedValue"
:disabled="disabled"
:value="value"
skin="primary"
></lay-checkbox>

1
package/document-component/src/document/zh-CN/components/icon.md
View File

@ -99,7 +99,6 @@ npm install @layui/icons-vue
```vue
<template>
<!-- 组件图标 -->
<AlignCenterIcon></AlignCenterIcon>
<DiamondIcon></DiamondIcon>
</template>

118
package/document-component/src/document/zh-CN/components/select.md
View File

@ -109,7 +109,6 @@ export default {
:::
::: title 传入选项
:::
@ -139,123 +138,6 @@ export default {
</script>
:::
::: title 检索回调
:::
::: demo
<template>
<lay-select @search="search" v-model="selected">
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="2" label="编码" disabled></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
</lay-select>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const selected = ref('1');
function search(txt){
console.log('关键词:',txt)
}
return {
selected,search
}
}
}
</script>
:::
::: title 定义标识
:::
::: demo
<template>
<lay-select v-model="selected">
<lay-select-option value="1" label="学习" keyword="学习xuexi"></lay-select-option>
<lay-select-option value="2" label="编码" disabled></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
</lay-select>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const selected = ref('1');
return {
selected
}
}
}
</script>
:::
::: title 传入选项
:::
::: demo
<template>
<lay-select v-model="selected" :items="items">
</lay-select>
</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},
])
return {
items,
selected,
}
}
}
</script>
:::
::: title 创建回调
:::
::: demo
<template>
<lay-select v-model="selected" :items="items" :create="true" @create="createEvent"></lay-select>
</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 海量数据
:::