Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 | 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x | <template>
<span :class="$style.root" v-on="$listeners" :type="type" :selected="selected" @click="handleClick()">
<span vusion-slot-name-edit="text"><slot>{{ text }}</slot></span>
<span v-if="removable" :class="$style.remove" @click.stop="remove()"></span>
</span>
</template>
<script>
import MEmitter from '../m-emitter.vue';
export default {
name: 'u-label',
mixins: [MEmitter],
data() {
return {
selected: false,
};
},
props: {
text: String,
removable: { type: Boolean, default: false },
type: { type: String, default: 'filled' }, // 填充or线性 line
},
methods: {
remove() {
if (this.$emitPrevent('before-remove', null, this))
return;
this.$emit('remove', null, this);
},
handleClick() {
this.selected = !this.selected;
},
},
};
</script>
<style module>
.root {
display: inline-block;
line-height: var(--label-line-height);
padding: var(--label-padding-y) var(--label-padding-x);
font-size: var(--label-font-size);
background: var(--label-background);
color: var(--label-color);
border-radius: var(--label-border-radius);
white-space: nowrap;
}
.remove {
display: inline;
cursor: var(--cursor-pointer);
opacity: 0.7;
padding: 0 var(--label-remove-padding-x);
margin-right: calc(var(--label-padding-x) * (-1));
}
.remove:hover {
opacity: 1;
}
.remove::before {
icon-font: url('../i-icon.vue/assets/close.svg');
}
.root[color="primary"] {
background: var(--label-background-primary);
color: var(--label-color-primary);
}
.root[color="success"] {
background: var(--label-background-success);
color: var(--label-color-success);
}
.root[color="normal"] {
background: var(--label-background-normal);
color: var(--label-color-normal);
}
.root[color="warning"] {
background: var(--label-background-warning);
color: var(--label-color-warning);
}
.root[color="error"] {
background: var(--label-background-error);
color: var(--label-color-error);
}
.root:hover {
background: var(--label-background-hover);
color: var(--label-color-hover);
}
.root[color="primary"]:hover {
background: var(--label-background-primary-hover);
color: var(--label-color-primary-hover);
}
.root[color="success"]:hover {
background: var(--label-background-success-hover);
color: var(--label-color-success-hover);
}
.root[color="warning"]:hover {
background: var(--label-background-warning-hover);
color: var(--label-color-warning-hover);
}
.root[color="error"]:hover {
background: var(--label-background-error-hover);
color: var(--label-color-error-hover);
}
.root[selected] {
background: var(--label-background-selected);
color: var(--label-color-selected);
}
.root[color="primary"][selected] {
background: var(--label-background-primary-selected);
color: var(--label-color-primary-selected);
}
.root[color="success"][selected] {
background: var(--label-background-success-selected);
color: var(--label-color-success-selected);
}
.root[color="warning"][selected] {
background: var(--label-background-warning-selected);
color: var(--label-color-warning-selected);
}
.root[color="error"][selected] {
background: var(--label-background-error-selected);
color: var(--label-color-error-selected);
}
.root[size="small"] {
padding: var(--label-padding-y-small) var(--label-padding-x-small);
font-size: var(--label-font-size-small);
line-height: var(--label-line-height-small);
}
.root[size="small"] .remove {
padding: var(--label-remove-padding-x-small);
margin-right: calc(var(--label-remove-padding-x-small) * (-1));
}
.root[size="large"] {
padding: var(--label-padding-y-large) var(--label-padding-x-large);
font-size: var(--label-font-size-large);
}
.root[size="large"] .remove {
padding: var(--label-remove-padding-x-large);
margin-right: calc(var(--label-padding-x-large) * (-1));
}
.root[size="huge"] {
padding: var(--label-padding-y-huge) var(--label-padding-x-huge);
font-size: var(--label-font-size-huge);
}
.root[size="huge"] .remove {
padding: var(--label-remove-padding-x-huge);
margin-right: calc(var(--label-padding-x-huge) * (-1));
}
.root[display="block"] {
display: block;
}
.root[type="line"] {
background: var(--label-line-background);
border: 1px solid var(--label-line-border-color);
padding: calc( var(--label-padding-y) - 1px ) calc( var(--label-padding-x) - 1px );
}
.root[type="line"][color="primary"]{
color: var(--label-line-color-primary);
border-color: var(--label-line-color-primary);
}
.root[type="line"][color="success"]{
color: var(--label-line-color-success);
border-color: var(--label-line-color-success);
}
.root[type="line"][color="normal"]{
color: var(--label-line-color-normal);
border-color: var(--label-line-color-normal);
}
.root[type="line"][color="warning"]{
color: var(--label-line-color-warning);
border-color: var(--label-line-color-warning);
}
.root[type="line"][color="error"]{
color: var(--label-line-color-error);
border-color: var(--label-line-color-error);
}
.root[type="line"]:hover {
background: var(--label-line-background-hover);
border: 1px solid var(--label-line-border-color);
padding: calc( var(--label-padding-y) - 1px ) calc( var(--label-padding-x) - 1px );
}
.root[type="line"][color="primary"]:hover{
color: var(--label-line-color-primary);
background-color: var(--label-line-background-primary-hover);
border-color: var(--label-line-color-primary);
}
.root[type="line"][color="success"]:hover{
color: var(--label-line-color-success);
background-color: var(--label-line-background-success-hover);
border-color: var(--label-line-color-success);
}
.root[type="line"][color="warning"]:hover{
color: var(--label-line-color-warning);
background-color: var(--label-line-background-warning-hover);
border-color: var(--label-line-color-warning);
}
.root[type="line"][color="error"]:hover{
color: var(--label-line-color-error);
background-color: var(--label-line-background-error-hover);
border-color: var(--label-line-color-error);
}
.root[type="line"][selected] {
background: var(--label-line-background-selected);
border: 1px solid var(--label-line-background-selected);
color: var(--label-line-color-selected);
padding: calc( var(--label-padding-y) - 1px ) calc( var(--label-padding-x) - 1px );
}
.root[type="line"][color="primary"][selected]{
color: var(--label-line-color-primary-selected);
background-color: var(--label-line-background-primary-selected);
border-color: var(--label-line-background-primary-selected);
}
.root[type="line"][color="success"][selected]{
color: var(--label-line-color-success-selected);
background-color: var(--label-line-background-success-selected);
border-color: var(--label-line-background-success-selected);
}
.root[type="line"][color="warning"][selected]{
color: var(--label-line-color-warning-selected);
background-color: var(--label-line-background-warning-selected);
border-color: var(--label-line-background-warning-selected);
}
.root[type="line"][color="error"][selected]{
color: var(--label-line-color-error-selected);
background-color: var(--label-line-background-error-selected);
border-color: var(--label-line-background-error-selected);
}
.root[type="line"][size="small"] {
padding: calc( var(--label-padding-y-small) - 1px ) calc( var(--label-padding-x-small) - 1px );
}
.root[type="line"][size="large"] {
padding: calc( var(--label-padding-y-large) - 1px ) calc( var(--label-padding-x-large) - 1px );
}
.root[type="line"][size="huge"] {
padding: calc( var(--label-padding-y-huge) - 1px ) calc( var(--label-padding-x-huge) - 1px );
}
</style>
|