drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Checkbox add border prop

Browse source
This commit is contained in:
梁灏 2019-09-15 11:56:37 +08:00
parent e87939165e
commit cea1642e11
3 changed files with 56 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
examples/routers/checkbox.vue
View file

@ -56,6 +56,28 @@
<Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
<Divider></Divider>
<CheckboxGroup v-model="fruit" size="small">
<Checkbox label="香蕉" border></Checkbox>
<Checkbox label="苹果" border></Checkbox>
<Checkbox label="西瓜" border></Checkbox>
</CheckboxGroup>
<br>
<CheckboxGroup v-model="fruit" size="default">
<Checkbox label="香蕉" border></Checkbox>
<Checkbox label="苹果" border disabled></Checkbox>
<Checkbox label="西瓜" border></Checkbox>
</CheckboxGroup>
<br>
<CheckboxGroup v-model="fruit" size="large">
<Checkbox label="香蕉" border></Checkbox>
<Checkbox label="苹果" border></Checkbox>
<Checkbox label="西瓜" border></Checkbox>
</CheckboxGroup>
<Divider></Divider>
<Checkbox v-model="single" size="small" border>单独</Checkbox>
<Checkbox v-model="single" size="default" border disabled>单独</Checkbox>
<Checkbox v-model="single" size="large" border>单独</Checkbox>
</div>
</template>
<script>
@ -69,7 +91,8 @@
testValue2: null,
indeterminate: true,
checkAll: false,
checkAllGroup: ['香蕉', '西瓜']
checkAllGroup: ['香蕉', '西瓜'],
single: false
};
},
methods: {

8
src/components/checkbox/checkbox.vue
View file

@ -70,6 +70,11 @@
},
name: {
type: String
},
// 4.0.0
border: {
type: Boolean,
default: false
}
},
data () {
@ -90,7 +95,8 @@
[`${prefixCls}-group-item`]: this.group,
[`${prefixCls}-wrapper-checked`]: this.currentValue,
[`${prefixCls}-wrapper-disabled`]: this.disabled,
[`${prefixCls}-${this.size}`]: !!this.size
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-border`]: this.border
}
];
},

25
src/styles/mixins/checkbox.less
View file

@ -91,6 +91,31 @@
cursor: @cursor-disabled;
}
}
&-border{
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
height: @btn-height-base;
line-height: @btn-height-base - 2px;
padding: @btn-padding-base;
transition: border @transition-time @ease-in-out;
}
&-small&-border, .@{checkbox-prefix-cls}-group.@{checkbox-prefix-cls}-small &-border{
height: @btn-height-small;
line-height: @btn-height-small - 2px;
padding: @btn-padding-small;
}
&-large&-border, .@{checkbox-prefix-cls}-group.@{checkbox-prefix-cls}-large &-border{
height: @btn-height-large;
line-height: @btn-height-large - 4px;
padding: @btn-padding-large;
}
}
.@{checkbox-prefix-cls}-wrapper-checked.@{checkbox-prefix-cls}-border{
border-color: @primary-color;
}
.@{checkbox-prefix-cls}-wrapper-disabled.@{checkbox-prefix-cls}-border{
border-color: @btn-disable-border;
}
// 选中状态