vue3 组件篇 Checkbox

可缺不可滥

已于 2023-10-26 16:13:45 修改

阅读量9.9k

点赞数 1

分类专栏： vue3-dxui 文章标签： javascript Checkbox vue3

于 2022-10-01 21:47:51 首次发布

本文链接：https://blog.csdn.net/glorydx/article/details/127137826

版权

vue3-dxui 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Checkbox组件的功能特性、开发思路及使用方法。该组件适用于多选操作，支持禁用状态和事件处理，易于集成到Vue3项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

组件介绍

“Checkbox” 组件是用户界面中的一种常见交互元素，通常用于允许用户从多个选项中选择一个或多个选项。它是一种复选框，用户可以通过勾选或取消勾选的方式来表示其选择。以下是关于 “Checkbox” 组件的介绍和特点：

多选:
- “Checkbox” 组件允许用户从多个选项中选择一个或多个，这使得它非常适合用于多选操作，例如选择兴趣、筛选项、任务清单等。
复选框控件:
- “Checkbox” 通常表示为一个小方框，用户可以点击或点击标签来切换勾选状态。
标签文本:
- 通常，每个 “Checkbox” 都伴随一个文本标签，用于描述选项。用户可以点击文本或复选框来切换选择状态。
单选和多选模式:
- “Checkbox” 组件通常可以配置为单选或多选模式。在单选模式下，只能选择一个选项，而在多选模式下，可以选择多个选项。
禁用状态:
- “Checkbox” 可以处于禁用状态，以防止用户进行选择。禁用状态的复选框通常呈现为灰色，用户无法进行勾选操作。
全选/取消全选:
- 在某些情况下， “Checkbox” 组件用于全选或取消全选操作，例如在表格中选择所有行。
事件处理:
- “Checkbox” 组件通常支持事件处理，开发人员可以监听复选框状态变化事件，并在选择状态发生变化时执行自定义操作。
响应式设计:
- “Checkbox” 组件通常支持响应式设计，以适应不同屏幕尺寸和设备类型。
可访问性:
- 良好的 “Checkbox” 组件应该考虑到可访问性，以确保它对于使用辅助技术的用户也是可访问的。

“Checkbox” 组件是用户界面中的重要元素，它们用于用户选择操作、筛选、配置选项等各种交互式场景。它通常用于网页应用程序、移动应用程序、桌面应用程序等。前端框架和库通常提供了 “Checkbox” 组件的实现，或者你可以自行编写代码来创建适合你应用程序需求的多选元素。

开发思路

checkbox属于比较简单的组件之一，通常情况下需要实现以下逻辑

两种状态，被选中或者未被选中
可以设置默认值，或者传入一个checked值，直接使其变成一个完全受控组件
需要有状态改变的回调

实现的思路主要是依靠input type=“checkbox”,我们可以在这基础上修改样式，来实现新的组件ui，change事件和checked的逻辑，可以依靠input type="checkbox"自带的逻辑，这样可以省去很多代码。

组件安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui

或者

npm install vue3-dxui

全局main.ts中引入css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue3-dxui/dxui/dxui.css'

createApp(App).use(store).use(router).mount('#app')

按需引入

<script>
import { Checkbox } from 'vue3-dxui'

export default {
  components: {
  	Checkbox
  }
}
</script>

组件代码

<template>
  <div class="dx-checkbox-warpper" :class="checkedDisabled ? 'dx-checkbox-disabled' : ''">
    <input
      class="dx-checkbox-input"
      type="checkbox"
      v-model="checkedValue"
      :disabled="checkedDisabled"
      @change="onCheckedValueChange"
    />
    <span class="dx-checkbox-text"><slot /></span>
  </div>
</template>

<script lang="ts">
import { ComponentInternalInstance, getCurrentInstance, ref, PropType } from 'vue'
import { Data } from './types'

export default {
  props: {
    checked: {
      required: false,
      default: undefined,
      type: Boolean
    },
    defaultChecked: {
      required: false,
      default: false,
      type: Boolean
    },
    disabled: {
      required: false,
      default: false,
      type: Boolean
    },
    onChange: {
      required: false,
      default: undefined,
      type: Function
    }
  },
  setup(props: Data) {
    const currentInstance: ComponentInternalInstance | null = getCurrentInstance()
    const checkedValue = ref(props.checked || props.defaultChecked)
    const checkedDisabled = ref(props.disabled)

    const onCheckedValueChange = function (e: Event) {
      if (props.checked !== undefined) {
        checkedValue.value = props.checked
      }
      currentInstance?.emit('change', e)
    }
   
    return {
      checkedValue,
      checkedDisabled,
      onCheckedValueChange
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/scss/layout.scss';
.dx-checkbox-warpper {
  display: inline-block;
  margin-right: 8px;
  .dx-checkbox-text {
    padding: 0 8px;
    font-size: 14px;
    vertical-align: text-top;
  }
  input[type='checkbox'] {
    cursor: pointer;
    font-size: 14px;
    width: 16px;
    height: 16px;
    position: relative;
  }

  input[type='checkbox']:after {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    content: ' ';
    color: $white-color;
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
    border-radius: 3px;
    background: $white-color;
    border: $border;
    box-sizing: border-box;
  }

  input[type='checkbox']:checked:after {
    content: '\2713';
    font-size: 12px;
    font-weight: 600;
    background-color: $blue-color;
    border: none;
  }
}

.dx-checkbox-disabled {
  cursor: not-allowed;
  .dx-checkbox-text {
    padding: 0 8px;
    font-size: 14px;
    vertical-align: text-top;
    color: $grey-color;
  }
  input[type='checkbox'] {
    cursor: not-allowed;
    font-size: 14px;
    width: 16px;
    height: 16px;
    position: relative;
  }

  input[type='checkbox']:after {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    content: ' ';
    color: $white-color;
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
    border-radius: 3px;
    background: $white-color;
    border: $border;
    box-sizing: border-box;
  }

  input[type='checkbox']:checked:after {
    content: '\2713';
    font-size: 12px;
    font-weight: 600;
    background-color: $grey-color;
    border: none;
  }
}
</style>

参数说明

参数	说明
checked	布尔值类型，默认值是undefined 父组件传递时，将会让组件变为一个完全受控组件，只有当父组件的checked发生变化时，checkbox的状态才会发生改变
defaultChecked	布尔值类型，默认值是false 父组件传递时，将会给与组件一个初始值，但不影响组件自身发生任何变化
disabled	布尔值类型，默认值是false，决定组件是否被禁用
onChange	函数类型，当组件状态发生改变，或想要发生改变时将会被调用，可以通过函数的第一个参数，event.target.checked 来获取将要改变的状态（如果父组件传递了checked，组件本身无法改变状态）

事件

事件名称	说明
change	当组件状态发生改变，或想要发生改变时将会被调用，可以通过函数的第一个参数，event.target.checked 来获取将要改变的状态（如果父组件传递了checked，组件本身无法改变状态）