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
Download Patch File Download Diff File Expand all files Collapse all files

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 海量数据
:::