vue3 组件篇 Switch

可缺不可滥

已于 2023-10-26 16:11:35 修改

阅读量6.6k

点赞数

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

于 2022-10-02 23:25:03 首次发布

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

版权

vue3-dxui 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

文章目录

组件介绍

“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>
  <div
    class="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.value
        currentInstance?.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，组件本身无法改变状态），第二个参数为实践对象