vue3 组件篇 Checkbox
文章目录
- 组件介绍
- 组件安装与使用
- 组件代码
- 参数说明
- 事件
- 关于dxui组件库
组件介绍
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' : ''"><inputclass="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，组件本身无法改变状态） |
关于dxui组件库
dxui组件库是我个人搭建的vue3 前端交互组件库，倾向于pc网站的交互模式。
- 如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
- dxui新上线的官网域名变更 http://dxui.cn
- npm 官方链接 https://www.npmjs.com/package/vue3-dxui
- 如果你想看完整源码 https://github.com/757363985/dxui
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！