This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

增加角标组件和选择器组件

old
宇天 2019-07-25 23:58:54 +08:00
parent 0e1776cf90
commit a33874c684
4 changed files with 98 additions and 2 deletions

67
src/badge/index.wc Normal file
View File

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

View File

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

31
src/form/select.wc Normal file
View File

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

View File

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