vue复选框组件自定义对勾_vue 封装 checkbox 组件，纯css手写，需修改样式可自制...
zl-checkboxclass="input_check":disabled="disabled":checked="checked"@change="change"/>export default {data(){return{// checked: false}},model: {prop: 'checked',event: 'change'},methods:{change(e){t
zl-checkbox
class="input_check"
:disabled="disabled"
:checked="checked"
@change="change"/>
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
}
}
}
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%);
}
组件调用
export default {
components: {
},
computed: {
},
data() {
return{
checked:true
}
},
methods:{
change(val){
console.log(val)
}
}
}
未选状态
选中状态
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)