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

前言：很多时候需要做一个打勾的样式，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来控制勾显示不显示，这就完成了我们简单的一个选择框效果~

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