vue 封装 checkbox 组件，纯css手写，需修改样式可
2019-03-17 本文已影响0人
一叶障目5217
zl-checkbox
<template>
<input type="checkbox"
class="input_check"
:disabled="disabled"
:checked="checked"
@change="change"/>
</template>
<script>
export default {
data(){
return{
// checked: false
}
},
model: {
prop: 'checked',
event: 'change'
},
methods:{
change(e){
this.$emit('change', e.target.checked)
}
},
props:{
checked:{
type:Boolean,
default:false
},
disabled:{
type:Boolean,
default:false
}
}
}
</script>
<style lang="less" scoped>
input[type=checkbox] {
width: .4rem;
height: .4rem;
-webkit-appearance: none;
background-color: transparent;
border: 0;
outline: 0 !important;
color: #d8d8d8;
position: relative;
}
input[type=checkbox]:before{
content: "";
display:block;
width: .4rem;
height: .4rem;
border: 1px solid #ddd;
background-color: #fff;
box-sizing:border-box;
border-radius: 3px;
position: absolute;
}
input[type=checkbox]:disabled:before{
content: "";
display:block;
width: .4rem;
height: .4rem;
border: 1px solid #333;
background-color: #333;
box-sizing:border-box;
border-radius: 3px;
position: absolute;
}
input[type=checkbox]:checked:before{
content: "";
display:block;
width: .4rem;
height: .4rem;
border: 1px solid #D2A47E;
background-color: #D2A47E;
box-sizing:border-box;
border-radius: 3px;
position: absolute;
}
input[type=checkbox]:checked:after{
content: "";
display:block;
width: .15rem;
height: .3rem;
border-left: .06rem solid #fff;
border-top: .06rem solid #fff;
border-radius: .06rem;
box-sizing:border-box;
position: absolute;
transform: rotate(-135deg) translate(-70%, 25%);
}
</style>
组件调用
<zl-checkbox v-model="checked" @change="change"></zl-checkbox>
<script>
export default {
components: {
},
computed: {
},
data() {
return{
checked:true
}
},
methods:{
change(val){
console.log(val)
}
}
}
未选状态
选中状态
