AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

从0搭建Vue3组件库:button组件

2023-06-26 377
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 从0搭建Vue3组件库:button组件

image.png

button组件几乎是每个组件库都有的；其实实现一个button组件是很简单的。本篇文章将带你一步一步的实现一个button组件。如果你想了解完整的组件库搭建，你可以先看使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库，这篇文章有详细介绍。当然如果你只想知道一个button组件如何开发出来的，只看这篇也就够了。(样式部分参造了elementui组件库）


首先我们先看下我们这个button组件要实现的功能

  • 使用type，plain属性来定义按钮基本样式
  • round，size控制按钮形状大小
  • 通过disabled来控制按钮是否可点击
  • 支持icon加入图标增强辨识度


type实现


我们的type可以传入的值可以是primary, success, info，warning, danger分别展示不同按钮颜色,type传入text显示文字按钮(没有边框和背景色的按钮)

这里只展示了一个primary的样式，因为其它值的样式实现是一样的。需要的话可以到button组件样式进行查看。


所以在button/types.ts文件中我们定义一下type的类型：

import { ExtractPropTypes } from 'vue'
export const ButtonType = ['primary', 'success', 'info', 'warning', 'danger','text']
export const buttonProps = {
  type: {
    type: String,
    validator(value: string) {
      //这里表示type只能接收这些值
      return ButtonType.includes(value)
    }
  }
}
export type ButtonProps = ExtractPropTypes<typeof buttonProps>

接下来在button.vue中实现传入不同值赋予不同类名，从而实现显示不同效果。

<template>
    <button class="k-button" :class="styleClass">
        <slot />
    </button>
</template>
<script lang="ts">
import './style/index.less'
import { defineComponent, computed } from 'vue'
import { buttonProps } from './types'
export default defineComponent({
    name: 'k-button',
    props: buttonProps,
    setup(props) {
        const styleClass = computed(() => { 
            return {
                [`k-button--${props.type}`]: props.type
            }
        })
        return {
            styleClass
        };
    },
});
</script>

这样一来传入primary组件就会有个类名k-button--primary吗，传入其它值也一样。然后我们就可以给它们写样式了。进入style/index.less:

.k-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  &:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}
.k-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  &:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
}
.k-button--text {
  border-color: transparent;
  color: #409eff;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  &:hover {
    color: #66b1ff;
    border-color: transparent;
    background-color: transparent;
  }
}


plain(朴素按钮)和round(圆角按钮)


我们可以通过传入plain和round来决定这个按钮是否为朴素按钮和圆角按钮，很显然它们是个布尔类型

//types.ts
...
export const buttonProps = {
  type: {
    type: String,
    validator(value: string) {
      return ButtonType.includes(value)
    }
  },
  plain: Boolean,
  round: Boolean
}
...

然后在button.vue定义我们的styleClass

//button.vue
const styleClass = computed(() => {
            return {
                [`k-button--${props.type}`]: props.type,
                'is-plain': props.plain,
                'is-round': props.round
            }
        })

最后在style/index.less写上我们的样式

...
.k-button--primary.is-plain {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
}
.is-round {
  border-radius: 20px;
}

注意

两个连在一起的类名如：.k-button--primary.is-plain 代表一个元素只有包含这两个类名，定义的样式才生效


禁用按钮


同样的，在types.ts定义disabled的类型

//types.ts
...
export const ButtonType = ['primary', 'success', 'info', 'warning', 'danger']
export const buttonProps = {
  type: {
    type: String,
    validator(value: string) {
      return ButtonType.includes(value)
    }
  },
  plain: Boolean,
  round: Boolean,
  disabled: Boolean
}
...

然后在button.vue定义我们的styleClass

//button.vue
const styleClass = computed(() => {
            return {
                [`k-button--${props.type}`]: props.type,
                'is-plain': props.plain,
                'is-round': props.round,
                'is-disabled': props.disabled
            }
        })

最后添加上我们的样式

...
.k-button.is-disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: #fff;
  border-color: #ebeef5;
}
.k-button--primary.is-disabled,
.k-button--primary.is-disabled:active,
.k-button--primary.is-disabled:focus,
.k-button--primary.is-disabled:hover {
  color: #fff;
  background-color: #a0cfff;
  border-color: #a0cfff;
}
//朴素按钮禁用
.k-button--primary.is-disabled.is-plain,
.k-button--primary.is-disabled.is-plain:active,
.k-button--primary.is-disabled.is-plain:focus,
.k-button--primary.is-disabled.is-plain:hover {
  color: #8cc5ff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}
...


size


通过size我们可以控制按钮的大小，组件接收的size值有：midium, small, mini。实现方式和上面差不多，这里就直接展示部分代码了

  • types.ts
//types.ts
...
export const ButtonSize = ['midium', 'small', 'mini'];
export const buttonProps = {
  type: {
    type: String,
    validator(value: string) {
      return ButtonSize.includes(value)
    }
  },
  plain: Boolean,
  round: Boolean,
  disabled: Boolean
}
...
  • button.vue
//button.vue
const styleClass = computed(() => {
            return {
                [`k-button--${props.type}`]: props.type,
                'is-plain': props.plain,
                'is-round': props.round,
                'is-disabled': props.disabled,
                [`k-button--${props.size}`]: props.size,
            }
        })
  • style/index.less
//index.less
...
.k-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.k-button--small {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
}
.k-button--mini {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
}

最后我们在项目中引用（examples）来查看效果;

<-- App.vue -->
<template>
    <div>
        <Button>默认按钮</Button>
        <Button type="primary">主要按钮</Button>
        <Button type="success">成功按钮</Button>
        <Button type="info">信息按钮</Button>
        <Button type="warning">警告按钮</Button>
        <Button type="danger">危险按钮</Button>
        <Button type="text">文字按钮</Button>
        <br>
        <br>
        <Button plain>朴素按钮</Button>
        <Button type="primary" plain>主要按钮</Button>
        <Button type="success" plain>成功按钮</Button>
        <Button type="info" plain>信息按钮</Button>
        <Button type="warning" plain>警告按钮</Button>
        <Button type="danger" plain>危险按钮</Button>
        <br>
        <br>
        <Button round>圆角按钮</Button>
        <Button type="primary" round>主要按钮</Button>
        <Button type="success" round>成功按钮</Button>
        <Button type="info" round>信息按钮</Button>
        <Button type="warning" round>警告按钮</Button>
        <Button type="danger" round>危险按钮</Button>
        <br>
        <br>
        <Button disabled>禁用按钮</Button>
        <Button type="primary" disabled>主要按钮</Button>
        <Button type="success" disabled>成功按钮</Button>
        <Button type="info" disabled>信息按钮</Button>
        <Button type="warning" disabled>警告按钮</Button>
        <Button type="danger" disabled>危险按钮</Button>
        <br>
        <br>
        <Button disabled>禁用按钮</Button>
        <Button type="primary" disabled plain>主要按钮</Button>
        <Button type="success" disabled plain>成功按钮</Button>
        <Button type="info" disabled plain>信息按钮</Button>
        <Button type="warning" disabled plain>警告按钮</Button>
        <Button type="danger" disabled plain>危险按钮</Button>
        <br>
        <br>
        <Button>默认按钮</Button>
        <Button size="medium">中等按钮</Button>
        <Button size="small">小型按钮</Button>
        <Button size="mini">超小按钮</Button>
    </div>
</template>
<script lang="ts" setup>
import { Button } from 'kitty-ui'
</script>
<style lang="less">
.k-button {
    margin-right: 10px;
}
</style>

启动项目我们就会在浏览器中看到我们的各式各样的button组件了

image.png


图标


通过icon属性设置按钮图标，支持Icon组件里的所有图标(Icon组件下一篇文章将会详细介绍)。

  • types.ts中设置icon类型
export const buttonProps = {
  type: {
    type: String,
    validator(value: string) {
      return ButtonType.includes(value)
    }
  },
  plain: Boolean,
  round: Boolean,
  disabled: Boolean,
  icon: String,
  iconPosition: String,
  size: {
    type: String,
    validator(value: string) {
      return ButtonSize.includes(value)
    }
  }
}
  • 修改button组件

icon可以传入icon组件中定义的name，iconPosition可选right使图标在按钮右侧。

<!-- button.vue -->
<template>
    <button class="k-button" :class="styleClass">
        <Icon class="icon" v-if="iconFont.iconName && iconFont.iconPosition != 'right'" :name="iconFont.iconName" />
        <slot />
        <Icon class="icon" v-if="iconFont.iconPosition == 'right' && iconFont.iconName" :name="iconFont.iconName" />
    </button>
</template>
<script lang="ts">
import './style/index.less'
import { defineComponent, computed } from 'vue'
import { buttonProps } from './types'
import Icon from '../Icon/icon.vue'
export default defineComponent({
    name: 'k-button',
    props: buttonProps,
    components: { Icon },
    setup(props) {
        const styleClass = computed(() => {
            return {
                [`k-button--${props.type}`]: props.type,
                'is-plain': props.plain,
                'is-round': props.round,
                'is-disabled': props.disabled,
                [`k-button--${props.size}`]: props.size,
            }
        })
        //图标
        const iconFont = computed(() => {
            const iconName = props.icon
            const position = props.iconPosition
            return {
                iconName,
                iconPosition
            }
        })
        return {
            styleClass,
            Icon,
            iconFont
        };
    },
});
</script>

然后在examples/App.vue使用并查看效果


<template>
    <div>
        <Button type="success" icon="edit">图标按钮</Button>
        <Button type="primary" icon="map" icon-position="right">图标按钮</Button>
        <Button type="primary" icon="ashbin"></Button>
    </div>
</template>
<script lang="ts" setup>
import { Button } from 'kitty-ui'
</script>
<style lang="less">
.k-button {
    margin-right: 10px;
}
</style>

image.png


最后


到这里一个button组件的开发基本就结束了，看起来一个不起眼的button组件里面其实还是包含些许内容的。如果你想了解更多组件的实现的话可以关注专栏，将不定期更新其它组件的实现。

如果你觉得本篇文章对你有帮助的话，动动指头点个赞吧orz，你的鼓励将会是我持续创作的动力


文章标签：
JavaScript
关键词：
vue3组件VUE.js
vue3组件库VUE.js
组件库VUE.js
VUE.js组件
button VUE.js
东方小月
目录
相关文章
光明顶阳顶天
|
1天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
102 64
mao29955
|
1天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
16 8
光明顶阳顶天
|
1天前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
20 2
光明顶阳顶天
|
1天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
总的来说，Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进，使其更适应现代前端开发的需求和趋势。但需要注意的是，在迁移过程中可能需要对一些代码进行调整和适配。
光明顶阳顶天
13 1
html的七十二变
|
14天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
37 5
html的七十二变
|
14天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
25 4
测不准
|
JavaScript 前端开发 测试技术
基于 vue3.0 从 0-1 搭建组件库（一）
基于 vue3 效仿 element-plus 从零实现组件库
测不准
933 0
基于 vue3.0 从 0-1 搭建组件库（一）
游客ady5kpv352g3u
|
8天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
游客ady5kpv352g3u
20 1
vue学习第四章
游客ady5kpv352g3u
|
8天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
17 1
vue学习第九章(v-model)
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
游客ady5kpv352g3u
18 1
vue学习第十章(组件开发）