vue 如何从 0 实现自己的 UI 组件库之 Button 组件

最新推荐文章于 2023-02-04 15:23:01 发布
最新推荐文章于 2023-02-04 15:23:01 发布
阅读量539 收藏
点赞数
分类专栏： Vue 文章标签： vue UI组件库 Button 组件 从 0 实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42614080/article/details/105880604
版权
一、vue实现ui组件库之Button组件
  1. 通过 vue create jiu-color-ui 命令创建自己的 vue 项目工程，jiu-color-ui 是项目名称。
  2. 通过 cd jiu-color-ui 命令切换到 jiu-color-ui 项目中
  3. 通过 npm run serve 命令让项目运行起来
  4. 在项目的 components 文件夹中，建立 button.vue 文件，在 template 中，使用 button 按钮，添加类名为 jc-button。由于不同的按钮之间有不同的类型，可以通过动态样式绑定控制按钮的形状，通过 jc-button--${type} 进行控制 type，后面通过不同的值进行控制，plain 是朴素，round 是圆角，circle 是圆形，disabled 是禁止。通过 @click 绑定按钮的点击事件 handleClick。对于按钮上的文字，可以使用 slot 插槽，而对于文字的显示通过 v-if 命令判断 $slots.default ，不传入任何文字内容时不显示，代码如下所示：
<template>
    <button class="jc-button" :class="[`jc-button--${type}`, {
       'is-plain': plain,
       'is-round': round,
       'is-circle': circle,
       'is-disabled': disabled
    }]"
    @click="handleClick">
        <i v-if="icon" :class="icon"></i>
        <span v-if="$slots.default">
            <slot></slot>
        </span>
    </button>
</template>
  1. 在 script 中，定义 name 的值为 JcButton。对于使用不同的按钮会有不同的样式，可以使用父子组件传值。在子组件中，定义 props，可以进行约束和校验。定义 type 为 String 类型；定义 plain 为 Boolean 类型，默认为 false；定义 round 为 Boolean 类型，默认为 false；定义 circle 为 Boolean 类型，默认为 false；定义 icon 为 String 类型，默认为空；定义 disabled 为 Boolean 类型，默认为 false。在 methods 中，定义按钮的点击事件 handleClick，传入事件对象 event，通过 this.$emit 向父组件传入 click 事件，代码如下所示：
<script>
export default {
  name: 'JcButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  created () {
    console.log(this.type)
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>
  1. 这个 Button 按钮组件的参数支持，如下所示：
参数名参数描述参数类型默认值
type按钮类型(primary / success / warning / danger / info)stringdefault
plain是否是朴素按钮booleanfalse
round是否是圆角按钮booleanfalse
circle是否是圆形按钮booleanfalse
disabled是否禁用按钮booleanfalse
icon图标类名string无

7 . 在 style 中，使用 scss，写入按钮的一些样式，代码如下所示：

<style lang="scss" scoped>
// 按钮基本样式
.jc-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;
  // 禁止元素的文字被选中
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  &:hover,
  &:focus {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}

// 不同type类型按钮样式
.jc-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;

  &:hover,
  &:focus {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
}
.jc-button--success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
  &:hover,
  &:focus {
    background: #85ce61;
    border-color: #85ce61;
    color: #fff;
  }
}
.jc-button--info {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
  &:hover,
  &:focus {
    background: #a6a9ad;
    border-color: #a6a9ad;
    color: #fff;
  }
}
.jc-button--warning {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
  &:hover,
  &:focus {
    background: #ebb563;
    border-color: #ebb563;
    color: #fff;
  }
}
.jc-button--danger {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  &:hover,
  &:focus {
    background: #f78989;
    border-color: #f78989;
    color: #fff;
  }
}

// 朴素的按钮
.jc-button.is-plain {
  &:hover,
  &:focus {
    background: #fff;
    border-color: #409eff;
    color: #409eff;
  }
}
.jc-button--primary.is-plain {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover,
  &:focus {
    background: #409eff;
    border-color: #409eff;
    color: #fff;
  }
}
.jc-button--success.is-plain {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
  &:hover,
  &:focus {
    background: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
}

.jc-button--info.is-plain {
  color: #909399;
  background: #f4f4f5;
  border-color: #d3d4d6;
  &:hover,
  &:focus {
    background: #909399;
    border-color: #909399;
    color: #fff;
  }
}
.jc-button--warning.is-plain {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
  &:hover,
  &:focus {
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
  }
}
.jc-button--danger.is-plain {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  &:hover,
  &:focus {
    background: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }
}

// 圆角按钮
.jc-button.is-round {
  border-radius: 20px;
  padding: 12px 23px;
}

// 圆形按钮
.jc-button.is-circle {
  border-radius: 50%;
  padding: 12px;
}

// 按钮后的文本
.jc-button [class*=jc-icon-]+span {
    margin-left: 5px;
}

// 禁用
.jc-button.is-disabled,
.jc-button.is-disabled:focus,
.jc-button.is-disabled:hover {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
}
.jc-button.is-disabled,
.jc-button.is-disabled:focus,
.jc-button.is-disabled:hover {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
}
.jc-button--primary.is-disabled,
.jc-button--primary.is-disabled:active,
.jc-button--primary.is-disabled:focus,
.jc-button--primary.is-disabled:hover {
    color: #fff;
    background-color: #a0cfff;
    border-color: #a0cfff;
}
.jc-button--success.is-disabled,
.jc-button--success.is-disabled:active,
.jc-button--success.is-disabled:focus,
.jc-button--success.is-disabled:hover {
    color: #fff;
    background-color: #b3e19d;
    border-color: #b3e19d;
}
.jc-button--info.is-disabled,
.jc-button--info.is-disabled:active,
.jc-button--info.is-disabled:focus,
.jc-button--info.is-disabled:hover {
    color: #fff;
    background-color: #c8c9cc;
    border-color: #c8c9cc;
}
.jc-button--warning.is-disabled,
.jc-button--warning.is-disabled:active,
.jc-button--warning.is-disabled:focus,
.jc-button--warning.is-disabled:hover {
    color: #fff;
    background-color: #f3d19e;
    border-color: #f3d19e;
}
.jc-button--danger.is-disabled,
.jc-button--danger.is-disabled:active,
.jc-button--danger.is-disabled:focus,
.jc-button--danger.is-disabled:hover {
    color: #fff;
    background-color: #fab6b6;
    border-color: #fab6b6;
}
</style>
  1. 在 main.js 文件中，引入图标样式和按钮组件，注册为全局组件，代码如下所示：
import './assets/fonts/font.scss'
import JcButton from './components/button.vue'

Vue.component(JcButton.name, JcButton)
  1. 在 App.vue 中，使用 Button 组件，通过定义不同的 type 类型和属性，展示不同样式的按钮，代码如下所示：
<template>
  <div id="app">
    <!-- 实心按钮 -->
    <div class="row">
      <jc-button @click="fn">按钮</jc-button>
      <jc-button type="primary">按钮</jc-button>
      <jc-button type="success">按钮</jc-button>
      <jc-button type="info">按钮</jc-button>
      <jc-button type="warning">按钮</jc-button>
      <jc-button type="danger">按钮</jc-button>
    </div>
    <!-- 朴素按钮 -->
    <div class="row">
      <jc-button plain  icon="jc-icon-check">按钮</jc-button>
      <jc-button plain  icon="jc-icon-check" type="primary">按钮</jc-button>
      <jc-button plain  icon="jc-icon-check" type="success">按钮</jc-button>
      <jc-button plain  icon="jc-icon-check" type="info">按钮</jc-button>
      <jc-button plain  icon="jc-icon-check" type="warning">按钮</jc-button>
      <jc-button plain  icon="jc-icon-check" type="danger">按钮</jc-button>
    </div>
    <!-- 圆角按钮 -->
    <div class="row">
      <jc-button plain round>按钮</jc-button>
      <jc-button plain round type="primary">按钮</jc-button>
      <jc-button plain round type="success">按钮</jc-button>
      <jc-button plain round type="info">按钮</jc-button>
      <jc-button plain round type="warning">按钮</jc-button>
      <jc-button plain round type="danger">按钮</jc-button>
    </div>
    <!-- 禁用按钮 -->
    <div class="row">
      <jc-button plain round disabled>按钮</jc-button>
      <jc-button plain round disabled type="primary">按钮</jc-button>
      <jc-button plain round disabled type="success">按钮</jc-button>
      <jc-button plain round disabled type="info">按钮</jc-button>
      <jc-button plain round disabled type="warning">按钮</jc-button>
      <jc-button plain round disabled type="danger">按钮</jc-button>
    </div>
    <!-- 圆形按钮 -->
    <div class="row">
      <jc-button plain circle>按钮</jc-button>
      <jc-button plain circle type="primary">按钮</jc-button>
      <jc-button plain circle type="success">按钮</jc-button>
      <jc-button plain circle type="info">按钮</jc-button>
      <jc-button plain circle type="warning">按钮</jc-button>
      <jc-button plain circle type="danger">按钮</jc-button>
    </div>
    <!-- 图标按钮 -->
    <div class="row">
      <jc-button></jc-button>
      <jc-button palin icon="jc-icon-delete" type="primary"></jc-button>
      <jc-button palin icon="jc-icon-delete" type="success"></jc-button>
      <jc-button palin icon="jc-icon-delete" type="info"></jc-button>
      <jc-button palin icon="jc-icon-delete" type="warning"></jc-button>
      <jc-button palin icon="jc-icon-delete" type="danger"></jc-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fn () {
      console.log(123)
    }
  }
}
</script>

<style lang="scss">
.row {
  margin-bottom: 20px;
  .jc-button {
    margin-right: 20px !important;
  }
}
</style>
  1. 在浏览器中输入 http://localhost:8080/，按钮显示如下：

在这里插入图片描述

城南花开ze
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vx-ui：vue组件移动端UI组件库
02-05
vue组件移动端UI组件库 中文文档： 示例浏览地址： CNode社区示例浏览地址： React版本： 构建设置 # install dependencies npm install vx-ui --save-dev # 全局注册组件 import Vue from ' vue ' import ' ...
github的vue组件库_Vue的GitHub按钮组件
cuk5340的博客
07-31 642
github的vue组件库 Vue GitHub按钮 (Vue GitHub Buttons) GitHub buttons component for Vue. Vue的GitHub按钮组件。 View Demo 查看演示 View Github 查看Github 安装 (Installation) Via NPM: 通过NPM ： npm install vue-githu...
一个漂亮的Vue组件 Floating Action Button
weixin_34013044的博客
03-25 1155
你是否临下班前接到开发一个FAB组件的需求？ 是否业务量巨大到加班还搞不定的情况下可恶的产品经理却还要求明天前开发一个高度自定义的FAB组件然后又对现有的组件不满意？ 又或者满意的组件使用的框架与现有业务不符？ 那么 如果你是Vue开发者且有FAB组件的需求，可以瞅瞅这个组件！ 完美支持阿里巴巴ICONFONT 以及 Material Icons 无需担忧额外依赖 在线预览地址为dscsdo...
Vue2按钮组件（Button）
Mr Dear的博客
12-07 6917
Vue2封装的按钮组件
收藏的好看按钮（分享）
AzeShinja的博客
06-21 340
博主在实例中使用的是VUE框架，下面先上效果图再上代码 是动态环绕的一个按钮 .box a { position: relative; display: inline-block; padding: 13px 19px; color: #2e317c; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: 0.5s; ma.
Vue组件封装 ——button组件
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-29 4500
一、基础准备工作 1、创建一个基础的vue项目包 2、创建components文件夹，用于存放组件，新建button.vue组件，可以自己取个名字 <script> export default { name: "CatButton", }; </script> 3、在main.js中引入组件 import CatButton from "./components/button.vue"; Vue.component(CatButton.name, CatButto
Ale:element3，基于 Vue 3.x 的 UI 组件库
04-15
这是一个基于 element-ui 修改的，支持 Vue 3 的组件库，你可以叫它 element3，也可以叫它 Ale （爱了）。 提交 请注意代码规范（项目内嵌了 prettier）。 提交前请先拉取代码，以免产生不必要的冲突 提交规范：key:...
aym-ui:aym-ui 是基于Vue 的移动端组件库
04-29
aym-ui 是基于Vue 的移动端组件库 文档 使用说明 安装 npm install aym-ui --save 使用 全量使用 import aymUI from 'aym-ui' import 'aym-ui/index.css' Vue.use(aymUI) 按需引入 需要安装插件 npm i babel-...
kpc：完整，Vue，React和Angular的UI组件库
02-06
浏览器支持 IE浏览器/边缘 火狐浏览器 Chrome 苹果浏览器 歌剧IE10，IE11，Edge 最近2个版本最近2个版本最近2个版本最近2个版本Vue安装npm install kpc-vue --save用法< template> < Button > Hello < / ...
market-ui:高效开发PC WEB中后台系统的Vue.js组件库
03-09
致力于后台产品Vue.js组件库中PC端的高效开发。 文档 安装 npm i market-ui -S 快速开始 全球的 import Vue from 'vue' import MarketUi from 'market-ui' import 'market-ui/lib/styles/index.css' Vue . use ( ...
vue 原生table实现合并单元格，插入button按钮的功能
04-25
vue原始table实现合并单元格，插入button按钮，并且post服务以及实现了分页的功能
曹筱君之在vue中创建button按钮插件
m0_53264079的博客
03-16 869
接着上面的讲，首先在自己的vue项目的src文件夹下的myUI文件夹中新建一个button文件夹，在里面新建一个index.vue,代码如下 <!----> <template> <div class> <button :disabled="disabled" @click="click" :class="[ color, size, { circle
Vue中Button按钮基础用法及参数属性
Tiuntel
01-30 8118
Vue中Button按钮基础用法及参数属性
Vue封装组件库-button组件
二木成林
05-25 2200
常见组件封装 使用vue create green-ui命令初始化一个vue项目 勾选如下 选择scss 选择eslint风格 选择保存时校验 选择In package.json 保存 输入项目名 创建项目成功 启动项目 然后把App.vue修改为如下内容 <template> <div id="app"> 定制组件 </div> </template> <script&
UE4-（UI）第七十九课Button
Stone的博客
12-09 3103
一、Button有四种状态：普通、鼠标悬停、鼠标按下、禁用 选中Button控件，在细节面板的 Appearance中Style设置四种状态的颜色，或者设置图片。 Color and Opacity：是按键内容的颜色及透明度 BackgroundColor：设置按钮背景的颜色。 Pressd Sound：按下时按键播放的声音 Hovered Sound：初次悬停时按键应播放的音效 ...
【vue】按钮权限的实现
m0_63834711的博客
02-04 2430
封装按钮组件，把所有属性都写了，避免有些页面需要这个属性有些页面不需要；索性全部都加上，需要某些属性的在引用的按钮组件填写就好了。这篇文章应该是能看得懂怎么写哈，步骤也写出来了，再不懂就锤系....
Vue3组件库实现 - Button组件篇
vike_123的博客
08-16 711
theme: healer-readable 这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战 Button组件实现 实现一款vue3组件库 simple组件库正在开发中~~~ button作为组件库基础组件,逻辑比较简单，主要是样式的编写。 simple button功能点一览 主题色按钮 文字按钮 禁用状态 按钮尺寸 块级按钮 自定义颜色 圆形 加载 ...
《Vue3+Ts》手把手教你写一个Button组件
Oliver尹的博客
05-04 3239
本文主要讲述了在Vue3和TypeScript下如何实现一个简单的Button组件，以及当我们要实现这个组件需要在前期进行功能代码的设计，优秀的设计可以在前期将所有功能点都描述清楚......
Vue封装Button组件思路及实现
欢迎来到iceseasyh的博客
09-14 4103
仿vant封装button
vue n-button是什么组件库
最新发布
07-15
根据您提供的信息，“n-button” 是一个来自 Element UI 组件库的按钮组件。 Element UI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件和工具，用于快速搭建用户界面。它包含了诸如按钮、表单、弹窗、导航等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值