Vue3复选框组件封装

定义全局组件

定义全局组件命名为XtxCheckbox 写好被选中和不被选中的样式 代码如下

  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}

有些样式是引入的全局样式大家可以自行更改

在父组件中引入复选框组件

通过v-model双向绑定选中与否 定义一个isAgree判断是否为true或者是false 因为v-model相当于绑定一个:modelValue属性 和@update:modelValue事件

子组件接收modelValue的值

用v-if 和v-else如果是true显示icon-checked样式 如果不是就是默认样式

通过点击事件抛出modelValue给父组件看选中时true还是false

可以在span标签里面写个<slot/>插槽自定义内容哦