chore: establish V1.1 recovery baseline
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Tag 标签(规范 §35 兴趣标签上限 8 个)
|
||||
*
|
||||
* 可选中 / 可移除变体,配合 PhotoUploader / PreferenceEditor 使用。
|
||||
* 用法:
|
||||
* <ui-tag label="阅读" selected="{{true}}" bind:tap="onToggleTag" />
|
||||
* <ui-tag label="运动" removable bind:remove="onRemoveTag" />
|
||||
*/
|
||||
Component({
|
||||
options: { addGlobalClass: true },
|
||||
properties: {
|
||||
label: { type: String, value: '' },
|
||||
selected: { type: Boolean, value: false },
|
||||
removable: { type: Boolean, value: false }, // 显示移除按钮
|
||||
disabled: { type: Boolean, value: false },
|
||||
variant: { type: String, value: 'default' }, // default|primary
|
||||
},
|
||||
methods: {
|
||||
onTap() {
|
||||
if (this.data.disabled) return;
|
||||
this.triggerEvent('tap', { label: this.data.label });
|
||||
},
|
||||
onRemove(e) {
|
||||
// 阻止冒泡,避免触发外层 tap
|
||||
this.triggerEvent('remove', { label: this.data.label });
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<view
|
||||
class="ui-tag ui-tag--{{variant}} {{selected ? 'ui-tag--selected' : ''}} {{disabled ? 'ui-tag--disabled' : ''}}"
|
||||
hover-class="{{disabled ? '' : 'ui-tag--hover'}}"
|
||||
bindtap="onTap"
|
||||
>
|
||||
<text class="ui-tag__label">{{label}}</text>
|
||||
<view wx:if="{{removable && !disabled}}" class="ui-tag__close" catchtap="onRemove">×</view>
|
||||
</view>
|
||||
@@ -0,0 +1,46 @@
|
||||
.ui-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.3;
|
||||
background: var(--color-bg-disabled);
|
||||
color: var(--color-text-secondary);
|
||||
border: 1rpx solid transparent;
|
||||
transition: all var(--motion-fast) var(--ease-standard);
|
||||
user-select: none;
|
||||
}
|
||||
.ui-tag__label {
|
||||
font-size: inherit;
|
||||
}
|
||||
.ui-tag__close {
|
||||
margin-left: 8rpx;
|
||||
font-size: var(--font-size-md);
|
||||
line-height: 1;
|
||||
color: var(--color-text-tertiary);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ui-tag--default.ui-tag--selected {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.ui-tag--primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.ui-tag--primary.ui-tag--selected {
|
||||
background: var(--color-primary-active);
|
||||
}
|
||||
.ui-tag--disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
.ui-tag--hover {
|
||||
opacity: 0.85;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
Reference in New Issue
Block a user