增加角标组件和选择器组件
parent
0e1776cf90
commit
a33874c684
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<slot></slot>
|
||||||
|
<span class="dot"></span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:host {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.dot {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
display: block;
|
||||||
|
min-width: 10px;
|
||||||
|
min-height: 10px;
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: nth($cr, 1);
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
transform: translateX(100%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([label]) {
|
||||||
|
.dot {
|
||||||
|
right: 10px;
|
||||||
|
min-width: 18px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default class Badge {
|
||||||
|
props = {
|
||||||
|
label: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
/* render */
|
||||||
|
this.__DOT__ = this.root.lastElementChild
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(name, old, val) {
|
||||||
|
if (old === val) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
switch (name) {
|
||||||
|
case 'label':
|
||||||
|
var num = Number(val)
|
||||||
|
if (num === num) {
|
||||||
|
if (num > 99) {
|
||||||
|
val = '99+'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.props.label = val
|
||||||
|
this.__DOT__.textContent = val
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -308,7 +308,6 @@ export default class Input {
|
||||||
}
|
}
|
||||||
|
|
||||||
set value(val) {
|
set value(val) {
|
||||||
this.props.value = val
|
|
||||||
this.__INPUT__.value = val
|
this.__INPUT__.value = val
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<div class="label">
|
||||||
|
<slot class="prepend" name="prepend"></slot>
|
||||||
|
${input}
|
||||||
|
<wc-icon class="icon"></wc-icon>
|
||||||
|
<slot class="append" name="append"></slot>
|
||||||
|
|
||||||
|
<div class="suggestion">
|
||||||
|
<ul class="list"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default Select {
|
||||||
|
props = {
|
||||||
|
label: '',
|
||||||
|
label: '',
|
||||||
|
placeholder: '',
|
||||||
|
mvidx: null, //下拉列表光标的索引ID
|
||||||
|
autofocus: false,
|
||||||
|
disabled: false
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(){
|
||||||
|
/* render */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -15,7 +15,6 @@
|
||||||
width: var(--size, 32px);
|
width: var(--size, 32px);
|
||||||
height: var(--size, 32px);
|
height: var(--size, 32px);
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
vertical-align: -0.1em;
|
|
||||||
|
|
||||||
&.load {
|
&.load {
|
||||||
animation: load 1.5s linear infinite;
|
animation: load 1.5s linear infinite;
|
||||||
|
|
Reference in New Issue