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> |