vue+css实现选择框内打勾效果

前言：很多时候需要做一个打勾的样式，ui库里的样式太局限，这个时候就需要我们自己手写一个打勾的样式。

思路上就是先写个框，然后利用 :after 伪元素再造个勾

话不多说直接上代码：

<divclass="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;}

原理很简单，就是画了不一样长两条边框，让他们倾斜角度就形成了一个勾。

接下来就是要实现我们的点击效果了=>

<divclass="login"@click="getAgreeShow()":class="agreeShow ? 'tick' : ' '"
></div>

data() {return {agreeShow: false, // 控制点击};
},

getAgreeShow() {this.agreeShow = !this.agreeShow; // 控制点击
},

通过控制点击改变agreeShow来控制勾显示不显示，这就完成了我们简单的一个选择框效果~

手动码字不易，如果你觉得对你有帮助的好劳烦你动动你的小手点个赞，当然关注收藏三连就更好了^_^~~~~~~~~~~~~~~~~~~~

vue+css实现选择框内打勾效果相关推荐

用python实现win10画图程序画选择框、复制、剪切、粘贴及拖动选择框内图形或粘贴后图形到指定位置
本文介绍用python实现win10画图程序剪贴功能的方法.win10画图程序本质上是一个位图处理程序.其最主要的功能是画各种图形,包括线.矩形.椭圆(圆)和各种多边形等,并将各种图形保存到位图中.该 ...
jquery.chosen.css,jquery-chosen 选择框插件
Chosen 是一个 JavaScript 插件,它能让丑陋的.很长的 select 选择框变的更好看.更方便,不仅如此,它更扩大了,增长了主动筛选的功能.它可对列表进行分组,同时也可禁用某些选择项. ...
vue中select选择框的监听事件
template模板: <el-select v-model="valueClass" placeholder="请选择学生" class="s ...
Vue指定日期选择框的值--自动计算过期时间
在开发过程中,有时需要对日期选择框设置一个默认值(比如当天.前几天或者是后几天)?如何自动计算过期时间?具体怎么实现呢,我们一起来看下. 本文主要根据两个小案例来讲解通过js设定日期控件的值, ...
html css 范围选择框,jquery日期范围选择器插件
这是一款jquery日期范围选择器插件.该jquery日期范围选择器插件基于bootstrap,它提供日期范围选择功能,字符串本地化功能,时间选择功能等,功能非常强大. 使用方法该jquery日期范 ...
oracle中showTime用法,ant design vue中日期选择框混合时间选择器的用法
首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: 其中,showTime.defaultValue是设置的默认展 ...
Ant Design Vue DatePicker 日期选择框限制可选时间
背景发送时间需要限制在当前时间分钟之后,比如:当前时间是2022年6月7日12:00,那么时间选择器可选的时间是:在2022年6月7日12:00 之后的. 实现 <a-date-pickers ...
工作日志WebRoot--编辑页关于处理两个关联的选择框
案例:点击编辑,弹出界面后每个栏目都有一个默认的数值,但若其中一个选择框发生更改,则触发另一选择框内的数据发生变动(例如组织机构选择发生变动,则相对应的组织机构的下属机构也发生变动). 解决思路:组织 ...
使用C#在VS窗体应用中调起一个选择框,完成图片替换
调起一个选择框此窗口不是window窗口,是C#设计出来的,默认打开选择框在文档前期准备: 首先创建WinForm窗体应用,在Form1中设置一个button按键,再设置一个pictureBox图 ...
利用Adorner制作用于图像裁切的选择框
原文:利用Adorner制作用于图像裁切的选择框前天,我写了一篇"使用Adorner显示WPF控件的边界点"的文章.这次,使用从Adorner继承来写一个用于图像裁切的选择框. ...

vue+css实现选择框内打勾效果

vue+css实现选择框内打勾效果相关推荐

最新文章

热门文章