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

✨ [新增]下拉框支持多选；初版本提交

Browse Source
This commit is contained in:
xumi
2021-12-20 23:02:13 +08:00
parent 7ff38feec5
commit 06b7fc3c3b
5 changed files with 255 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
example/docs/zh-CN/components/select.md
View File

@@ -4,7 +4,7 @@
::: demo
<template>
<lay-select>
<lay-select v-model="value">
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="2" label="编码"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
@@ -16,8 +16,9 @@ import { ref } from 'vue'
export default {
setup() {
const value = ref(null);
return {
value
}
}
}
@@ -33,7 +34,7 @@ export default {
<template>
<lay-select v-model="selected">
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="2" label="编码" disabled="true"></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>
@@ -55,15 +56,56 @@ export default {
:::
::: title 多选使用
:::
::: demo
<template>
<lay-select v-model="mvalue" @change="change" multiple>
<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-option value="4" label="唱歌"></lay-select-option>
<lay-select-option value="5" label="跳舞"></lay-select-option>
<lay-select-option value="6" label="打篮球"></lay-select-option>
<lay-select-option value="7" label="rap"></lay-select-option>
</lay-select>
</template>
<script>
import { ref,watch } from 'vue'
export default {
setup() {
const mvalue = ref(['1','2']);
const change = function(val){
console.log(val, mvalue.value)
}
return {
mvalue,
change
}
}
}
</script>
:::
::: title select 属性
:::
::: table
| Name | Description | Accepted Values |
| ------- | -------------- | --------------- |
| name | 原生 name 属性 | -- |
| v-model | 选中值 | -- |
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
| ------------ | --------------------- | ------------------------- | -------------- | -------- |
| v-model | 选中值 | `string`/`number`/`Array` | - | - |
| name | 原生 name 属性 | `string` | - | - |
| placeholder | 默认空提示语 | `string` | - | `请选择` |
| disabled | 是否禁用 | `boolean` | `true` `false` | `false` |
| showEmpty | 是否增加空提示选项 | `boolean` | `true` `false` | `true` |
| multiple | 是否为多选 | `boolean` | `true` `false` | `false` |
:::
@@ -72,10 +114,14 @@ export default {
::: table
| Name | Description | Accepted Values |
| ----- | ----------- | --------------- |
| label | 标签 | -- |
| value | 值 | -- |
::: table
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
| ------------ | --------------------- | ------------------------- | -------------- | -------- |
| label | 标签值(`必填`) | `string` | - | - |
| value | 值 | `string` / `number` | - | - |
| disabled | 是否禁用 | `boolean` | `true` `false` | `false` |
:::
@@ -84,9 +130,9 @@ export default {
::: table
| Name | Description | Accepted Values |
| ------- | ----------- | --------------- |
| default | 默认 | -- |
| 属性 | 描述 | 接收值 |
| ------- | ----------------- | --------------- |
| default | 默认(`label`) | - |
:::
@@ -95,8 +141,8 @@ export default {
::: table
| Name | Description | Accepted Values |
| ------ | ----------- | --------------- |
| 属性 | 描述 | 接收值 |
| ------ | ---------- | --------------- |
| change | 切换事件 | value |
:::