admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-07 17:48:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 🐛 修复 Tag 组件编译到微信小程序平台样式错误的问题(#53)

Browse Source
This commit is contained in:
xuqingkai 2023-09-21 00:33:48 +08:00 committed by weisheng
parent c2cba05657
commit 6aec2414a3
2 changed files with 8 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/uni_modules/wot-design-uni/components/wd-tag/index.scss
View File

@ -72,11 +72,11 @@
@include when(dynamic-input) {
border-color: $-tag-primary-color;
}
@include e(icon) {
@include edeep(icon) {
display: inline-block;
margin-right: 4px;
font-size: $-tag-small-fs;
line-height: $-tag-small-fs;
font-size: $-tag-fs;
line-height: 1.2;
vertical-align: baseline;
}
@include e(text) {
@ -92,7 +92,7 @@
vertical-align: middle;
padding: 0;
}
@include e(close) {
@include edeep(close) {
display: inline-block;
margin-left: 24px;
margin-right: -4px;

119
src/uni_modules/wot-design-uni/components/wd-tag/wd-tag.vue
View File

@ -7,7 +7,7 @@
<view class="wd-tag__text" :style="textStyle">
<slot />
</view>
<wd-icon v-if="closable && round" class="wd-tag__close" name="error-fill" @click="handleClose" />
<wd-icon v-if="closable && round" custom-class="wd-tag__close" name="error-fill" @click="handleClose" />
<input
v-if="dynamicInput && dynamic"
class="wd-tag__add-text"
@ -19,8 +19,8 @@
@confirm="handleConfirm"
/>
<view v-else-if="dynamic" class="wd-tag__text" :style="textStyle" @click="handleAdd">
<wd-icon class="wd-tag__add" size="12px" name="add" custom-class="wd-tag__icon" />
新增标签
<wd-icon name="add" class="wd-tag__add" custom-class="wd-tag__icon" />
<text>新增标签</text>
</view>
</view>
</template>
@ -157,116 +157,5 @@ function setDynamicInput() {
}
</script>
<style lang="scss" scoped>
@import '../common/abstracts/variable';
@import '../common/abstracts/mixin';
@mixin tag-type-style($normalColor, $normalBg) {
background: $normalBg;
@include when(plain) {
background: transparent;
color: $normalColor;
border: 1px solid $normalColor;
padding: 0 4px;
}
@include when(round) {
line-height: 1.2;
font-size: $-tag-fs;
padding: 4px 11px;
background: transparent;
color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
border: 1px solid if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
border-radius: $-tag-round-radius;
}
@include when(mark) {
padding: 1px 6px;
border-radius: $-tag-mark-radius;
@include when(plain) {
padding: 0 6px;
}
}
@include when(active) {
color: $-tag-primary-color;
border-color: $-tag-primary-color;
}
}
@include b(tag) {
font-size: $-tag-small-fs;
display: inline-block;
color: $-tag-color;
padding: 0 3px;
border-radius: 2px;
transition: opacity 0.3s;
vertical-align: middle;
@include tag-type-style($-tag-info-color, $-tag-info-bg);
@include when(primary) {
@include tag-type-style($-tag-primary-color, $-tag-primary-bg);
}
@include when(danger) {
@include tag-type-style($-tag-danger-color, $-tag-danger-bg);
}
@include when(warning) {
@include tag-type-style($-tag-warning-color, $-tag-warning-bg);
}
@include when(success) {
@include tag-type-style($-tag-success-color, $-tag-success-bg);
}
@include when(icon) {
font-size: $-tag-fs;
line-height: 1.2;
padding: 2px 5px;
}
@include when(dynamic) {
box-sizing: border-box;
width: 88px;
transition: 0.3s;
&:active {
color: $-tag-primary-color;
border-color: $-tag-primary-color;
}
}
@include when(dynamic-input) {
border-color: $-tag-primary-color;
}
@include e(icon) {
display: inline-block;
margin-right: 4px;
font-size: $-tag-small-fs;
line-height: $-tag-small-fs;
vertical-align: baseline;
}
@include e(text) {
display: inline-block;
vertical-align: text-top;
}
@include e(add-text) {
width: 60px;
height: 14px;
min-height: 14px;
display: inline-block;
font-size: $-tag-fs;
vertical-align: middle;
padding: 0;
}
@include e(close) {
display: inline-block;
margin-left: 24px;
margin-right: -4px;
font-size: $-tag-close-size;
height: 14px;
line-height: 1.1;
vertical-align: text-bottom;
color: $-tag-close-color;
&:active {
color: $-tag-close-active-color;
}
}
@include e(add) {
vertical-align: bottom;
}
}
@import './index.scss';
</style>