Vue 进阶之从 0 到 1 搭建组件库（七）

最新推荐文章于 2024-01-19 07:15:00 发布

我是真的狗

最新推荐文章于 2024-01-19 07:15:00 发布

阅读量106

点赞数 1

分类专栏： Vue2进阶文章标签： vue 前端 sass

本文链接：https://blog.csdn.net/wanghuan1020/article/details/111832796

版权

本文是Vue进阶系列的第七篇，主要讲解如何从0到1搭建Checkbox组件和CheckboxGroup组件。内容涵盖单个复选框与多个复选框的实现，组件的基本结构，以及在Vue中注册和使用这两个组件的方法，同时讨论了CheckboxGroup中选中状态的判断逻辑和绑定方式。

摘要由CSDN通过智能技术生成

Vue 进阶之从 0 到 1 搭建组件库（七）

7. Checkbox 组件

7.1 Vue 中的单个复选框和多个复选框

在这里插入图片描述

7.2 基本结构

初始化

components 文件夹下新建 checkbox 文件夹，checkbox 文件夹下新建文件 index.vue
src/components/checkbox/index.vue

<template>
  <div>checkbox组件</div>
</template>

<script>
export default {
      
  name: 'HmCheckbox'
}
</script>

<style lang="scss">
@import 'index.scss';
</style>

main.js 中注册 checkbox 组件

// 引入 checkbox 组件
import HmCheckbox from './components/checkbox/index'
// 全局注册
Vue.component(HmCheckbox.name, HmCheckbox)

App.vue 中使用 checkbox-group 组件，此时浏览器页面应该有 checkbox-group组件 字样

<template>
  <div id="app">
    <hm-checkbox></hm-checkbox>
  </div>
</template>

基本结构：实现跟 radio 非常相似，这里直接贴出完整代码

<template>
  <label :class="['hm-checkbox', { 'is-checked': model }]">
    <span class="hm-checkbox__input">
      <span class="hm-checkbox__inner"></span>
      <input type="checkbox" class="hm-checkbox__original" :name="name" v-model="model" />
    </span>
    <span class="hm-checkbox__label">
      <slot></slot>
      <template v-if="!$slots.default">{
  { label }}</template>
    </span>
  </label>
</template>

<script>
export default {
    
  name: 'HmCheckbox',
  props: {
    
    value