vue+css实现选择框内打勾效果
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
前言:很多时候需要做一个打勾的样式,ui库里的样式太局限,这个时候就需要我们自己手写一个打勾的样式。
思路上就是先写个框, 然后利用 :after 伪元素 再造个勾
话不多说直接上代码:
<div
class="login"
@click="getAgreeShow()"
:class="agreeShow ? 'tick' : ' '"
></div>
.login {
position: relative;
width: 20px;
height: 20px;
margin: 0 6px;
border: 1px solid #e64848 !important;
border-radius: 2px;
}
这样的话我们就得到了一个框,哈哈哈 这步大伙都会,不急 接下来我们就开始造勾,前面说到的,用:after伪元素来=>
.tick::after {
content: " ";
position: absolute;
display: inline-block;
width: 12px;
height: 6px;
border-width: 0 0 2px 2px;
overflow: hidden;
border-color: #e64848;
border-style: solid;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
left: 3px;
top: 4px;
}
原理很简单,就是画了不一样长两条边框,让他们倾斜角度就形成了一个勾。
接下来就是要实现我们的点击效果了=>
<div
class="login"
@click="getAgreeShow()"
:class="agreeShow ? 'tick' : ' '"
></div>
data() {
return {
agreeShow: false, // 控制点击
};
},
getAgreeShow() {
this.agreeShow = !this.agreeShow; // 控制点击
},
通过控制点击改变agreeShow来控制勾显示不显示,这就完成了我们简单的一个选择框效果~
手动码字不易,如果你觉得对你有帮助的好劳烦你动动你的小手点个赞,当然关注收藏三连就更好了^_^~~~~~~~~~~~~~~~~~~~
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)