muzhiyu-ui 1.0.16 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view class="mu-tag" :class="tagClass" :style="tagStyle" @tap="handleClick">
|
|
3
|
+
<mu-icon
|
|
4
|
+
v-if="icon"
|
|
5
|
+
:name="icon"
|
|
6
|
+
:size="computedIconSize"
|
|
7
|
+
:color="computedIconColor"
|
|
8
|
+
class="mu-tag__icon"
|
|
9
|
+
/>
|
|
3
10
|
<text class="mu-tag__text"><slot></slot></text>
|
|
4
11
|
<text v-if="closable" class="mu-tag__close" @tap.stop="handleClose">✕</text>
|
|
5
12
|
</view>
|
|
@@ -7,24 +14,51 @@
|
|
|
7
14
|
|
|
8
15
|
<script setup>
|
|
9
16
|
import { computed } from 'vue'
|
|
17
|
+
|
|
18
|
+
defineOptions({
|
|
19
|
+
name: 'MuTag',
|
|
20
|
+
options: {
|
|
21
|
+
virtualHost: true
|
|
22
|
+
}
|
|
23
|
+
})
|
|
24
|
+
|
|
10
25
|
const props = defineProps({
|
|
11
26
|
type: { type: String, default: 'default' },
|
|
12
27
|
size: { type: String, default: 'medium' },
|
|
13
28
|
plain: { type: Boolean, default: false },
|
|
14
29
|
round: { type: Boolean, default: false },
|
|
15
30
|
closable: { type: Boolean, default: false },
|
|
31
|
+
icon: { type: String, default: '' },
|
|
32
|
+
iconColor: { type: String, default: '' },
|
|
33
|
+
iconSize: { type: [Number, String], default: '' },
|
|
16
34
|
background: { type: String, default: '' },
|
|
17
35
|
color: { type: String, default: '' }
|
|
18
36
|
})
|
|
37
|
+
|
|
19
38
|
const emit = defineEmits(['click', 'close'])
|
|
39
|
+
|
|
40
|
+
const computedIconSize = computed(() => {
|
|
41
|
+
if (props.iconSize) return props.iconSize
|
|
42
|
+
if (props.size === 'mini') return '18rpx'
|
|
43
|
+
if (props.size === 'small') return '22rpx'
|
|
44
|
+
return '26rpx'
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
const computedIconColor = computed(() => {
|
|
48
|
+
if (props.iconColor) return props.iconColor
|
|
49
|
+
return 'inherit'
|
|
50
|
+
})
|
|
51
|
+
|
|
20
52
|
const tagClass = computed(() => [
|
|
21
53
|
`mu-tag--${props.type}`, `mu-tag--${props.size}`,
|
|
22
54
|
props.plain && 'mu-tag--plain', props.round && 'mu-tag--round'
|
|
23
55
|
])
|
|
56
|
+
|
|
24
57
|
const tagStyle = computed(() => ({
|
|
25
58
|
...(props.background ? { background: props.background, borderColor: props.background } : {}),
|
|
26
59
|
...(props.color ? { color: props.color } : {})
|
|
27
60
|
}))
|
|
61
|
+
|
|
28
62
|
function handleClick(e) { emit('click', e) }
|
|
29
63
|
function handleClose(e) { emit('close', e) }
|
|
30
64
|
</script>
|
|
@@ -33,32 +67,52 @@ function handleClose(e) { emit('close', e) }
|
|
|
33
67
|
.mu-tag {
|
|
34
68
|
display: inline-flex;
|
|
35
69
|
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
36
71
|
border: 1rpx solid transparent;
|
|
37
72
|
transition: all $mu-duration $mu-ease;
|
|
38
73
|
white-space: nowrap;
|
|
39
74
|
font-weight: 600;
|
|
75
|
+
line-height: 1;
|
|
40
76
|
|
|
41
|
-
&--medium { padding:
|
|
42
|
-
&--small { padding:
|
|
43
|
-
&--
|
|
77
|
+
&--medium { padding: 8rpx 20rpx; font-size: 26rpx; border-radius: $mu-radius-md; }
|
|
78
|
+
&--small { padding: 6rpx 14rpx; font-size: 22rpx; border-radius: $mu-radius-sm; }
|
|
79
|
+
&--mini { padding: 4rpx 12rpx; font-size: 20rpx; border-radius: $mu-radius-xs; }
|
|
80
|
+
&--round { border-radius: $mu-radius-full !important; }
|
|
44
81
|
|
|
45
82
|
&--default { background: $mu-bg-gray; color: $mu-text-primary; border-color: $mu-border; }
|
|
46
|
-
&--primary { background:
|
|
47
|
-
&--success { background: rgba(
|
|
48
|
-
&--warning { background: rgba(
|
|
49
|
-
&--error { background: rgba(
|
|
83
|
+
&--primary { background: #171717; color: #ffffff; border-color: #171717; }
|
|
84
|
+
&--success { background: rgba(16, 185, 129, 0.1); color: #10b981; border-color: rgba(16, 185, 129, 0.2); }
|
|
85
|
+
&--warning { background: rgba(245, 158, 11, 0.1); color: #d97706; border-color: rgba(245, 158, 11, 0.2); }
|
|
86
|
+
&--danger, &--error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border-color: rgba(239, 68, 68, 0.2); }
|
|
50
87
|
|
|
51
|
-
&--plain.mu-tag--primary { background: transparent; }
|
|
52
|
-
&--plain.mu-tag--success { background: transparent; }
|
|
53
|
-
&--plain.mu-tag--warning { background: transparent; }
|
|
54
|
-
&--plain.mu-tag--error { background: transparent; }
|
|
55
|
-
&--plain.mu-tag--default { background:
|
|
88
|
+
&--plain.mu-tag--primary { background: transparent; color: #171717; border-color: #171717; }
|
|
89
|
+
&--plain.mu-tag--success { background: transparent; color: #10b981; border-color: rgba(16, 185, 129, 0.3); }
|
|
90
|
+
&--plain.mu-tag--warning { background: transparent; color: #d97706; border-color: rgba(245, 158, 11, 0.3); }
|
|
91
|
+
&--plain.mu-tag--danger, &--plain.mu-tag--error { background: transparent; color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
|
|
92
|
+
&--plain.mu-tag--default { background: #f8fafc; color: #334155; border-color: #e2e8f0; }
|
|
93
|
+
|
|
94
|
+
&__icon {
|
|
95
|
+
display: inline-flex !important;
|
|
96
|
+
align-items: center !important;
|
|
97
|
+
justify-content: center !important;
|
|
98
|
+
margin-right: 6rpx;
|
|
99
|
+
line-height: 1;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&__text {
|
|
103
|
+
font-size: inherit;
|
|
104
|
+
color: inherit;
|
|
105
|
+
line-height: 1;
|
|
106
|
+
display: inline-flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
}
|
|
56
109
|
|
|
57
110
|
&__close {
|
|
58
|
-
margin-left:
|
|
59
|
-
font-size:
|
|
111
|
+
margin-left: 8rpx;
|
|
112
|
+
font-size: 18rpx;
|
|
60
113
|
cursor: pointer;
|
|
61
|
-
opacity: 0.
|
|
114
|
+
opacity: 0.7;
|
|
115
|
+
line-height: 1;
|
|
62
116
|
&:active { opacity: 1; }
|
|
63
117
|
}
|
|
64
118
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "muzhiyu-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"description": "基于 UniApp Vue3 + SCSS 打造的全端极奢组件库",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"uni_modules": {
|
|
30
30
|
"id": "muzhiyu-ui",
|
|
31
31
|
"name": "muzhiyu-ui 极奢组件库",
|
|
32
|
-
"version": "1.0.
|
|
32
|
+
"version": "1.0.18",
|
|
33
33
|
"description": "基于 UniApp Vue3 + SCSS 打造的全端极奢 UI 组件库",
|
|
34
34
|
"site": "",
|
|
35
35
|
"displayName": "MuzhiyuUI 极奢全端组件库"
|