增加角标组件和选择器组件
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) {
|
||||
this.props.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);
|
||||
height: var(--size, 32px);
|
||||
fill: currentColor;
|
||||
vertical-align: -0.1em;
|
||||
|
||||
&.load {
|
||||
animation: load 1.5s linear infinite;
|
||||
|
|
Reference in New Issue