vue3——实现复选框效果组件封装

复选框的效果在网页中很常见，那么你知道复选框是如何实现的吗？

一.封装的意义

• 复用性更好
• 代码可维护性
• 可以扩展其他业务

二.准备

1. 使用的字体为阿里的iconfont上的字体图标资源，将需要的图标添加到购物车，然后把文件夹下载到本地，
   在src/static/iconfont.js(把文件夹中的eiconfont.js，添加到static目录下)，用svg 导入图标

 <svg v-if="checked" class="icon icon-checked" aria-hidden="true">
      <use xlink:href="#icon-fuxuankuang1"></use>
    </svg>

2. 终端中执行yarn add @vueuse/core@5.3.0,这里安装指定版本，各位按需选择。

三.如何封装

1. 封装
   在src/libs/CheckBox.vue(这是复选框的通用组件基本构建)
   代码如下示例：

<template>
  <div class="my-checkbox" @click="changeChecked">
    <svg v-if="checked" class="icon icon-checked" aria-hidden="true">
      <use xlink:href="#icon-fuxuankuang1"></use>
    </svg>

    <svg v-else class="icon icon-unchecked" aria-hidden="true">
      <use xlink:href="#icon-fangkuang"></use>
    </svg>
    <span v-if="$slots.default"><slot /></span>
  </div>
</template>
<script lang="ts">
import { useVModel } from "@vueuse/core";
import { ref } from "vue";
export default {
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    //获取父组件传递过来的值
    const checked = useVModel(props, "modelValue", emit);
    return { checked };
  },
  //   setup(props, { emit }) {
  //   选中与否的状态位
  //     const checked = ref(props.modelValue);
  //     const changeChecked = () => {
  //       checked.value = !checked.value;
  //        修改modelValue的值
  //       emit("update:modelValue", !props.modelValue);
  //     };
  //     return { checked, changeChecked };
  //   },
};
</script>
<style lang="scss">
$color: #27ba9b;

.my-checkbox {
  display: inline-block;
  &:last-child {
    margin-left: 30px;
  }

  .icon-checked {
    color: $color;
    ~ span {
      color: $color;
    }
  }
  svg {
    font-size: 20px;
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 5px;
    font-size: 20px;
  }
}
</style>

2. 使用
   任意.vue结尾文件中使用，标签中的内容会放置在标签中的内容会放置在封装的全局插件的默认插槽中，各位可根据需求定制。
   代码如下（示例）：

<template>
  <h1>Checkbox组件示例</h1>
  <div class="demo">
    <h2>常规用法</h2>
    <div class="demo__component">
      <CheckBox v-model="isSelect.checked">复选框 勾选</CheckBox>
      <CheckBox v-model="isSelect.noChecked">复选框 取消勾选</CheckBox>
    </div>
    <div class="demo__actions">
      <Button>隐藏代码</Button>
    </div>
    <div v-if="false" class="demo__code">
      <pre>代码</pre>
    </div>
  </div>
</template>
<script>
import CheckBox from "../libs/CheckBox.vue";
import Button from "../libs/Button.vue";
import { reactive } from "vue";
export default {
  components: {
    CheckBox,
    Button,
  },
  setup() {
    const isSelect = reactive({
      checked: true,
      noChecked: false,
    });
    return { isSelect };
  },
};
</script>
<style lang="scss">
</style>

四. 效果演示

复选框效果图.png

总结

Always believe that efforts will be rewarded