From 66f11813082ddd75ef1fae3e68d9945240f894da Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 7 Jul 2022 23:29:24 +0800 Subject: [PATCH 1/2] fix(tag): complete components && update styles --- src/tag/_example/tag.less | 20 ++-- src/tag/_example/tag.ts | 17 +-- src/tag/_example/tag.wxml | 71 +++++++------ src/tag/check-tag.less | 141 +------------------------ src/tag/check-tag.ts | 51 ++++++++- src/tag/check-tag.wxml | 20 ++-- src/tag/check-tag.wxs | 30 ------ src/tag/common/base.less | 217 ++++++++++++++++++++++++++++++++++++++ src/tag/common/base.wxs | 18 ++++ src/tag/tag.less | 169 +---------------------------- src/tag/tag.ts | 40 ++++++- src/tag/tag.wxml | 20 ++-- src/tag/tag.wxs | 41 ------- 13 files changed, 397 insertions(+), 458 deletions(-) delete mode 100644 src/tag/check-tag.wxs create mode 100644 src/tag/common/base.less create mode 100644 src/tag/common/base.wxs delete mode 100644 src/tag/tag.wxs diff --git a/src/tag/_example/tag.less b/src/tag/_example/tag.less index d7548a348..b10189a20 100644 --- a/src/tag/_example/tag.less +++ b/src/tag/_example/tag.less @@ -1,7 +1,5 @@ .group { - min-height: 56px; - margin: 16px 0; - padding: 0 16px; + padding: 32rpx; background-color: #fff; display: flex; align-items: center; @@ -11,21 +9,15 @@ align-items: flex-start; } - .left { - width: 172px; + &.padding-bottom { + padding: 32rpx 32rpx 0; } - > view { - display: flex; - flex-direction: column; - padding-top: 16px; - - .t-tag { - margin-bottom: 17px; - } + &.margin { + margin: 16rpx 0; } .t-tag { - margin: 0 4px; + margin-right: 32rpx; } } diff --git a/src/tag/_example/tag.ts b/src/tag/_example/tag.ts index 7648103e6..e6a64cbfb 100644 --- a/src/tag/_example/tag.ts +++ b/src/tag/_example/tag.ts @@ -1,17 +1,17 @@ Page({ data: { - show: true, + show: [true, true], items: [ { - name: '已点击', + name: '选中', checked: true, }, { - name: '未点击', + name: '未选中', checked: false, }, { - name: '不可点击', + name: '不可选', checked: false, disabled: true, }, @@ -20,9 +20,14 @@ Page({ handleCheckTagChange(e) { console.log(e.detail.checked); }, - handleClose() { + handleClose0() { this.setData({ - show: false, + [`show[0]`]: false, + }); + }, + handleClose1() { + this.setData({ + [`show[1]`]: false, }); }, }); diff --git a/src/tag/_example/tag.wxml b/src/tag/_example/tag.wxml index 437597f09..f9241dd5f 100644 --- a/src/tag/_example/tag.wxml +++ b/src/tag/_example/tag.wxml @@ -3,41 +3,54 @@ 用于表明主体的类目，属性或状态。 - - 重要 - 危险 - 警告 + + 默认 成功 - 信息 + 警告 + 危险 + 信息 - - 镂空标签 - 浅底标签 - 标签 + + 深色 + 浅色 + 描边 + 描边浅色 - - - 圆角标签 - 半圆角标签 + + + + + 标签 + + - - - 标签 + + + + 圆弧 + 半圆弧 - - + + + + 标签 + 标签 + + + + 超长省略文本标签超长省略文本标签 - + - + + + 展示标签30 + 展示标签24 + - - 展示标签30 - 展示标签24 - 展示标签22 - - - - 点击标签30 - 点击标签24 - + 点击标签30 + 点击标签24 diff --git a/src/tag/check-tag.less b/src/tag/check-tag.less index fe70dc260..b99690b13 100644 --- a/src/tag/check-tag.less +++ b/src/tag/check-tag.less @@ -1,140 +1 @@ -@import '../common/index.less'; - -@color-white: #fff; - -@tag-default-color: #444; -@tag-default-background-color: #f5f5f5; -@tag-default-border-color: #f5f5f5; - -@tag-disabled-color: #bbb; -@tag-disabled-background-color: #f5f5f5; -@tag-disabled-border-color: #f5f5f5; - -@tag-primary-color: @primary-color; - -@tag-checked-color: @primary-color; -@tag-checked-border-color: @primary-color; -@tag-checked-background-color: @primary-color; - -@tag-small-font-size: 20rpx; -@tag-medium-font-size: 24rpx; -@tag-large-font-size: 28rpx; - -@border-radius-square: 2px; -@border-radius-round: 4px; -@border-radius-circle: 999px; - -.@{prefix}-tag { - display: inline-flex; - align-items: center; - border: 2rpx solid transparent; - box-sizing: border-box; - border-radius: @border-radius-square; - padding: 0 24rpx; - font-size: 24rpx; - // max-width: 240rpx; - user-select: none; - - &__text { - word-wrap: normal; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - height: 48rpx; - line-height: 48rpx; - } - - &__content { - width: 100%; - } - - .@{prefix}__icon { - font-size: @tag-medium-font-size; - } - - &__icon-close { - display: flex; - align-items: center; - margin-left: 16rpx; - } - - &.@{prefix}-tag--size { - &-small { - height: 44rpx; - line-height: 40rpx; - padding: 0 16rpx; - font-size: @tag-small-font-size; - - .@{prefix}-icon { - font-size: @tag-small-font-size; - } - } - - &-medium { - height: 48rpx; - line-height: 44rpx; - padding: 0 24rpx; - font-size: @tag-medium-font-size; - - .@{prefix}-icon { - font-size: @tag-medium-font-size; - } - } - - &-large { - height: 60rpx; - line-height: 56rpx; - padding: 0 24rpx; - font-size: @tag-large-font-size; - - .@{prefix}-icon { - font-size: @tag-large-font-size; - } - } - } - - &.@{prefix}-tag--square { - border-radius: @border-radius-square; - } - - &.@{prefix}-tag--round { - border-radius: @border-radius-round; - } - - &.@{prefix}-tag--circle { - border-radius: @border-radius-circle; - } - - &.@{prefix}-tag--half-circle { - border-radius: 0 @border-radius-circle @border-radius-circle 0; - } - - &.@{prefix}-tag--checkable { - cursor: pointer; - color: @tag-default-color; - background-color: @tag-default-background-color; - border-color: @tag-default-border-color; - - &.@{prefix}-tag--checked { - color: @color-white; - background-color: @tag-primary-color; - border-color: @tag-primary-color; - } - - &.@{prefix}-tag--disabled { - cursor: not-allowed; - color: @tag-disabled-color; - background-color: @tag-disabled-background-color; - border-color: @tag-disabled-border-color; - } - } - - &.@{prefix}-tag--closable { - &.@{prefix}-tag--disabled { - cursor: not-allowed; - color: @tag-disabled-color; - background-color: @tag-disabled-background-color; - border-color: @tag-disabled-border-color; - } - } -} +@import './common/base.less'; diff --git a/src/tag/check-tag.ts b/src/tag/check-tag.ts index a48c558bf..73eb0ded7 100644 --- a/src/tag/check-tag.ts +++ b/src/tag/check-tag.ts @@ -1,6 +1,7 @@ import { wxComponent, SuperComponent } from '../common/src/index'; import config from '../common/config'; import props from './check-tag-props'; +import { classNames } from '../common/utils'; const { prefix } = config; const name = `${prefix}-tag`; @@ -8,8 +9,9 @@ const name = `${prefix}-tag`; @wxComponent() export default class CheckTag extends SuperComponent { data = { + prefix, classPrefix: name, - classBasePrefix: prefix, + className: '', }; properties = props; @@ -21,15 +23,56 @@ export default class CheckTag extends SuperComponent { }, ]; + options = { + multipleSlots: true, + }; + + lifetimes = { + attached() { + this.setClass(); + }, + }; + + observers = { + checked() { + this.setClass(); + }, + }; + methods = { - onClickClose(e: WechatMiniprogram.BaseEvent) { + setClass() { + const { prefix, classPrefix } = this.data; + const { size, shape, closable, disabled, checked, defaultChecked } = this.properties; + const isChecked = checked || defaultChecked; + const tagClass = [ + classPrefix, + `${classPrefix}--checkable`, + closable ? `${classPrefix}--closable ${prefix}-is-closable` : '', + disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '', + isChecked ? `${classPrefix}--checked ${prefix}-is-checked` : '', + `${classPrefix}--size-${size || 'medium'}`, + `${classPrefix}--shape-${shape || 'square'}`, + ]; + const className = classNames(tagClass); + this.setData({ + className, + }); + }, + + hangleClose(e: WechatMiniprogram.BaseEvent) { + if (this.data.disabled) return; + this.triggerEvent('close', e); }, handleChange() { if (this.data.disabled) return; - - this._trigger('change', { checked: !this.data.checked }); + const { checked, defaultChecked } = this.properties; + const isChecked = checked || defaultChecked; + this.setData({ + checked: !isChecked, + }); + this._trigger('change', { checked: !isChecked }); }, }; } diff --git a/src/tag/check-tag.wxml b/src/tag/check-tag.wxml index 36528afa0..e7d2a4ddb 100644 --- a/src/tag/check-tag.wxml +++ b/src/tag/check-tag.wxml @@ -1,11 +1,11 @@ - - - - - - + + + + + + + + + + diff --git a/src/tag/check-tag.wxs b/src/tag/check-tag.wxs deleted file mode 100644 index 0caf6230a..000000000 --- a/src/tag/check-tag.wxs +++ /dev/null @@ -1,30 +0,0 @@ -var getTagClass = function (props) { - var baseClass = props.classPrefix || ''; - var prefix = props.classBasePrefix || ''; - var size = props.size || 'medium'; - var shape = props.shape || 'square'; - var closable = props.closable || false; - var disabled = props.disabled || false; - var checked = props.checked || false; - var tagClass = [ - baseClass, - baseClass + '--checkable', - closable ? baseClass + '--closable ' + prefix + '-is-closable' : '', - disabled ? baseClass + '--disabled ' + prefix + '-is-disabled' : '', - checked ? baseClass + '--checked ' + prefix + '-is-checked' : '', - baseClass + '--size-' + size, - shape === 'shape' ? baseClass + '--square' : '', - shape === 'round' ? baseClass + '--round' : '', - shape === 'circle' ? baseClass + '--circle' : '', - ]; - return tagClass.join(' '); -}; -var getTagStyle = function (maxWidth) { - if (!maxWidth) { - return ''; - } - var width = typeof maxWidth === 'number' ? maxWidth + 'px' : maxWidth; - return 'maxWidth:' + width + ';'; -}; -module.exports.getTagClass = getTagClass; -module.exports.getTagStyle = getTagStyle; diff --git a/src/tag/common/base.less b/src/tag/common/base.less new file mode 100644 index 000000000..41a24b56d --- /dev/null +++ b/src/tag/common/base.less @@ -0,0 +1,217 @@ +@import '../../common/index.less'; + +@color-white: #fff; + +@tag-default-background-color: #e7e7e7; +@tag-default-border-color: #e7e7e7; + +@primary-color-disabled: #bbd3fb; + +@tag-default-color: rgba(231, 231, 231, 1); +@tag-primary-color: @primary-color; +@tag-success-color: @success-color; +@tag-warning-color: @warning-color; +@tag-danger-color: @error-color; + +@tag-default-font-color: rgba(0, 0, 0, 0.9); +@tag-primary-font-color: @color-white; +@tag-success-font-color: @color-white; +@tag-warning-font-color: @color-white; +@tag-danger-font-color: @color-white; + +@tag-disabled-color: rgba(0, 0, 0, 26%); +@tag-disabled-background-color: rgba(231, 231, 231, 1); +@tag-disabled-border-color: rgba(231, 231, 231, 1); + +@tag-checked-color: @primary-color; +@tag-checked-border-color: @primary-color; +@tag-checked-background-color: @primary-color; + +@tag-small-padding: @spacer * 0.75 - 1px; +@tag-medium-padding: @spacer - 1px; +@tag-large-padding: @spacer-1 - 1px; + +@tag-small-font-size: @font-size; +@tag-medium-font-size: @font-size-s; +@tag-large-font-size: @font-size-base; + +@tag-small-icon-size: @font-size * 1.2; +@tag-medium-icon-size: @font-size * 1.4; +@tag-large-icon-size: @font-size * 1.8; + +@tag-small-height: 22px; +@tag-medium-height: 24px; +@tag-large-height: 30px; + +@border-radius-square: 4px; +@border-radius-round: 999px; +@border-radius-mark: @border-radius-round; + +@themes: primary, success, warning, default, danger; + +.genVariant(@fontColorWeight; @borderColorWeight; @backgroundColorWeight) { + .for(@themes, @i: 1) when(@i =< length(@themes)) { + @theme: extract(@themes, @i); + @theme-color: 'tag-@{theme}-color'; + @theme-font-color: 'tag-@{theme}-font-color'; + + &.@{prefix}-tag--theme-@{theme} { + background-color: mix(@@theme-color, @@theme-font-color, @backgroundColorWeight); + border-color: mix(@@theme-color, @@theme-font-color, @borderColorWeight); + color: mix(@@theme-color, @@theme-font-color, @fontColorWeight); + } + + .for(@themes, (@i + 1)); + } + + .for(@themes); +} + +.@{prefix}-tag { + display: flex; + align-items: center; + border: 2rpx solid transparent; + box-sizing: border-box; + border-radius: @border-radius-square; + font-size: @tag-medium-font-size; + user-select: none; + + &__text { + word-wrap: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + height: @tag-medium-height; + line-height: @tag-medium-height; + } + + &__icon, + &__icon-close { + display: flex; + align-items: center; + } + + &__icon:not(:empty) + &__text:not(:empty), + &__text:not(:empty) + &__icon-close:not(:empty) { + margin-left: (@spacer / 2); + } + + &.@{prefix}-tag--size { + &-small { + height: @tag-small-height; + line-height: @tag-small-height - 2px; + padding: 0 @tag-small-padding; + font-size: @tag-small-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-small-icon-size; + } + } + + &-medium { + height: @tag-medium-height; + line-height: @tag-medium-height - 2px; + padding: 0 @tag-medium-padding; + font-size: @tag-medium-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-medium-icon-size; + } + } + + &-large { + height: @tag-large-height; + line-height: @tag-large-height - 2px; + padding: 0 @tag-large-padding; + font-size: @tag-large-font-size; + + .@{prefix}-icon, + .@{prefix}-icon-close { + font-size: @tag-large-icon-size; + } + } + } + + &.@{prefix}-tag--shape { + &-square { + border-radius: @border-radius-square; + } + + &-round { + border-radius: @border-radius-round; + } + + &-mark { + border-radius: 0 @border-radius-mark @border-radius-mark 0; + } + } + + &--variant { + &-dark { + .genVariant(0, 100, 100); + } + + &-light { + .genVariant(100, 10, 10); + &.@{prefix}-tag--theme-default { + color: @tag-default-font-color; + border-color: rgba(243, 243, 243, 1); + background-color: rgba(243, 243, 243, 1); + } + } + + &-outline { + .genVariant(100, 100, 0); + &.@{prefix}-tag--theme-default { + color: @tag-default-font-color; + border-color: rgba(220, 220, 220, 1); + background-color: #fff; + } + } + + &-light-outline { + .genVariant(100, 100, 10); + &.@{prefix}-tag--theme-default { + color: @tag-default-font-color; + border-color: rgba(220, 220, 220, 1); + background-color: rgba(243, 243, 243, 1); + } + } + } + + &.@{prefix}-tag--checkable { + cursor: pointer; + color: @tag-default-font-color; + background-color: @tag-default-background-color; + border-color: @tag-default-border-color; + + &.@{prefix}-tag--checked { + color: @color-white; + background-color: @tag-primary-color; + border-color: @tag-primary-color; + } + + &.@{prefix}-tag--checked.@{prefix}-tag--disabled { + color: @color-white; + background-color: @primary-color-disabled; + } + + &.@{prefix}-tag--disabled { + cursor: not-allowed; + color: @tag-disabled-color; + background-color: @tag-disabled-background-color; + border-color: @tag-disabled-border-color; + } + } + + &.@{prefix}-tag--closable { + &.@{prefix}-tag--disabled { + cursor: not-allowed; + color: @tag-disabled-color; + background-color: @tag-disabled-background-color; + border-color: @tag-disabled-border-color; + } + } +} diff --git a/src/tag/common/base.wxs b/src/tag/common/base.wxs new file mode 100644 index 000000000..f11d3a836 --- /dev/null +++ b/src/tag/common/base.wxs @@ -0,0 +1,18 @@ +var getTagStyle = function (maxWidth) { + if (!maxWidth) { + return ''; + } + var width = !isNaN(maxWidth) ? maxWidth + 'px' : maxWidth; + return 'max-width:' + width + ';'; +}; +var getIconSize = function (size) { + var sizeMap = { + small: '12px', + medium: '14px', + large: '18px', + }; + return sizeMap[size]; +}; + +module.exports.getTagStyle = getTagStyle; +module.exports.getIconSize = getIconSize; diff --git a/src/tag/tag.less b/src/tag/tag.less index 9c2d8e30c..b99690b13 100644 --- a/src/tag/tag.less +++ b/src/tag/tag.less @@ -1,168 +1 @@ -@import '../common/index.less'; - -@color-white: #fff; - -@tag-default-color: #444; -@tag-default-background-color: #f5f5f5; -@tag-default-border-color: #f5f5f5; - -@tag-primary-color: @primary-color; -@tag-info-color: #bbb; -@tag-success-color: @success-color; -@tag-warning-color: @warning-color; -@tag-danger-color: @error-color; - -@tag-disabled-color: #bbb; -@tag-disabled-background-color: #f5f5f5; -@tag-disabled-border-color: #f5f5f5; - -@tag-small-padding: 3px; -@tag-medium-padding: 3px; -@tag-large-padding: 3px; - -@tag-small-font-size: 12px; -@tag-medium-font-size: 14px; -@tag-large-font-size: 16px; - -@border-radius-square: 2px; -@border-radius-round: 4px; -@border-radius-circle: 999px; - -@themes: primary, success, warning, info, danger; - -.genEffect(@fontColorWeight; @borderColorWeight; @backgroundColorWeight; @hoverColorWeight) { - &.@{prefix}-tag--theme-default { - color: @tag-default-color; - border-color: @tag-default-border-color; - background-color: @tag-default-background-color; - } - - .for(@themes, @i: 1) when(@i =< length(@themes)) { - @theme: extract(@themes, @i); - - @theme-color: 'tag-@{theme}-color'; - - &.@{prefix}-tag--theme-@{theme} { - background-color: mix(@@theme-color, @color-white, @backgroundColorWeight); - border-color: mix(@@theme-color, @color-white, @borderColorWeight); - color: mix(@@theme-color, @color-white, @fontColorWeight); - } - - .for(@themes, (@i + 1)); - } - - .for(@themes); -} - -.@{prefix}-tag { - display: inline-flex; - align-items: center; - border: 2rpx solid transparent; - box-sizing: border-box; - border-radius: @border-radius-square; - padding: 0 24rpx; - font-size: 24rpx; - // max-width: 240rpx; - user-select: none; - - &__text { - word-wrap: normal; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - height: 48rpx; - line-height: 48rpx; - } - - &--variant { - &-dark { - .genEffect(0, 100, 100, 100); - } - - &-light { - .genEffect(100, 10, 10, 10); - } - - &-outline { - .genEffect(100, 50, 0, 5); - } - - &-light-outline { - .genEffect(100, 50, 10, 5); - } - } - - &__content { - width: 100%; - } - - .@{prefix}__icon { - font-size: @tag-medium-font-size; - } - - &__icon-close { - display: flex; - align-items: center; - margin-left: 16rpx; - } - - &.@{prefix}-tag--size { - &-small { - height: 44rpx; - line-height: 40rpx; - padding: 0 16rpx; - font-size: 20rpx; - - .@{prefix}-icon { - font-size: 20rpx; - } - } - - &-medium { - height: 48rpx; - line-height: 44rpx; - padding: 0 24rpx; - font-size: 24rpx; - - .@{prefix}-icon { - font-size: 24rpx; - } - } - - &-large { - height: 60rpx; - line-height: 56rpx; - padding: 0 24rpx; - font-size: 28rpx; - - .@{prefix}-icon { - font-size: 28rpx; - } - } - } - - &.@{prefix}-tag--square { - border-radius: @border-radius-square; - } - - &.@{prefix}-tag--round { - border-radius: @border-radius-round; - } - - &.@{prefix}-tag--circle { - border-radius: @border-radius-circle; - } - - &.@{prefix}-tag--half-circle { - border-radius: 0 @border-radius-circle @border-radius-circle 0; - } - - &.@{prefix}-tag--closable { - &.@{prefix}-tag--disabled { - cursor: not-allowed; - color: @tag-disabled-color; - background-color: @tag-disabled-background-color; - border-color: @tag-disabled-border-color; - } - } -} +@import './common/base.less'; diff --git a/src/tag/tag.ts b/src/tag/tag.ts index e8dbe828d..3151742fb 100644 --- a/src/tag/tag.ts +++ b/src/tag/tag.ts @@ -1,6 +1,7 @@ import { wxComponent, SuperComponent } from '../common/src/index'; import config from '../common/config'; import props from './props'; +import { classNames } from '../common/utils'; const { prefix } = config; const name = `${prefix}-tag`; @@ -8,16 +9,51 @@ const name = `${prefix}-tag`; @wxComponent() export default class Tag extends SuperComponent { data = { + prefix, classPrefix: name, - classBasePrefix: prefix, + className: '', }; + properties = props; + externalClasses = [`${prefix}-class`]; - properties = props; + options = { + multipleSlots: true, + }; + + lifetimes = { + attached() { + this.setClass(); + }, + }; methods = { + setClass() { + const { prefix, classPrefix } = this.data; + const { size, shape, theme, variant, closable, disabled } = this.properties; + const tagClass = [ + classPrefix, + `${classPrefix}--theme-${theme || 'default'}`, + `${classPrefix}--variant-${variant || 'dark'}`, + closable ? `${classPrefix}--closable ${prefix}-is-closable` : '', + disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '', + `${classPrefix}--size-${size || 'medium'}`, + `${classPrefix}--shape-${shape || 'square'}`, + ]; + const className = classNames(tagClass); + this.setData({ + className, + }); + }, + + handleClick(e: WechatMiniprogram.BaseEvent) { + if (this.data.disabled) return; + this.triggerEvent('click', e); + }, + hangleClose(e: WechatMiniprogram.BaseEvent) { + if (this.data.disabled) return; this.triggerEvent('close', e); }, }; diff --git a/src/tag/tag.wxml b/src/tag/tag.wxml index e3d999660..49aa24d7e 100644 --- a/src/tag/tag.wxml +++ b/src/tag/tag.wxml @@ -1,16 +1,12 @@ - - - + + + + + + + - - - + diff --git a/src/tag/tag.wxs b/src/tag/tag.wxs deleted file mode 100644 index 12cb5ddd5..000000000 --- a/src/tag/tag.wxs +++ /dev/null @@ -1,41 +0,0 @@ -var getTagClass = function (props) { - var baseClass = props.classPrefix || ''; - var prefix = props.classBasePrefix || ''; - var size = props.size || 'medium'; - var shape = props.shape || 'square'; - var theme = props.theme || 'default'; - var variant = props.variant || 'dark'; - var closable = props.closable || false; - var disabled = props.disabled || false; - var tagClass = [ - baseClass, - baseClass + '--theme-' + theme, - baseClass + '--variant-' + variant, - closable ? baseClass + '--closable ' + prefix + '-is-closable' : '', - disabled ? baseClass + '--disabled ' + prefix + '-is-disabled' : '', - baseClass + '--size-' + size, - shape === 'shape' ? baseClass + '--square' : '', - shape === 'round' ? baseClass + '--round' : '', - shape === 'circle' ? baseClass + '--circle' : '', - shape === 'half-circle' ? baseClass + '--half-circle' : '', - ]; - return tagClass.join(' '); -}; -var getTagStyle = function (maxWidth) { - if (!maxWidth) { - return ''; - } - var width = !isNaN(maxWidth) ? maxWidth + 'px' : maxWidth; - return 'max-width:' + width + ';'; -}; -var getIconSize = function(size) { - var sizeMap = { - 'small': '12px', - 'medium': '16px', - 'large': '20px' - }; - return sizeMap[size]; -} -module.exports.getTagClass = getTagClass; -module.exports.getTagStyle = getTagStyle; -module.exports.getIconSize = getIconSize; From bbc37d38c7f9778e3729d058e70d10c4cbad8d89 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Mon, 11 Jul 2022 16:29:46 +0800 Subject: [PATCH 2/2] fix(tag): remove wxs --- src/tag/_example/tag.wxml | 2 +- src/tag/check-tag.wxml | 13 +++++++++---- src/tag/common/base.wxs | 18 ------------------ src/tag/tag.ts | 11 +++++++++++ src/tag/tag.wxml | 16 ++++++++++------ 5 files changed, 31 insertions(+), 29 deletions(-) delete mode 100644 src/tag/common/base.wxs diff --git a/src/tag/_example/tag.wxml b/src/tag/_example/tag.wxml index f9241dd5f..721efdb21 100644 --- a/src/tag/_example/tag.wxml +++ b/src/tag/_example/tag.wxml @@ -40,7 +40,7 @@ - 超长省略文本标签超长省略文本标签 + 超长省略文本标签超长省略文本标签 diff --git a/src/tag/check-tag.wxml b/src/tag/check-tag.wxml index e7d2a4ddb..2ebff5b39 100644 --- a/src/tag/check-tag.wxml +++ b/src/tag/check-tag.wxml @@ -1,11 +1,16 @@ - - + - + - + diff --git a/src/tag/common/base.wxs b/src/tag/common/base.wxs deleted file mode 100644 index f11d3a836..000000000 --- a/src/tag/common/base.wxs +++ /dev/null @@ -1,18 +0,0 @@ -var getTagStyle = function (maxWidth) { - if (!maxWidth) { - return ''; - } - var width = !isNaN(maxWidth) ? maxWidth + 'px' : maxWidth; - return 'max-width:' + width + ';'; -}; -var getIconSize = function (size) { - var sizeMap = { - small: '12px', - medium: '14px', - large: '18px', - }; - return sizeMap[size]; -}; - -module.exports.getTagStyle = getTagStyle; -module.exports.getIconSize = getIconSize; diff --git a/src/tag/tag.ts b/src/tag/tag.ts index 3151742fb..020288f6b 100644 --- a/src/tag/tag.ts +++ b/src/tag/tag.ts @@ -12,6 +12,7 @@ export default class Tag extends SuperComponent { prefix, classPrefix: name, className: '', + tagStyle: '', }; properties = props; @@ -25,6 +26,7 @@ export default class Tag extends SuperComponent { lifetimes = { attached() { this.setClass(); + this.setTagStyle(); }, }; @@ -47,6 +49,15 @@ export default class Tag extends SuperComponent { }); }, + setTagStyle() { + const { maxWidth } = this.properties; + if (!maxWidth) { + return ''; + } + const width = !Number.isNaN(maxWidth) ? `${maxWidth}px` : maxWidth; + this.setData({ tagStyle: `max-width:${width};` }); + }, + handleClick(e: WechatMiniprogram.BaseEvent) { if (this.data.disabled) return; this.triggerEvent('click', e); diff --git a/src/tag/tag.wxml b/src/tag/tag.wxml index 49aa24d7e..f438f8220 100644 --- a/src/tag/tag.wxml +++ b/src/tag/tag.wxml @@ -1,12 +1,16 @@ - - - + - + - + - +