From 5aacd6ca1ba5688241043c121567810a298313bd Mon Sep 17 00:00:00 2001 From: rex Date: Tue, 18 Dec 2018 16:36:10 +0800 Subject: [PATCH] =?UTF-8?q?[new=20feature]=20TreeSelect:=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=A0=B7=E5=BC=8F=E3=80=81=E6=94=AF=E6=8C=81=E5=B7=A6?= =?UTF-8?q?=E4=BE=A7=E7=A6=81=E7=94=A8=E3=80=81=E5=A2=9E=E5=8A=A0=E5=A4=96?= =?UTF-8?q?=E9=83=A8=E6=A0=B7=E5=BC=8F=E7=B1=BB=20(#1084)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/pages/tree-select/config.js | 8 +++++ example/pages/tree-select/index.js | 4 +++ example/pages/tree-select/index.wxml | 1 + example/pages/tree-select/index.wxss | 2 +- packages/tree-select/README.md | 13 +++++++ packages/tree-select/index.json | 3 +- packages/tree-select/index.less | 53 ++++++++++++++++++---------- packages/tree-select/index.ts | 17 +++++++-- packages/tree-select/index.wxml | 9 +++-- packages/wxs/memoize.wxs | 8 +++-- 10 files changed, 89 insertions(+), 29 deletions(-) diff --git a/example/pages/tree-select/config.js b/example/pages/tree-select/config.js index 6e1e80ab..7ea405b4 100644 --- a/example/pages/tree-select/config.js +++ b/example/pages/tree-select/config.js @@ -27,5 +27,13 @@ export default { }, { text: '苏州', id: 8 + }], + pro3Name: '福建', + pro3: [{ + text: '泉州', + id: 9 + }, { + text: '厦门', + id: 10 }] }; diff --git a/example/pages/tree-select/index.js b/example/pages/tree-select/index.js index e4d8e547..4b0e49ca 100644 --- a/example/pages/tree-select/index.js +++ b/example/pages/tree-select/index.js @@ -17,6 +17,10 @@ Page({ }, { text: config.pro2Name, children: config.pro2 + }, { + text: config.pro3Name, + disabled: true, + children: config.pro3 } ], mainActiveIndex: 0, diff --git a/example/pages/tree-select/index.wxml b/example/pages/tree-select/index.wxml index d1754047..ab6cb2fc 100644 --- a/example/pages/tree-select/index.wxml +++ b/example/pages/tree-select/index.wxml @@ -5,5 +5,6 @@ active-id="{{ activeId }}" bind:click-item="onClickItem" bind:click-nav="onClickNav" + content-item-class="content-item-class" > diff --git a/example/pages/tree-select/index.wxss b/example/pages/tree-select/index.wxss index a05c6e76..d57997ae 100644 --- a/example/pages/tree-select/index.wxss +++ b/example/pages/tree-select/index.wxss @@ -1 +1 @@ -/* pages/tree-select/index.wxss */ \ No newline at end of file +/* pages/tree-select/index.wxss */ diff --git a/packages/tree-select/README.md b/packages/tree-select/README.md index 0cb329bf..13b3e344 100644 --- a/packages/tree-select/README.md +++ b/packages/tree-select/README.md @@ -67,6 +67,8 @@ Page({ { // 导航名称 text: '所有城市', + // 禁用选项 + disabled: false, // 该导航下所有的可选项 children: [ { @@ -86,6 +88,17 @@ Page({ ] ``` +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| main-item-class | 左侧选项样式类 | +| content-item-class | 右侧选项样式类 | +| main-active-class | 左侧选项选中样式类 | +| content-active-class | 右侧选项选中样式类 | +| main-disabled-class | 左侧选项禁用样式类 | +| content-disabled-class | 右侧选项禁用样式类 | + ### 更新日志 | 版本 | 类型 | 内容 | diff --git a/packages/tree-select/index.json b/packages/tree-select/index.json index 0a336c08..d2a8d90e 100644 --- a/packages/tree-select/index.json +++ b/packages/tree-select/index.json @@ -1,6 +1,7 @@ { "component": true, "usingComponents": { - "van-icon": "../icon/index" + "van-icon": "../icon/index", + "van-cell": "../cell/index" } } diff --git a/packages/tree-select/index.less b/packages/tree-select/index.less index 236798cb..b34ac270 100644 --- a/packages/tree-select/index.less +++ b/packages/tree-select/index.less @@ -1,46 +1,62 @@ @import '../common/style/var.less'; .van-tree-select { - user-select: none; position: relative; - font-size: 16px; + font-size: 14px; + user-select: none; &__nav { - width: 35%; position: absolute; - left: 0; top: 0; bottom: 0; - background-color: @white; + left: 0; + width: 35%; + min-width: 120px; + background-color: @background-color-light; } &__nitem { + position: relative; + padding: 0 9px 0 15px; line-height: 44px; - padding: 0 15px; - background-color: @white; - &:active, - &--active { - background-color: @background-color; + &:active::after, + &--active::after { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 3.6px; + background-color: @red; + content: ''; } &--active { - font-weight: 500; + font-weight: bold; + background-color: @white; + } + + &--disabled { + color: @gray-dark; + } + + &--disabled:active::after { + display: none; } } &__content { width: 65%; - padding: 0 15px; + padding-left: 15px; margin-left: 35%; + background-color: @white; box-sizing: border-box; } &__item { position: relative; + font-weight: bold; line-height: 44px; - padding-left: 5px; - padding-right: 18px; &:active, &--active { @@ -49,16 +65,17 @@ &--disabled, &--disabled:active { - color: @gray; + color: @gray-dark; } } &__selected { - float: right; position: absolute; - right: 0; top: 0; + right: 15px; bottom: 0; - line-height: inherit; + height: 24px; + margin: auto 0; + line-height: 24px; } } diff --git a/packages/tree-select/index.ts b/packages/tree-select/index.ts index 7f186b63..8b5c97f1 100644 --- a/packages/tree-select/index.ts +++ b/packages/tree-select/index.ts @@ -3,6 +3,15 @@ import { VantComponent } from '../common/component'; const ITEM_HEIGHT = 44; VantComponent({ + classes: [ + 'main-item-class', + 'content-item-class', + 'main-active-class', + 'content-active-class', + 'main-disabled-class', + 'content-disabled-class' + ], + props: { items: Array, mainActiveIndex: { @@ -10,8 +19,7 @@ VantComponent({ value: 0 }, activeId: { - type: Number, - value: 0 + type: [Number, String] }, maxHeight: { type: Number, @@ -51,7 +59,10 @@ VantComponent({ // 当一个导航被点击时 onClickNav(event: Weapp.Event) { const { index } = event.currentTarget.dataset; - this.$emit('click-nav', { index }); + const item = this.data.items[index]; + if (!item.disabled) { + this.$emit('click-nav', { index }); + } }, // 更新子项列表 diff --git a/packages/tree-select/index.wxml b/packages/tree-select/index.wxml index 8260da0b..124d5d6a 100644 --- a/packages/tree-select/index.wxml +++ b/packages/tree-select/index.wxml @@ -1,3 +1,5 @@ + + @@ -21,14 +23,15 @@ {{ item.text }} diff --git a/packages/wxs/memoize.wxs b/packages/wxs/memoize.wxs index 3e624274..261ae67d 100644 --- a/packages/wxs/memoize.wxs +++ b/packages/wxs/memoize.wxs @@ -31,8 +31,11 @@ function serializer(args) { if (args.length === 1 && isPrimitive(args[0])) { return args[0]; } - - return JSON.stringify(args.length === 1 ? args[0] : args); + var obj = {}; + for (var i = 0; i < args.length; i++) { + obj['key' + i] = args[i]; + } + return JSON.stringify(obj); } function memoize(fn) { @@ -40,7 +43,6 @@ function memoize(fn) { return function() { var key = serializer(arguments); - if (cache[key] === undefined) { cache[key] = call(fn, arguments); }