diff --git a/docs/markdown/design.zh-CN.md b/docs/markdown/design.zh-CN.md index 86392d083..40bb7b242 100644 --- a/docs/markdown/design.zh-CN.md +++ b/docs/markdown/design.zh-CN.md @@ -12,6 +12,8 @@ 下载 +> 提示:目前 Sketch 中部分组件仍为旧版样式,我们正在梳理新版设计规范,尽请期待! + ### 图标 包含 Sketch 格式的图标库资源。 diff --git a/src/dropdown-item/index.js b/src/dropdown-item/index.js index d8a31a9ef..53c122c8b 100644 --- a/src/dropdown-item/index.js +++ b/src/dropdown-item/index.js @@ -40,6 +40,14 @@ export default createComponent({ } }, + beforeCreate() { + const createEmitter = eventName => () => this.$emit(eventName); + + this.onOpen = createEmitter('open'); + this.onClose = createEmitter('close'); + this.onOpened = createEmitter('opened'); + }, + methods: { toggle(show = !this.showPopup, options = {}) { if (show === this.showPopup) { @@ -53,17 +61,16 @@ export default createComponent({ this.parent.updateOffset(); this.showWrapper = true; } + }, + + onClickWrapper(event) { + // prevent being identified as clicking outside and closed when use get-contaienr + if (this.getContainer) { + event.stopPropagation(); + } } }, - beforeCreate() { - const createEmitter = eventName => () => this.$emit(eventName); - - this.onOpen = createEmitter('open'); - this.onClose = createEmitter('close'); - this.onOpened = createEmitter('opened'); - }, - render() { const { zIndex, @@ -113,6 +120,7 @@ export default createComponent({ ref="wrapper" style={style} class={bem([direction])} + onClick={this.onClickWrapper} > - + @@ -69,10 +66,7 @@ :placeholder="$t('smsPlaceholder')" > diff --git a/src/field/index.js b/src/field/index.js index 91e73d955..1be8541d3 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -18,8 +18,9 @@ export default createComponent({ leftIcon: String, rightIcon: String, clearable: Boolean, - labelClass: null, + maxlength: [Number, String], labelWidth: [Number, String], + labelClass: null, labelAlign: String, inputAlign: String, errorMessage: String, @@ -101,9 +102,9 @@ export default createComponent({ } let { value } = target; - const { maxlength } = this.$attrs; + const { maxlength } = this; - if (this.type === 'number' && isDef(maxlength) && value.length > maxlength) { + if (isDef(maxlength) && value.length > maxlength) { value = value.slice(0, maxlength); target.value = value; } @@ -264,10 +265,10 @@ export default createComponent({ }, genWordLimit() { - if (this.showWordLimit && this.$attrs.maxlength) { + if (this.showWordLimit && this.maxlength) { return (
- {this.value.length}/{this.$attrs.maxlength} + {this.value.length}/{this.maxlength}
); } diff --git a/src/tab/README.md b/src/tab/README.md index aa695859e..d03191d8d 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -200,6 +200,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content |------|------|------|------|------| | name | Identifier | *string \| number* | Index of tab | - | | title | Title | *string* | - | - | +| title-style | Custom title style | *any* | - | 2.2.14 | | disabled | Whether to disable tab | *boolean* | `false` | - | | url | Link | *string* | - | 2.2.1 | | to | Target route of the link, same as to of vue-router | *string \| object* | - | 2.2.1 | diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 97f1dd0e8..93e81a8c6 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -204,6 +204,7 @@ export default { |------|------|------|------|------| | name | 标签名称,作为匹配的标识符 | *string \| number* | 标签的索引值 | 2.0.6 | | title | 标题 | *string* | - | - | +| title-style | 自定义标题样式 | *any* | - | 2.2.14 | | disabled | 是否禁用标签 | *boolean* | `false` | - | | url | 点击后跳转的链接地址 | *string* | - | 2.2.1 | | to | 点击后跳转的目标路由对象,同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | 2.2.1 | diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue index faeb58930..9bd3c8d3c 100644 --- a/src/tab/demo/index.vue +++ b/src/tab/demo/index.vue @@ -2,11 +2,7 @@ - + {{ $t('content') }} {{ index }} @@ -14,22 +10,13 @@ - + {{ $t('content') }} 1 - + {{ $t('content') }} 2 - + {{ $t('content') }} 3 @@ -37,11 +24,7 @@ - + {{ $t('content') }} {{ index }} @@ -62,11 +45,7 @@ - + {{ $t('content') }} {{ index }} @@ -74,26 +53,15 @@ - + {{ $t('content') }} {{ index }} - - + + {{ $t('content') }} {{ index }} @@ -101,10 +69,7 @@ - + @@ -115,26 +80,15 @@ - + {{ $t('content') }} {{ index }} - - + + {{ $t('content') }} {{ index }} diff --git a/src/tab/index.js b/src/tab/index.js index 15996025d..94426e12a 100644 --- a/src/tab/index.js +++ b/src/tab/index.js @@ -11,6 +11,7 @@ export default createComponent({ ...routeProps, name: [Number, String], title: String, + titleStyle: null, disabled: Boolean }, diff --git a/src/tab/test/index.spec.js b/src/tab/test/index.spec.js index 978918526..55f8f408c 100644 --- a/src/tab/test/index.spec.js +++ b/src/tab/test/index.spec.js @@ -227,3 +227,15 @@ test('set name to zero', async () => { tabs.at(1).trigger('click'); expect(onClick).toHaveBeenCalledWith(0, 'title2'); }); + +test('title-style prop', () => { + const wrapper = mount({ + template: ` + + Text + + ` + }); + + expect(wrapper.find('.van-tab').element.style.color).toEqual('red'); +}); diff --git a/src/tabs/index.js b/src/tabs/index.js index bf837cf5c..346743173 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -266,6 +266,7 @@ export default createComponent({ type={type} title={item.title} color={this.color} + style={item.titleStyle} isActive={index === this.currentIndex} ellipsis={ellipsis} disabled={item.disabled}