Tag add new prop size
This commit is contained in:
parent
04f5779c02
commit
8a8a1b4c40
3 changed files with 26 additions and 4 deletions
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div style="margin: 200px 0;">
|
||||||
<div>
|
<div>
|
||||||
<Tag color="default">default</Tag>
|
<Tag color="default">default</Tag>
|
||||||
<Tag color="primary">primary</Tag>
|
<Tag color="primary">primary</Tag>
|
||||||
|
@ -71,6 +71,10 @@
|
||||||
<span>{{ checked }}</span>
|
<span>{{ checked }}</span>
|
||||||
<br><br>
|
<br><br>
|
||||||
<Tag type="dot" color="gold">标签四</Tag>
|
<Tag type="dot" color="gold">标签四</Tag>
|
||||||
|
<Divider>Size</Divider>
|
||||||
|
<Tag color="primary" size="large">大号标签</Tag>
|
||||||
|
<Tag color="primary" size="medium">中号标签</Tag>
|
||||||
|
<Tag color="primary">默认尺寸</Tag>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -50,6 +50,13 @@
|
||||||
fade: {
|
fade: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
},
|
||||||
|
// 4.0.0
|
||||||
|
size: {
|
||||||
|
validator (value) {
|
||||||
|
return oneOf(value, ['default', 'medium', 'large']);
|
||||||
|
},
|
||||||
|
default: 'default'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
@ -61,6 +68,7 @@
|
||||||
classes () {
|
classes () {
|
||||||
return [
|
return [
|
||||||
`${prefixCls}`,
|
`${prefixCls}`,
|
||||||
|
`${prefixCls}-size-${this.size}`,
|
||||||
{
|
{
|
||||||
[`${prefixCls}-${this.color}`]: !!this.color && oneOf(this.color, initColorList),
|
[`${prefixCls}-${this.color}`]: !!this.color && oneOf(this.color, initColorList),
|
||||||
[`${prefixCls}-${this.type}`]: !!this.type,
|
[`${prefixCls}-${this.type}`]: !!this.type,
|
||||||
|
|
|
@ -14,9 +14,19 @@
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
|
||||||
//transition: all @transition-time @ease-in-out;
|
//transition: all @transition-time @ease-in-out;
|
||||||
|
|
||||||
|
&-size-large{
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
&-size-medium{
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
// for color and unchecked
|
// for color and unchecked
|
||||||
&:not(&-border):not(&-dot):not(&-checked){
|
&:not(&-border):not(&-dot):not(&-checked){
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue