vue3 组件篇 Button

组件介绍

“Button” 组件是用户界面中的常见元素，用于触发交互操作、提交表单、导航到其他页面或执行应用程序中的各种功能。按钮通常是用户与应用程序互动的主要方式之一，因此在界面设计中起着关键作用。以下是关于 “Button” 组件的介绍和特点：

1. 触发操作:

   • “Button” 组件用于触发各种操作，包括提交表单、保存数据、导航到其他页面、执行搜索、显示对话框等。

2. 文本和图标:

   • 按钮可以包含文本标签，用于显示操作的名称或说明。此外，按钮还可以包含图标，以提供更多的视觉信息。

3. 不同类型:

   • 按钮通常具有不同的类型，如主要按钮、次要按钮、警告按钮、成功按钮等，以区分它们的作用和重要性。

4. 交互反馈:

   • 按钮通常在用户交互时提供反馈，如按下按钮时出现点击效果、颜色变化或加载指示器。

5. 禁用状态:

   • 按钮可以处于禁用状态，以防止用户执行特定操作。禁用状态的按钮通常呈现为灰色，用户无法点击。

6. 自定义样式:

   • 开发人员通常可以自定义按钮的样式，包括背景颜色、文本颜色、边框、阴影等，以满足特定设计需求。

7. 事件处理:

   • “Button” 组件通常支持事件处理，开发人员可以监听按钮的点击事件，并在用户点击按钮时执行自定义操作。

8. 响应式设计:

   • “Button” 组件通常支持响应式设计，以适应不同屏幕尺寸和设备类型。

9. 可访问性:

   • 良好的 “Button” 组件应该考虑到可访问性，以确保它对于使用辅助技术的用户也是可访问的。

10. 组合按钮:

    • 有时，按钮可以以组合的方式出现，允许用户选择多个选项中的一个或多个，例如单选按钮组。

“Button” 组件是用户界面中的重要元素，它们用于创建交互式体验，使用户能够执行应用程序中的各种操作。按钮通常在网页应用程序、移动应用程序、桌面应用程序等各种类型的应用中都有广泛的应用。前端框架和库通常提供了 “Button” 组件的实现，或者你可以自行编写代码来创建适合你应用程序需求的按钮。

开发思路

那么封装一个button组件需要做些什么？

1. 点击事件
2. 按钮的文案自定义
3. 按钮的disabled状态
4. 按钮的大小可选择，以期能够适应更多的场景
5. 按钮的背景颜色可选可自定义
6. 按钮的形状一般分为三种，椭圆，矩形，圆形
7. button的类型也可以多提供几种，如边框是虚线的，背景色透明的，等等

组件安装与使用

需要先安装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 { Button } from 'vue3-dxui'

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

组件代码

<template>
  <button @click="buttonClick" class="dx-button" :class="className" :disabled="disabled">
    <slot></slot>
  </button>
</template>

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

import { SizeType, ButtonType, ModeType, onClickType, Data, ShapeType } from './types'

export default {
  props: {
    size: {
      required: false,
      default: 'default',
      type: String as PropType<SizeType>
    },
    type: {
      required: false,
      default: 'info',
      type: String as PropType<ButtonType>
    },
    mode: {
      required: false,
      default: 'normal',
      type: String as PropType<ModeType>
    },
    disabled: {
      required: false,
      default: false,
      type: Boolean
    },
    block: {
      required: false,
      default: false,
      type: Boolean
    },
    shape: {
      required: false,
      default: 'rectangle',
      type: String as PropType<ShapeType>
    }
  },
  setup(propsData: Data) {
    const currentInstance: ComponentInternalInstance | null = getCurrentInstance()
    const className = ref('dx-button')

    className.value = `dx-button size-${propsData.size} type-${propsData.type} mode-${
      propsData.mode
    } ${propsData.disabled ? 'disabled' : ''} ${propsData.block ? 'block' : ''} shape-${
      propsData.shape
    }`

    const buttonClick = function (e: Event) {
      currentInstance?.emit('click', e)
    }

    return {
      className,
      buttonClick
    }
  }
}
</script>

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

.dx-button {
  padding: 4px 16px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 20px;
  color: $white-color;
  background: $blue-color;
  border-color: $blue-color;
  border-style: solid;
  border-width: 1px;
  outline: none;
  cursor: pointer;
}

.dx-button.size-large {
  padding: 6px 16px;
  font-size: 16px;
}

.dx-button.size-small {
  padding: 2px 6px;
}

.dx-button.mode-text {
  background: $white-color !important;
  color: $black-color;
  border: $border;
  &:hover {
    border: $blue-border !important;
    color: $blue-color !important;
  }
}

.dx-button.mode-dashed {
  background: $white-color !important;
  color: $black-color;
  border-color: $border-color;
  border-style: dashed;
  &:hover {
    border: 1px dashed $blue-color !important;
    color: $blue-color !important;
  }
}

.dx-button.type-danger {
  background: $red-color;
  border-color: $red-color;
}

.dx-button.type-success {
  background: $green-color;
  border-color: $green-color;
}

.dx-button.type-warning {
  background: $orange-color;
  border-color: $orange-color;
}

.dx-button.mode-text.type-danger,
.dx-button.mode-dashed.type-danger {
  color: $red-color;
}

.dx-button.mode-text.type-success,
.dx-button.mode-dashed.type-success {
  color: $green-color;
}

.dx-button.mode-text.type-warning,
.dx-button.mode-dashed.type-warning {
  color: $orange-color;
}

.dx-button.type-ghost {
  background: transparent !important;
  border-color: $white-color !important;
  color: $white-color !important;
  &:hover {
    color: $blue-color !important;
    border-color: $blue-color !important;
  }
}

.dx-button.disabled {
  background-color: $grey-color !important;
  cursor: not-allowed !important;
  border-color: $border-color !important;
  color: $white-color !important;
  &:hover {
    border-color: $border-color !important;
    color: $white-color !important;
  }
}

.dx-button.block {
  width: 100% !important;
}

.dx-button.shape-circle.size-small {
  padding: 0;
  width: 32px !important;
  height: 32px;
  font-size: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
}

.dx-button.shape-circle {
  padding: 0;
  width: 40px !important;
  height: 40px;
  border-radius: 20px;
  text-align: center;
  overflow: hidden;
}

.dx-button.shape-circle.size-large {
  padding: 0;
  width: 56px !important;
  height: 56px;
  border-radius: 28px;
  text-align: center;
  overflow: hidden;
}

.dx-button.shape-round.size-small {
  padding: 0 16px;
  width: auto;
  height: 32px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
}

.dx-button.shape-round {
  padding: 0 20px;
  width: auto;
  height: 40px;
  border-radius: 20px;
  text-align: center;
  overflow: hidden;
}

.dx-button.shape-round.size-large {
  padding: 0 28px;
  width: auto;
  height: 56px;
  border-radius: 28px;
  text-align: center;
  overflow: hidden;
}
</style>

参数说明

参数名称	说明
size	按钮的大小，string字符串类型，三种可选参数 ‘default’ ‘large’ ‘small’
type	按钮的类型，string字符串类型，五种可选参数 ‘info’ ‘danger’ ‘warning’ ‘success’ ‘ghost’
mode	按钮的模式，string字符串类型，三种可选参数 ‘normal’ ‘text’ ‘dashed’
shape	按钮的形状，string字符串类型，三种可选参数 ‘rectangle’ ‘circle’ ‘round’
block	将按钮改为 block类型，布尔值默认为false
disabled	按钮是否禁用，布尔值类型

事件

事件名称	说明
@click	事件点击回调

关于dxui组件库

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

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