70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<script>
|
|
import Basic from './basic'
|
|
import ChangeOnSelect from './change-on-select'
|
|
import CustomRender from './custom-render'
|
|
import CustomTrigger from './custom-trigger'
|
|
import DefaultValue from './default-value'
|
|
import DisabledOption from './disabled-option'
|
|
import Hover from './hover'
|
|
import Lazy from './lazy'
|
|
import Search from './search'
|
|
import Size from './size'
|
|
import FieldsName from './fields-name'
|
|
import Suffix from './suffix'
|
|
|
|
import CN from '../index.zh-CN.md'
|
|
import US from '../index.en-US.md'
|
|
const md = {
|
|
cn: `# Cascader 级联选择
|
|
级联选择框。
|
|
## 何时使用
|
|
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
|
|
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
|
|
- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
|
|
## 代码演示`,
|
|
us: `# Cascader
|
|
Cascade selection box.
|
|
## When To Use
|
|
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
|
|
- When selecting from a large data set, with multi-stage classification separated for easy selection.
|
|
- Chooses cascade items in one float layer for better user experience.
|
|
## Examples
|
|
`,
|
|
}
|
|
export default {
|
|
category: 'Components',
|
|
type: 'Data Entry',
|
|
zhType: '数据录入',
|
|
title: 'Cascader',
|
|
subtitle: '级联选择',
|
|
render () {
|
|
return (
|
|
<div id='components-cascader-demo'>
|
|
<md cn={md.cn} us={md.us}/>
|
|
<Basic />
|
|
<ChangeOnSelect/>
|
|
<CustomRender/>
|
|
<CustomTrigger/>
|
|
<DefaultValue/>
|
|
<DisabledOption/>
|
|
<Hover/>
|
|
<Lazy/>
|
|
<Search/>
|
|
<Size/>
|
|
<FieldsName />
|
|
<Suffix />
|
|
<api>
|
|
<CN slot='cn' />
|
|
<US/>
|
|
</api>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
#components-cascader-demo .ant-cascader-picker {
|
|
width: 300px;
|
|
}
|
|
</style>
|