vue3 组件篇 Switch

文章目录

组件介绍
开发思路
组件安装与使用
组件代码
参数说明
事件
关于dxui组件库

组件介绍

“Switch” 组件是用户界面中的一种常见交互元素，通常用于在两个状态之间进行切换，例如开启/关闭、启用/禁用、显示/隐藏等。“Switch” 组件通常由一个可滑动的控件和两个状态表示，用户可以通过点击或拖动来切换状态。以下是关于 “Switch” 组件的介绍和特点：

二进制切换:
- “Switch” 组件是一种二进制开关，它只有两种状态，通常表示开启或关闭。
用户友好:
- “Switch” 组件通常具有直观的用户界面，用户可以轻松地切换两种状态。
文本标签:
- 通常， “Switch” 组件可以伴随文本标签，用于描述两种状态，以提供更多的上下文信息。
自定义样式:
- 开发人员通常可以自定义 “Switch” 组件的样式，包括颜色、形状、尺寸等。
可访问性:
- 良好的 “Switch” 组件应该考虑到可访问性，以确保它对于使用辅助技术的用户也是可访问的。
事件处理:
- “Switch” 组件通常支持事件处理，开发人员可以监听状态切换事件，并在状态发生变化时执行自定义操作。
响应式设计:
- “Switch” 组件通常支持响应式设计，以适应不同屏幕尺寸和设备类型。
多用途:
- “Switch” 组件可用于多种场景，如在设置面板中切换选项、启用/禁用功能、显示/隐藏内容等。
可控性:
- 一些 “Switch” 组件支持通过编程方式来控制状态，允许应用程序根据用户的需求自动切换状态。

“Switch” 组件在用户界面设计中非常有用，它们提供了一种直观的方式来切换应用程序中的状态或选项。这种组件通常用于网页应用程序、移动应用程序、桌面应用程序等，以改善用户体验和提供用户友好的交互方式。前端框架和库通常提供了 “Switch” 组件的实现，或者你可以自行编写代码来创建适合你应用程序需求的开关功能。

开发思路

通常一个switch开关组件需要实现的功能如下

能够流畅的切换开关。
需要能及时反馈开关的状态。
能够出现提示的文字，在开关开启或关闭的时候
最好能够自适应宽度，以便文字的长度能尽可能的满足
disabled状态需要实现

组件安装与使用

需要先安装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 { Switch } from 'vue3-dxui'export default {components: {Switch}
}
</script>

组件代码

<template><divclass="dx-switch-warpper":class="switchDisabledClass ? 'dx-switch-disabled' : ''"@click="changeSwitchStatus"><div class="dx-switch-status" :class="switchStatusClass"><span class="dx-switch-text">{{ switchStatusText }}</span></div></div>
</template><script lang="ts">
import { ComponentInternalInstance, getCurrentInstance, ref, PropType, watchEffect } from 'vue'
import { Data } from './types'export default {props: {checked: {required: false,default: undefined,type: Boolean},defaultChecked: {required: false,default: undefined,type: Boolean},disabled: {required: false,default: false,type: Boolean},openText: {required: false,default: '',type: String},closeText: {required: false,default: '',type: String}},setup(props: Data) {const currentInstance: ComponentInternalInstance | null = getCurrentInstance()const checkedValue = ref(props.checked)const switchDisabledClass = ref(props.disabled)const switchStatusClass = ref('dx-switch-close')const switchStatusText = ref('')const changeSwitchStatus = function (e: Event) {if (props.disabled) {return}currentInstance?.emit('switchClick', checkedValue.value, e)if (props.checked !== undefined) {checkedValue.value = props.checked} else if (!props.disabled) {checkedValue.value = !checkedValue.valuecurrentInstance?.emit('change', checkedValue.value, e)}}if (props.checked === true) {checkedValue.value = true} else if (props.checked === false) {checkedValue.value = false} else if (props.defaultChecked === true) {checkedValue.value = true} else if (props.defaultChecked === false) {checkedValue.value = false}watchEffect(() => {if (checkedValue.value) {switchStatusClass.value = 'dx-switch-open'switchStatusText.value = props.openText as string} else {switchStatusClass.value = 'dx-switch-close'switchStatusText.value = props.closeText as string}})return {checkedValue,switchStatusClass,switchStatusText,switchDisabledClass,changeSwitchStatus}}
}
</script><style lang="scss" scoped>
@import '@/scss/layout.scss';
.dx-switch-warpper {min-width: 44px;height: 24px;margin-right: 8px;cursor: pointer;display: inline-block;position: relative;user-select: none;.dx-switch-status {width: 100%;height: 100%;border-radius: 12px;vertical-align: bottom;}.dx-switch-open {background-color: $blue-color;border: 1px solid $blue-color;.dx-switch-text {padding-right: 24px;padding-left: 6px;font-size: 14px;color: $white-color;}&::before {margin-top: 3px;margin-left: calc(100% - 22px);position: absolute;content: '';width: 16px;height: 16px;border-radius: 8px;background-color: $white-color;}}.dx-switch-close {background-color: $grey-color;border: 1px solid $grey-color;.dx-switch-text {padding-right: 6px;padding-left: 24px;font-size: 14px;color: $white-color;}&::before {position: absolute;margin: 3px 0 0 3px;content: '';width: 16px;height: 16px;border-radius: 8px;background-color: $white-color;}}
}.dx-switch-disabled {cursor: not-allowed;.dx-switch-open {background-color: $grey-color;border: 1px solid $grey-color;&::before {margin-top: 3px;margin-left: calc(100% - 22px);position: absolute;content: '';width: 16px;height: 16px;border-radius: 8px;background-color: $white-color;}}
}
</style>

参数说明

参数	说明
checked	布尔值类型，默认值是undefined 父组件传递时，将会让组件变为一个完全受控组件，只有当父组件的checked发生变化时，switch的状态才会发生改变
defaultChecked	布尔值类型，默认值是false 父组件传递时，将会给与组件一个初始值，但不影响组件自身发生任何变化
disabled	布尔值类型，默认值是false，决定组件是否被禁用
openText	字符串类型 string，在switch组件处于开启状态时展示
closeText	字符串类型 string，在switch组件处于关闭状态时展示

事件

事件名称	说明
change	函数类型，当组件状态发生改变，可以通过函数的第一个参数来获取将要改变的状态（如果父组件传递了checked，组件本身无法改变状态），第二个参数为事件对象
switchClick	函数类型，点击组件时触发，可以通过函数的第一个参数来获取组件当前的状态（如果父组件传递了checked，组件本身无法改变状态），第二个参数为实践对象

关于dxui组件库

dxui组件库是我个人搭建的vue3 前端交互组件库，倾向于pc网站的交互模式。

如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
dxui新上线的官网域名变更 http://dxui.cn
npm 官方链接 https://www.npmjs.com/package/vue3-dxui
如果你想看完整源码 https://github.com/757363985/dxui

vue3 组件篇 Switch相关推荐

vue3 组件篇 Affix
文章目录组件介绍组件库安装与使用组件代码参数说明事件关于dxui组件库组件介绍 Affix是一种常用于前端界面设计的组件,它可以让网页元素固定在页面中的某个位置,随着用户的滚动而保持不变 ...
vue3组件篇 Slider
文章目录组件介绍组件安装与使用组件代码参数说明事件关于dxui组件库组件介绍 slider组件已成为前端开发中广泛使用的UI组件之一.Slider组件可以让用户在一个可选范围内选择一个值 ...
vue3组件篇 Select
文章目录组件介绍何时使用基本功能组件安装与使用组件代码参数说明事件关于dxui组件库组件介绍何时使用弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选 ...
vue3 组件篇 tag
文章目录组件介绍标准用法自定义背景色和字体颜色点击和关闭的回调组件代码参数说明关于dxui组件库组件介绍 tag组件,是前端开发常用组件之一,无论是移动端,还是pc端,我们都能经常看到 ...
Android攻城狮组件篇—BroadcastReceiver
组件篇-BroadcastReceiver 1. Boastcast(广播)是一种广泛运用的在应用程序之间传输信息的机制. 2. BroadcastReceiver(广播接受者)是对发送出来的广播进行 ...
VUE3组件库-input组件
theme: mk-cute 这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战 VUE3组件库-input组件大家好,今天一起来学习vue3实现input组件,希望对你有帮助目录预览基 ...
手把手教你写一个Vue3组件库但是乞丐版
好久没写文章了,最近在研究一些组件库的实现方法,分享一下.在这我这篇文章之前其实已经有一篇文章讲了Vue如何打包组件库了(最底部),但是这篇文章一是没有源码二是Vue3和Vue2的组件库写法有点不一样 ...
使用 Vite 和 TypeScript 从零打造一个属于自己的 Vue3 组件库
前言随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被打造出来的吗? 读完这篇 ...
Xamarin Android组件篇教程RecylerView动画组件RecylerViewAnimators（1）
Xamarin Android组件篇教程RecylerView动画组件RecylerViewAnimators(1) RecyclerView是比ListView和GridView更为强大的布局视图, ...
九十一、Python的GUI系列 | QT组件篇
@Author:Runsen @Date:2020/7/13 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...