使用Vue封装一个checkbox小功能,选择的时候 变背景色,在对齐上面搞了我好久,最终还是使用了vertical-align:middle 解决了问题
以下是代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制作一个按钮组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
div.box{
border: 1px solid #888;
display: inline-block;
margin:0 auto;
padding:5px 20px 5px 10px;
border-radius: 5px;
vertical-align:middle;
}
div.box input[type='checkbox']{
width: 30px;
height: 30px;
vertical-align:middle;
}
label{
height: 30px;
line-height: 30px;
vertical-align:middle;
color: #333;
}
.Vchecked{
background-color: #008000;
border: 1px solid #008000 !important;
}
div.Vchecked label{
color:#fff;
}
</style>
</head>
<body>
<div :class={Vchecked:Vcheck} id="app" class="box">
<input v-model:checked="Vcheck" type="checkbox" id="mcheckbox"/><label for="mcheckbox">开启暴富模式</label>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
Vcheck:false
}
})
</script>
</body>
</html>
效果显示
才聚软件:www.zkelm.com 每天进步1% ,坚持走定制开发路线. day day up!