forked from opentiny/tiny-vue
docs(tree-select): optimize demo/api docs (#1743)
This commit is contained in:
GitHub
parent
027afe8653
commit
ab8188edec
|
|
@ -6,37 +6,109 @@ export default {
|
|||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'clearable',
|
||||
name: 'autocomplete',
|
||||
type: 'string',
|
||||
defaultValue: "'off'",
|
||||
desc: {
|
||||
'zh-CN': '输入框的原生 autocomplete 属性',
|
||||
'en-US': 'The native autocomplete attribute of the input box'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'native-properties',
|
||||
mfDemo: 'native-properties'
|
||||
},
|
||||
{
|
||||
name: 'click-expand',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否启用一键清除的功能',
|
||||
'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
|
||||
'zh-CN': '点击可展开或收起显示不全的选项。仅用于多选',
|
||||
'en-US': 'Click to expand or collapse options. Only applicable to multiple selections'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'filter'
|
||||
pcDemo: 'collapse-tags'
|
||||
},
|
||||
{
|
||||
name: 'filter-method',
|
||||
type: '(query: string) => void',
|
||||
name: 'collapse-tags',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否将多个标签折叠显示。仅适用多选',
|
||||
'en-US': 'Whether to collapse multiple labels for display. Only applicable to multiple selections'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'collapse-tags',
|
||||
mfDemo: 'collapse-tags'
|
||||
},
|
||||
{
|
||||
name: 'copyable',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否启用一键复制的功能。点击复制按钮一键复制所有标签的文本内容并以逗号分隔，仅适用于多选',
|
||||
'en-US':
|
||||
'Is the one click copy function enabled. Click the copy button to copy the text content of all labels with one click, separated by commas, only applicable to multiple selections'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'copy-multi',
|
||||
mfDemo: 'copy-multi'
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否禁用',
|
||||
'en-US': 'Is it disabled'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'disabled',
|
||||
mfDemo: 'disabled'
|
||||
},
|
||||
{
|
||||
name: 'dropdown-icon',
|
||||
type: 'Component',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义过滤方法',
|
||||
'en-US': 'Custom filtering method'
|
||||
'zh-CN': '自定义下拉图标',
|
||||
'en-US': 'Custom drop-down icon'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'filter'
|
||||
pcDemo: 'multiple'
|
||||
},
|
||||
{
|
||||
name: 'filterable',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
name: 'drop-style',
|
||||
type: 'String',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '是否可搜索',
|
||||
'en-US': 'Is it searchable'
|
||||
'zh-CN': '自定义下拉选项样式',
|
||||
'en-US': 'Custom drop-down options style'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'filter'
|
||||
pcDemo: 'multiple'
|
||||
},
|
||||
{
|
||||
name: 'input-box-type',
|
||||
type: "'input' | 'underline'",
|
||||
defaultValue: "'input'",
|
||||
desc: {
|
||||
'zh-CN': '输入框的显示类型',
|
||||
'en-US': 'Display type of input box'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'input-box-type',
|
||||
mfDemo: 'input-box-type'
|
||||
},
|
||||
{
|
||||
name: 'max-visible-rows',
|
||||
type: 'number',
|
||||
defaultValue: '1',
|
||||
desc: {
|
||||
'zh-CN': '多行默认最大显示行数，超出后选项自动隐藏',
|
||||
'en-US':
|
||||
'Default maximum display lines for multiple lines, with automatic hiding option for exceeding lines'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'collapse-tags'
|
||||
},
|
||||
{
|
||||
name: 'modelValue / v-model',
|
||||
|
|
@ -60,6 +132,92 @@ export default {
|
|||
mode: ['pc'],
|
||||
pcDemo: 'multiple'
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '输入框的原生 name 属性',
|
||||
'en-US': 'The native name attribute of the input box'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'native-properties',
|
||||
mfDemo: 'native-properties'
|
||||
},
|
||||
{
|
||||
name: 'placeholder',
|
||||
type: 'string',
|
||||
defaultValue: "'请选择'",
|
||||
desc: {
|
||||
'zh-CN': '占位符',
|
||||
'en-US': 'Placeholder'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'native-properties',
|
||||
mfDemo: 'native-properties'
|
||||
},
|
||||
{
|
||||
name: 'placement',
|
||||
typeAnchorName: 'IPlacement',
|
||||
type: 'IPlacement',
|
||||
defaultValue: "'bottom-start'",
|
||||
desc: {
|
||||
'zh-CN': '下拉弹框相对于触发源的弹出位置',
|
||||
'en-US': 'The pop-up position of the pull-down pop-up box relative to the trigger source'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'popup-style-position',
|
||||
mfDemo: 'popup-style-position'
|
||||
},
|
||||
{
|
||||
name: 'popper-append-to-body',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否将弹出框的 dom 元素插入至 body 元素',
|
||||
'en-US': 'Whether to insert the dom element of the pop-up box into the body element'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'popup-style-position',
|
||||
mfDemo: 'popup-style-position'
|
||||
},
|
||||
{
|
||||
name: 'popper-class',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义下拉框的类名，用于自定义样式',
|
||||
'en-US': 'The class name of the custom dropdown box, used for customizing styles'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'popup-style-position',
|
||||
mfDemo: 'popup-style-position'
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
type: "'medium' | 'small' | 'mini'",
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '输入框尺寸。',
|
||||
'en-US': 'Text box size'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'size',
|
||||
mfDemo: 'size'
|
||||
},
|
||||
{
|
||||
name: 'tag-type',
|
||||
type: "'success' | 'info' | 'warning' | 'danger'",
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '标签类型，仅多选适用。使用 aurora 主题时设置该属性为 info',
|
||||
'en-US':
|
||||
'Label type, only applicable for multiple choices. Set this property to info when using the aurora theme'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'tag-type',
|
||||
mfDemo: 'tag-type'
|
||||
},
|
||||
{
|
||||
name: 'text-field',
|
||||
type: 'string',
|
||||
|
|
@ -71,6 +229,18 @@ export default {
|
|||
mode: ['pc'],
|
||||
pcDemo: 'map-field'
|
||||
},
|
||||
{
|
||||
name: 'text-split',
|
||||
type: 'string',
|
||||
defaultValue: "','",
|
||||
desc: {
|
||||
'zh-CN': '自定义复制文本的分隔符，需结合 copyable 属性使用',
|
||||
'en-US': 'The separator for custom copied text needs to be used in conjunction with the copyable attribute'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'copy-multi',
|
||||
mfDemo: 'copy-multi'
|
||||
},
|
||||
{
|
||||
name: 'tree-op',
|
||||
typeAnchorName: 'ITreeOption',
|
||||
|
|
@ -112,6 +282,13 @@ interface ITreeNode {
|
|||
interface ITreeOption {
|
||||
data: ITreeNode[] // 树数据，用法同 Tree
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IPlacement',
|
||||
type: 'type',
|
||||
code: `
|
||||
type IPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
|
||||
`
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
treeOp: {
|
||||
data: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1： collapse-tags 折叠</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple collapse-tags></tiny-tree-select>
|
||||
<p>场景2： hover-expand 折叠</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple hover-expand></tiny-tree-select>
|
||||
<br />
|
||||
<br />
|
||||
<p>场景3： click-expand 折叠</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple click-expand :max-visible-rows="1"></tiny-tree-select>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref([])
|
||||
|
||||
const treeOp = ref({
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: 'OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1： collapse-tags 折叠</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple collapse-tags></tiny-tree-select>
|
||||
<p>场景2： hover-expand 折叠</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple hover-expand></tiny-tree-select>
|
||||
<br />
|
||||
<br />
|
||||
<p>场景3： click-expand 折叠</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple click-expand :max-visible-rows="1"></tiny-tree-select>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTreeSelect: TreeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [],
|
||||
treeOp: {
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: 'OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1：一键复制所有标签</p>
|
||||
<tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable></tiny-tree-select>
|
||||
<p>场景2：设置复制文本分隔符</p>
|
||||
<tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
|
||||
<p>粘贴至此处：</p>
|
||||
<tiny-input v-model="inputVal" type="text"></tiny-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TreeSelect as TinyTreeSelect, Input as TinyInput } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const value2 = ref([])
|
||||
const inputVal = ref('')
|
||||
|
||||
const treeOp = ref({
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select,
|
||||
.tiny-input {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1：一键复制所有标签</p>
|
||||
<tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable></tiny-tree-select>
|
||||
<p>场景2：设置复制文本分隔符</p>
|
||||
<tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
|
||||
<p>粘贴至此处：</p>
|
||||
<tiny-input v-model="inputVal" type="text"></tiny-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect, Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTreeSelect: TreeSelect,
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: [],
|
||||
inputVal: '',
|
||||
treeOp: {
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select,
|
||||
.tiny-input {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1： 未选择</p>
|
||||
<tiny-tree-select v-model="value1" :tree-op="treeOp" disabled></tiny-tree-select>
|
||||
<p>场景2： 单选</p>
|
||||
<tiny-tree-select v-model="value2" :tree-op="treeOp" disabled></tiny-tree-select>
|
||||
<p>场景3： 多选</p>
|
||||
<tiny-tree-select v-model="value3" :tree-op="treeOp" multiple disabled></tiny-tree-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref('')
|
||||
const value2 = ref(1)
|
||||
const value3 = ref([1, 4, 9, 10])
|
||||
|
||||
const treeOp = ref({
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1： 未选择</p>
|
||||
<tiny-tree-select v-model="value1" :tree-op="treeOp" disabled></tiny-tree-select>
|
||||
<p>场景2： 单选</p>
|
||||
<tiny-tree-select v-model="value2" :tree-op="treeOp" disabled></tiny-tree-select>
|
||||
<p>场景3： 多选</p>
|
||||
<tiny-tree-select v-model="value3" :tree-op="treeOp" multiple disabled></tiny-tree-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTreeSelect: TreeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: 1,
|
||||
value3: [1, 4, 9, 10],
|
||||
treeOp: {
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" value-field="val" text-field="text"></tiny-tree-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
|
||||
const treeOp = ref({
|
||||
data: [
|
||||
{
|
||||
val: 1,
|
||||
text: '一级 1',
|
||||
children: [
|
||||
{
|
||||
val: 4,
|
||||
text: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
val: 9,
|
||||
text: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
val: 10,
|
||||
text: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
val: 2,
|
||||
text: '一级 2',
|
||||
children: [
|
||||
{
|
||||
val: 5,
|
||||
text: '二级 2-1'
|
||||
},
|
||||
{
|
||||
val: 6,
|
||||
text: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" value-field="val" text-field="text"></tiny-tree-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTreeSelect: TreeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
treeOp: {
|
||||
data: [
|
||||
{
|
||||
val: 1,
|
||||
text: '一级 1',
|
||||
children: [
|
||||
{
|
||||
val: 4,
|
||||
text: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
val: 9,
|
||||
text: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
val: 10,
|
||||
text: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
val: 2,
|
||||
text: '一级 2',
|
||||
children: [
|
||||
{
|
||||
val: 5,
|
||||
text: '二级 2-1'
|
||||
},
|
||||
{
|
||||
val: 6,
|
||||
text: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple></tiny-tree-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref([])
|
||||
|
||||
const treeOp = ref({
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple></tiny-tree-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTreeSelect: TreeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [],
|
||||
treeOp: {
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<tiny-tree-select
|
||||
v-model="value"
|
||||
:tree-op="treeOp"
|
||||
placeholder="请选择一个选项"
|
||||
name="inputName"
|
||||
autocomplete
|
||||
></tiny-tree-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
|
||||
const treeOp = ref({
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<tiny-tree-select
|
||||
v-model="value"
|
||||
:tree-op="treeOp"
|
||||
placeholder="请选择一个选项"
|
||||
name="inputName"
|
||||
autocomplete
|
||||
></tiny-tree-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTreeSelect: TreeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
treeOp: {
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1：不挂载在 body 元素上</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" :popper-append-to-body="false"></tiny-tree-select>
|
||||
<p>场景2：自定义类名，修改阴影样式</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" popper-class="drop"></tiny-tree-select>
|
||||
<p>场景3：从上方弹出面板</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" placement="top"></tiny-tree-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
|
||||
const treeOp = ref({
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.drop {
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1：不挂载在 body 元素上</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" :popper-append-to-body="false"></tiny-tree-select>
|
||||
<p>场景2：自定义类名，修改阴影样式</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" popper-class="drop"></tiny-tree-select>
|
||||
<p>场景3：从上方弹出面板</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" placement="top"></tiny-tree-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTreeSelect: TreeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
treeOp: {
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.drop {
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1：自定义图标 + 自定义样式</p>
|
||||
<tiny-tree-select
|
||||
v-model="value"
|
||||
:tree-op="treeOp"
|
||||
:dropdown-icon="tinyIconPopup"
|
||||
:drop-style="{ width: '200px', 'min-width': '200px' }"
|
||||
>
|
||||
</tiny-tree-select>
|
||||
<p>场景2：标签类型</p>
|
||||
<tiny-tree-select v-model="value2" :tree-op="treeOp" multiple tag-type="warning"></tiny-tree-select>
|
||||
<p>场景3：下划线类型</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" input-box-type="underline"></tiny-tree-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
|
||||
import { iconPopup } from '@opentiny/vue-icon'
|
||||
|
||||
const tinyIconPopup = iconPopup()
|
||||
const value = ref('')
|
||||
const value2 = ref([])
|
||||
|
||||
const treeOp = ref({
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1：自定义图标 + 自定义样式</p>
|
||||
<tiny-tree-select
|
||||
v-model="value"
|
||||
:tree-op="treeOp"
|
||||
:dropdown-icon="tinyIconPopup"
|
||||
:drop-style="{ width: '200px', 'min-width': '200px' }"
|
||||
>
|
||||
</tiny-tree-select>
|
||||
<p>场景2：标签类型</p>
|
||||
<tiny-tree-select v-model="value2" :tree-op="treeOp" multiple tag-type="warning"></tiny-tree-select>
|
||||
<p>场景3：下划线类型</p>
|
||||
<tiny-tree-select v-model="value" :tree-op="treeOp" input-box-type="underline"></tiny-tree-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect } from '@opentiny/vue'
|
||||
import { iconPopup } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTreeSelect: TreeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tinyIconPopup: iconPopup(),
|
||||
value: '',
|
||||
value2: [],
|
||||
treeOp: {
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>medium</p>
|
||||
<tiny-tree-select v-model="value" size="medium" multiple :tree-op="treeOp"></tiny-tree-select>
|
||||
<p>small</p>
|
||||
<tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
|
||||
<p>默认</p>
|
||||
<tiny-tree-select v-model="value" multiple :tree-op="treeOp"></tiny-tree-select>
|
||||
<p>mini</p>
|
||||
<tiny-tree-select v-model="value" size="mini" multiple :tree-op="treeOp"> </tiny-tree-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
|
||||
|
||||
const value = ref([])
|
||||
|
||||
const treeOp = ref({
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>medium</p>
|
||||
<tiny-tree-select v-model="value" size="medium" multiple :tree-op="treeOp"></tiny-tree-select>
|
||||
<p>small</p>
|
||||
<tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
|
||||
<p>默认</p>
|
||||
<tiny-tree-select v-model="value" multiple :tree-op="treeOp"></tiny-tree-select>
|
||||
<p>mini</p>
|
||||
<tiny-tree-select v-model="value" size="mini" multiple :tree-op="treeOp"> </tiny-tree-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTreeSelect: TreeSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [],
|
||||
treeOp: {
|
||||
data: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一级 1',
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
label: '二级 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 9,
|
||||
label: '三级 1-1-1'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '三级 1-1-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '一级 2',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '二级 2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tree-select {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
metaData: {
|
||||
experimental: '3.17.0'
|
||||
},
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
|
|
@ -13,6 +16,127 @@ export default {
|
|||
'en-US': ''
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'multiple',
|
||||
name: {
|
||||
'zh-CN': '多选',
|
||||
'en-US': 'Multiple'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组，默认选中值会以标签形式展示。<br>`,
|
||||
'en-US': `Use the <code>multiple</code> attribute to enable the multi-selection function. In this case, the value of <code>v-model</code> is an array of selected values. By default, the selected value is displayed as a tag.<br>`
|
||||
},
|
||||
codeFiles: ['multiple.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'collapse-tags',
|
||||
name: {
|
||||
'zh-CN': '折叠标签',
|
||||
'en-US': 'Collapse tags'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签, <code>hover</code> 时展示所有标签。标签内容超长时超出省略，<code>hover</code> 标签时展示 <code>tooltip</code> 。</p>\n',
|
||||
'en-US':
|
||||
'<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags are displayed in a thumbnail. By setting <code>hover-expand</code> to <code>true</code> , the tags are collapsed by default, and all tags are displayed when hovering. If the content of the tag is too long, it should be omitted. When hovering the tag, a <code>tooltip</code> should be displayed</p>'
|
||||
},
|
||||
codeFiles: ['collapse-tags.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'size',
|
||||
name: {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'Size'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>size</code> 属性设置输入框尺寸，可选值：medium / small / mini 。</p>',
|
||||
'en-US':
|
||||
'<p>Set the input box size through the <code>size</code> attribute, with optional values of medium / small / mini.</p>'
|
||||
},
|
||||
codeFiles: ['size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'disabled',
|
||||
name: {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'Disabled'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>disabled</code> 属性设置禁用状态。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the disabled status of the dropdown or dropdown item through the <code>disabled</code> attribute. </p>\n'
|
||||
},
|
||||
codeFiles: ['disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'map-field',
|
||||
name: {
|
||||
'zh-CN': '映射字段',
|
||||
'en-US': 'Map Fields'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '通过 <code>text-field</code> 设置显示文本字段，<code>value-field</code>设置绑定值字段。',
|
||||
'en-US':
|
||||
'<p>Set the display text field by <code>text-field</code>, and set the binding value field by <code>value-field</code>. </p>\n'
|
||||
},
|
||||
codeFiles: ['map-field.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'reference-style',
|
||||
name: {
|
||||
'zh-CN': '触发源样式',
|
||||
'en-US': 'Reference type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>dropdown-icon</code> 属性可自定义下拉图标，<code>drop-style</code> 属性可自定义下拉选项样式，<code>tag-type</code> 属性设置标签类型（同 Tag 组件的 type 属性），<code>input-box-type</code> 属性设置输入框类型。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the label type through the <code>tag-type</code> attribute, which is the same as the type attribute of the Tag component. Optional values: success/info/warning/danger.</p>\n'
|
||||
},
|
||||
codeFiles: ['reference-style.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'panel-style',
|
||||
name: {
|
||||
'zh-CN': '下拉面板样式',
|
||||
'en-US': 'Panel style'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>popper-append-to-body</code> 设置是否将弹框 dom 元素插入至 body 元素，默认为 true，<code>popper-class</code> 属性设置下拉弹框的类名，可自定义样式，<code>placement</code>设置弹出位置。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can customize the style by setting the class name of the dropdown pop-up box through the <code>popper-class</code> attribute <code>placement</code> set the pop-up position <code>popper-append-to-body</code> set whether to insert the pop-up dom element into the body element, default to true. </p>\n'
|
||||
},
|
||||
codeFiles: ['panel-style.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'copy',
|
||||
name: {
|
||||
'zh-CN': '可复制',
|
||||
'en-US': 'Copyable'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>copyable</code> 设置启用一键复制所有标签的文本内容并以逗号分隔，<code>text-split</code> 自定义复制文本的分隔符。</p>\n',
|
||||
'en-US':
|
||||
'<p>When setting radio searchable through the <code>allow-copy</code> attribute, the mouse can slide to select and copy the content of the input box. </p>\n'
|
||||
},
|
||||
codeFiles: ['copy.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'native-properties',
|
||||
name: {
|
||||
'zh-CN': '原生属性',
|
||||
'en-US': 'Native properties'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>name</code> / <code>placeholder</code> / <code>autocomplete</code> 属性设置下拉组件内置 Input 的原生属性。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the native properties of the built-in Input in the dropdown component through the <code>name</code> / <code>placeholder</code> / <code>autocomplete</code> attribute settings.</p>\n'
|
||||
},
|
||||
codeFiles: ['native-properties.vue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const nodeClick =
|
|||
}
|
||||
|
||||
export const check =
|
||||
({ props }) =>
|
||||
({ props, vm }) =>
|
||||
(data, { checkedNodes }) => {
|
||||
if (props.multiple) {
|
||||
vm.$refs.baseSelectRef.updateSelectedData(
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const renderless = (props, { reactive }, { vm }) => {
|
|||
state,
|
||||
filter: filter({ vm }),
|
||||
nodeClick: nodeClick({ props, vm }),
|
||||
check: check({ props })
|
||||
check: check({ props, vm })
|
||||
})
|
||||
|
||||
return api
|
||||
|
|
|
|||
Loading…
Reference in New Issue