mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Cascader): basic dom struct
This commit is contained in:
chenjiahan
neverland
parent
8180478213
commit
0352f5d9a6
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
级联选择框，用于多层级数据的选择，典型场景为省市区选择，2.9 版本开始支持此组件。
|
||||
级联选择框，用于多层级数据的选择，典型场景为省市区选择，2.12 版本开始支持此组件。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -18,7 +18,9 @@ Vue.use(Cascader);
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-cascader />
|
||||
<van-popup v-model="show" round position="bottom">
|
||||
<van-cascader title="请选择地区" />
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -35,15 +37,14 @@ export default {
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | -------------------- | --------------------- | --------- |
|
||||
| show.sync | 是否显示级联选择弹窗 | _boolean_ | `false` |
|
||||
| title | 顶部标题 | _string_ | - |
|
||||
| value | 选中项的值 | `string[] | number[]` | - |
|
||||
| options | 可选项数据源 | _Option[]_ | `[]` |
|
||||
| placeholder | 未选中时的提示文案 | _string_ | `请选择` |
|
||||
| confirm-text | 确认按钮文字 | _string_ | `确认` |
|
||||
| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | ------------------ | ---------------------- | --------- |
|
||||
| title | 顶部标题 | _string_ | - |
|
||||
| value | 选中项的值 | _string[] \| number[]_ | - |
|
||||
| options | 可选项数据源 | _Option[]_ | `[]` |
|
||||
| placeholder | 未选中时的提示文案 | _string_ | `请选择` |
|
||||
| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` |
|
||||
| closeable | 是否显示关闭图标 | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
@ -54,7 +55,6 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------------ | -------------- |
|
||||
| title | 自定义顶部标题 |
|
||||
| confirm-text | 自定义确认按钮 |
|
||||
| 名称 | 说明 |
|
||||
| ----- | -------------- |
|
||||
| title | 自定义顶部标题 |
|
||||
|
||||
122
src/cascader/demo/area.js
Normal file
122
src/cascader/demo/area.js
Normal file
@ -0,0 +1,122 @@
|
||||
export default [
|
||||
{
|
||||
text: '浙江省',
|
||||
value: '330000',
|
||||
children: [
|
||||
{
|
||||
text: '杭州市',
|
||||
value: '330100',
|
||||
children: [
|
||||
{
|
||||
text: '上城区',
|
||||
value: '330102',
|
||||
},
|
||||
{
|
||||
text: '下城区',
|
||||
value: '330103',
|
||||
},
|
||||
{
|
||||
text: '江干区',
|
||||
value: '330104',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '宁波市',
|
||||
value: '330200',
|
||||
children: [
|
||||
{
|
||||
text: '海曙区',
|
||||
value: '330203',
|
||||
},
|
||||
{
|
||||
text: '江北区',
|
||||
value: '330205',
|
||||
},
|
||||
{
|
||||
text: '北仑区',
|
||||
value: '330206',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '温州市',
|
||||
value: '330300',
|
||||
children: [
|
||||
{
|
||||
text: '鹿城区',
|
||||
value: '330302',
|
||||
},
|
||||
{
|
||||
text: '龙湾区',
|
||||
value: '330303',
|
||||
},
|
||||
{
|
||||
text: '瓯海区',
|
||||
value: '330304',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '江苏省',
|
||||
value: '320000',
|
||||
children: [
|
||||
{
|
||||
text: '南京市',
|
||||
value: '320100',
|
||||
children: [
|
||||
{
|
||||
text: '玄武区',
|
||||
value: '320102',
|
||||
},
|
||||
{
|
||||
text: '秦淮区',
|
||||
value: '320104',
|
||||
},
|
||||
{
|
||||
text: '建邺区',
|
||||
value: '320105',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '无锡市',
|
||||
value: '320200',
|
||||
children: [
|
||||
{
|
||||
text: '锡山区',
|
||||
value: '320205',
|
||||
},
|
||||
{
|
||||
text: '惠山区',
|
||||
value: '320206',
|
||||
},
|
||||
{
|
||||
text: '滨湖区',
|
||||
value: '320211',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '徐州市',
|
||||
value: '320300',
|
||||
children: [
|
||||
{
|
||||
text: '鼓楼区',
|
||||
value: '320302',
|
||||
},
|
||||
{
|
||||
text: '云龙区',
|
||||
value: '320303',
|
||||
},
|
||||
{
|
||||
text: '贾汪区',
|
||||
value: '320305',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-field
|
||||
is-link
|
||||
readonly
|
||||
@ -8,17 +8,22 @@
|
||||
:placeholder="t('selectArea')"
|
||||
@click="showBase = true"
|
||||
/>
|
||||
<van-cascader :show.sync="showBase" :title="t('selectArea')" />
|
||||
<van-popup v-model="showBase" round position="bottom">
|
||||
<van-cascader :title="t('selectArea')" :options="t('options')" />
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zhCNOptions from './area';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
area: '地区',
|
||||
selectArea: '请选择地区',
|
||||
options: zhCNOptions,
|
||||
},
|
||||
'en-US': {
|
||||
area: 'Area',
|
||||
|
||||
@ -1,55 +1,92 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import Popup from '../popup';
|
||||
import Tab from '../tab';
|
||||
import Tabs from '../tabs';
|
||||
|
||||
const [createComponent, bem] = createNamespace('cascader');
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
show: Boolean,
|
||||
value: Array,
|
||||
title: String,
|
||||
options: Array,
|
||||
placeholder: String,
|
||||
confirmText: String,
|
||||
activeColor: String,
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tabs: [],
|
||||
activeTab: 0,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
options() {
|
||||
// reset options and tab
|
||||
},
|
||||
|
||||
value() {
|
||||
// reset options and tab
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle(val) {
|
||||
this.$emit('update:show', val);
|
||||
},
|
||||
|
||||
confirm() {
|
||||
this.toggle(false);
|
||||
init() {
|
||||
if (this.value) {
|
||||
//
|
||||
} else {
|
||||
this.tabs = [
|
||||
{
|
||||
title: this.placeholder || this.t('placeholder'),
|
||||
options: this.options,
|
||||
},
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
genHeader() {
|
||||
const confirmText = this.confirmText || this.t('confirm');
|
||||
return (
|
||||
<div class={bem('header')}>
|
||||
<h2 class={bem('title')}>{this.slots('title') || this.title}</h2>
|
||||
<button type="button" class={bem('confirm')} onClick={this.confirm}>
|
||||
{this.slots('confirm-text') || confirmText}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
genTab() {},
|
||||
genTabs() {
|
||||
return (
|
||||
<Tabs class={bem('tabs')}>
|
||||
{this.tabs.map((item) => (
|
||||
<Tab title={item.title}>{this.genOptions(item.options)}</Tab>
|
||||
))}
|
||||
</Tabs>
|
||||
);
|
||||
},
|
||||
|
||||
genOptions(options) {
|
||||
return (
|
||||
<ul class={bem('options')}>
|
||||
{options.map((option) => (
|
||||
<li class={bem('option')}>{option.text}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Popup
|
||||
round
|
||||
value={this.show}
|
||||
class={bem()}
|
||||
position="bottom"
|
||||
onInput={this.toggle}
|
||||
>
|
||||
<div class={bem()}>
|
||||
{this.genHeader()}
|
||||
{this.genTab()}
|
||||
</Popup>
|
||||
{this.genTabs()}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@ -10,24 +10,40 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @cascader-title-font-size;
|
||||
font-weight: @font-weight-bold;
|
||||
font-size: @cascader-title-font-size;
|
||||
line-height: @cascader-title-line-height;
|
||||
}
|
||||
|
||||
&__confirm {
|
||||
height: 100%;
|
||||
// expand click area
|
||||
padding: 0 @padding-md;
|
||||
margin-right: -@padding-md;
|
||||
color: @cascader-confirm-color;
|
||||
font-size: @cascader-confirm-font-size;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
&__tabs {
|
||||
.van-tab {
|
||||
flex: none;
|
||||
padding: 0 10px;
|
||||
|
||||
&:active {
|
||||
opacity: @active-opacity;
|
||||
&--active {
|
||||
color: #969799;
|
||||
}
|
||||
}
|
||||
|
||||
&.van-tabs--line .van-tabs__wrap {
|
||||
height: 48px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&__option {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
&:active {
|
||||
background-color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__options {
|
||||
box-sizing: border-box;
|
||||
height: 384px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,9 @@ export default {
|
||||
monthTitle: (year: number, month: number) => `${year}年${month}月`,
|
||||
rangePrompt: (maxRange: number) => `选择天数不能超过 ${maxRange} 天`,
|
||||
},
|
||||
vanCascader: {
|
||||
placeholder: '请选择',
|
||||
},
|
||||
vanContactCard: {
|
||||
addText: '添加联系人',
|
||||
},
|
||||
|
||||
@ -205,8 +205,6 @@
|
||||
@cascader-header-height: 48px;
|
||||
@cascader-title-font-size: @font-size-lg;
|
||||
@cascader-title-line-height: 20px;
|
||||
@cascader-confirm-color: @text-link-color;
|
||||
@cascader-confirm-font-size: @font-size-md;
|
||||
|
||||
// Cell
|
||||
@cell-font-size: @font-size-md;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user