常见组件封装

使用vue create green-ui命令初始化一个vue项目

Vue封装组件库-button组件

勾选如下

Vue封装组件库-button组件

选择scss

Vue封装组件库-button组件

选择eslint风格

Vue封装组件库-button组件

选择保存时校验

Vue封装组件库-button组件

选择In package.json

Vue封装组件库-button组件

保存

Vue封装组件库-button组件

输入项目名

Vue封装组件库-button组件

创建项目成功

Vue封装组件库-button组件

启动项目

Vue封装组件库-button组件

然后把App.vue修改为如下内容

<template>
  <div id="app">
    定制组件
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">

</style>

把router文件夹下的index.js修改为

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

]

const router = new VueRouter({
  routes
})

export default router

然后把项目文件夹删除成如下状态

Vue封装组件库-button组件

封装button组件

组件参数及事件

参数支持：

参数名	参数描述	参数类型	默认值
type	按钮类型（primary/success/warning/danger/info）	string	default
plain	是否是朴素按钮	boolean	false
round	是否是圆角按钮	boolean	false
circle	是否是圆形按钮	boolean	false
disabled	是否禁用按钮	boolean	false
icon	图标类名	string	无

事件支持：

事件名	事件描述
click	点击事件

基本结构

在components下创建button.vue

<template>
  <button class="g-button">按钮组件</button>
</template>

<script>
export default {
  name: 'GButton'
}
</script>

<style>
</style>

其中name是表示该组件的名字，在引入的时候会用到这个组件名称。

接着在main.js文件中进行注册该组件

Vue封装组件库-button组件

刷新浏览器，就可以看到调用的组件了

Vue封装组件库-button组件

下面为组件添加样式，其中为插槽slot外套个span元素，可以方便为其设置样式，其中在style标签内写样式

<template>
  <button class="g-button">
    <!-- slot表示插槽，用于要用户自定义的内容 -->
    <span><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: 'GButton'
}
</script>

<style lang="scss" scoped="scoped">
.g-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-apprearance: 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;
  }
}
</style>

浏览器查看效果

Vue封装组件库-button组件

type属性

传递参数

在element-ui及其他ui组件中都有为按钮设置不同样式

Vue封装组件库-button组件

所以需要根据不同的type设置不同的样式，这就涉及到组件通信问题了

学过vue的知道可以通过props来接收传过来的参数，如下代码

Vue封装组件库-button组件

打开浏览器控制台后台查看

Vue封装组件库-button组件

对props进行约束校验

Vue封装组件库-button组件

如果传递是一个数值类型

Vue封装组件库-button组件

那么控制台会报错

Vue封装组件库-button组件

正确传递参数打印的情况

Vue封装组件库-button组件

为不同type的按钮设计不同的样式，动态绑定type到class中进行样式设置

Vue封装组件库-button组件

button.vue完整代码如下：

<template>
  <button class="g-button" :class="[`g-button-${type}`]">
    <!-- slot表示插槽，用于要用户自定义的内容 -->
    <span><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: 'GButton',
  // 封装一个通用的组件，会对props做一个约束，即对props进行校验，校验方法参考官网
  props: {
    type: {
      // 数据类型：字符串
      type: String,
      default: 'default'// 不传type值，传默认值
    }
  },
  created () {
    console.log(this.type)
  }
}
</script>

<style lang="scss" scoped="scoped">
.g-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-apprearance: 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;
  }
}
.g-button-primary{
  color:#fff;
  background-color: #409eff;
  border-color: #409eff;
  &:hover,
  &:focus{
    background: #66b1ff;
    background-color: #66b1ff;
    color: #fff;
    }
  }
  .g-button-success{
  color:#fff;
  background-color: #67c23a;
  border-color: #67c23a;
  &:hover,
  &:focus{
    background: #85ce61;
    background-color: #85ce61;
    color: #fff;
    }
  }
  .g-button-info{
  color:#fff;
  background-color: #909399;
  border-color: #909399;
  &:hover,
  &:focus{
    background: #a6a9ad;
    background-color: #a6a9ad;
    color: #fff;
    }
  }
  .g-button-warning{
  color:#fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
  &:hover,
  &:focus{
    background: #ebb563;
    background-color: #ebb563;
    color: #fff;
    }
  }
  .g-button-danger{
  color:#fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  &:hover,
  &:focus{
    background: #f78989;
    background-color: #f78989;
    color: #fff;
    }
  }
</style>

浏览器查看效果，有其他UI组件的外表了

Vue封装组件库-button组件

plain属性

第一步：父组件传递plain值

Vue封装组件库-button组件

第二步：子组件接收值

Vue封装组件库-button组件

第三步：添加plain样式，由于plain类型是布尔值，所以在类型中我们使用对象的形式来控制样式

动态添加样式

Vue封装组件库-button组件

第四步：设置plain的样式

其中plain的CSS样式如下：

// 朴素按钮样式
.g-button.is-plain {

  &:hover,
  &:focus {
    background: #fff;
    border-color: #489eff;
    color: #409eff;
  }
}

.g-button-primary.is-plain {
  color: #409eff;
  background: #ecf5ff;

  &:hover,
  &:focus {
    background: #409eff;
    border-color: #409eff;
    color: #fff;
  }
}

.g-button-success.is-plain {
  color: #67c23a;
  background: #c2e7b0;

  &:hover,
  &:focus {
    background: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
}

.g-button-info.is-plain {
  color: #909399;
  background: #d3d4d6;

  &:hover,
  &:focus {
    background: #909399;
    border-color: #909399;
    color: #fff;
  }
}

.g-button-warning.is-plain {
  color: #e6a23c;
  background: #f5dab1;

  &:hover,
  &:focus {
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
  }
}

.g-button-danger.is-plain {
  color: #f56c6c;
  background: #fbc4c4;

  &:hover,
  &:focus {
    background: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }
}

第五步：查看浏览器效果

Vue封装组件库-button组件

round属性

round是设置按钮圆角的

第一步：父组件传值

Vue封装组件库-button组件

第二步：子组件接收值，并进行校验

Vue封装组件库-button组件

第三步：动态添加class样式

Vue封装组件库-button组件

第四步：设置round样式

.g-button.is-round{
  border-radius: 20px;
  padding: 12px 23px;
}

第五步：浏览器查看效果

Vue封装组件库-button组件

circle属性

第一步：父组件传参

Vue封装组件库-button组件

第二步：子组件通过props来接收参数

Vue封装组件库-button组件

第三步：动态添加样式

Vue封装组件库-button组件

第四步：设置circle样式

.g-button.is-circle {
  border-radius: 50%;
  padding: 12px;
}

第五步：浏览器查看效果

Vue封装组件库-button组件

字体图标

第一步：下载字体图标

字体图标使用阿里巴巴矢量图标库的图标

搜索合适的图标添加到购物车

Vue封装组件库-button组件

点击上方的购物车图标

Vue封装组件库-button组件

下载下来，将文件复制到assets目录下创建的fonts文件夹中

然后在main.js中导入

Vue封装组件库-button组件

第二步：修改图标样式

// 意思是只要类名中包括g-icon就调用该样式
[class*='g-icon'] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步：父组件传icon值

Vue封装组件库-button组件

其中g-icon是上面的图标样式的设置，而icon-guanzhu是下载下来的图标名称

第四步：子组件接收值

Vue封装组件库-button组件

接收一个string值，默认为空。

第五步：添加显示标签

Vue封装组件库-button组件

设置icon中图标和文字之间的间隔样式

.g-button [class*=g-icon]+span {
  margin-left: 5px;
}

Vue封装组件库-button组件

文字和图标的间隔有了，但是只有图标显示的时候却没有居中了，作如下处理

Vue封装组件库-button组件

可以通过this.$slots获取到所有的插槽。本段代码通过v-if来判断如果有文本则显示文本，如果没有文本则不显示

查看效果

Vue封装组件库-button组件

click事件

在使用组件时，直接给组件定义事件是不会被触发的。我们需要在组件中定义一个点击事件，这个点击事件不进行其他操作，只出发父组件中的点击事件。

第一步：在子组件中定义事件

Vue封装组件库-button组件

第二步：父组件定义处理函数

Vue封装组件库-button组件

第三步：浏览器查看效果

Vue封装组件库-button组件

disabled属性

第一步：父组件传值

<g-button disabled @click="getType" icon="g-icon icon-guanzhu" round plain type="danger"></g-button>

第二步：子组件接收值

Vue封装组件库-button组件

第三步：绑定属性

Vue封装组件库-button组件

其中'is-disabled':disabled是绑定当按钮处于disabled状态时的CSS样式，而:disabled="disabled"是将按钮置于disabled状态。

第四步：设置样式

// disabled样式
.g-button.is-disabled{
   cursor: no-drop;
}

完整代码

button.vue的完整代码

<template>
  <button class="g-button" :class="[`g-button-${type}`, {
    'is-plain': plain,
    'is-round': round,
    'is-circle': circle,
    'is-disabled': disabled
  }]" @click="handleClick" :disabled="disabled">
    <!-- slot表示插槽，用于要用户自定义的内容 -->
    <!-- 传了icon才使用图标，没有传icon属性则不使用 -->
    <i v-if="icon" :class="icon"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: 'GButton',
  // 封装一个通用的组件，会对props做一个约束，即对props进行校验，校验方法参考官网
  props: {
    type: {
      // 数据类型：字符串
      type: String,
      default: 'default'// 不传type值，传默认值
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
.g-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-apprearance: 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;
  }
}

.g-button-primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;

  &:hover,
  &:focus {
    background: #66b1ff;
    background-color: #66b1ff;
    color: #fff;
  }
}

.g-button-success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;

  &:hover,
  &:focus {
    background: #85ce61;
    background-color: #85ce61;
    color: #fff;
  }
}

.g-button-info {
  color: #fff;
  background-color: #909399;
  border-color: #909399;

  &:hover,
  &:focus {
    background: #a6a9ad;
    background-color: #a6a9ad;
    color: #fff;
  }
}

.g-button-warning {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;

  &:hover,
  &:focus {
    background: #ebb563;
    background-color: #ebb563;
    color: #fff;
  }
}

.g-button-danger {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;

  &:hover,
  &:focus {
    background: #f78989;
    background-color: #f78989;
    color: #fff;
  }
}

// 朴素按钮样式
.g-button.is-plain {

  &:hover,
  &:focus {
    background: #fff;
    border-color: #489eff;
    color: #409eff;
  }
}

.g-button-primary.is-plain {
  color: #409eff;
  background: #ecf5ff;

  &:hover,
  &:focus {
    background: #409eff;
    border-color: #409eff;
    color: #fff;
  }
}

.g-button-success.is-plain {
  color: #67c23a;
  background: #c2e7b0;

  &:hover,
  &:focus {
    background: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
}

.g-button-info.is-plain {
  color: #909399;
  background: #d3d4d6;

  &:hover,
  &:focus {
    background: #909399;
    border-color: #909399;
    color: #fff;
  }
}

.g-button-warning.is-plain {
  color: #e6a23c;
  background: #f5dab1;

  &:hover,
  &:focus {
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
  }
}

.g-button-danger.is-plain {
  color: #f56c6c;
  background: #fbc4c4;

  &:hover,
  &:focus {
    background: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }
}
.g-button.is-round{
  border-radius: 20px;
  padding: 12px 23px;
}
.g-button.is-circle {
  border-radius: 50%;
  padding: 12px;
}
// 意思是只要类名中包括g-icon就调用该样式
[class*='g-icon'] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.g-button [class*=g-icon]+span {
  margin-left: 5px;
}
// disabled样式
.g-button.is-disabled{
   cursor: no-drop;
}
</style>

App.vue测试代码

<template>
  <div id="app">
    <div>
      <h1>type属性</h1>
      <g-button>按钮</g-button>
      <g-button type="primary">按钮</g-button>
      <g-button type="success">按钮</g-button>
      <g-button type="info">按钮</g-button>
      <g-button type="warning">按钮</g-button>
      <g-button type="danger">按钮</g-button>
    </div>
    <div>
      <h1>plain属性</h1>
      <g-button plain>按钮</g-button>
      <g-button plain type="primary">按钮</g-button>
      <g-button plain type="success">按钮</g-button>
      <g-button plain type="info">按钮</g-button>
      <g-button plain type="warning">按钮</g-button>
      <g-button plain type="danger">按钮</g-button>
    </div>
    <div>
      <h1>round属性</h1>
      <g-button round>按钮</g-button>
      <g-button round type="primary">按钮</g-button>
      <g-button round type="success">按钮</g-button>
      <g-button round type="info">按钮</g-button>
      <g-button round type="warning">按钮</g-button>
      <g-button round type="danger">按钮</g-button>
    </div>
    <div>
      <h1>circle属性</h1>
      <g-button circle>按钮</g-button>
      <g-button circle type="primary">按钮</g-button>
      <g-button circle type="success">按钮</g-button>
      <g-button circle type="info">按钮</g-button>
      <g-button circle type="warning">按钮</g-button>
      <g-button circle type="danger">按钮</g-button>
    </div>
    <div>
      <h1>icon属性</h1>
      <g-button icon="g-icon icon-guanzhu">按钮</g-button>
      <g-button icon="g-icon icon-guanzhu" type="primary">按钮</g-button>
      <g-button icon="g-icon icon-guanzhu" type="success">按钮</g-button>
      <g-button icon="g-icon icon-guanzhu" type="info">按钮</g-button>
      <g-button icon="g-icon icon-guanzhu" type="warning">按钮</g-button>
      <g-button icon="g-icon icon-guanzhu" type="danger">按钮</g-button>
    </div>
    <div>
      <h1>disabled属性</h1>
      <g-button disabled>按钮</g-button>
      <g-button disabled type="primary">按钮</g-button>
      <g-button disabled type="success">按钮</g-button>
      <g-button disabled type="info">按钮</g-button>
      <g-button disabled type="warning">按钮</g-button>
      <g-button disabled type="danger">按钮</g-button>
    </div>
    <div>
      <h1>click事件</h1>
      <g-button @click="getType">按钮</g-button>
      <g-button @click="getType" type="primary">按钮</g-button>
      <g-button @click="getType" type="success">按钮</g-button>
      <g-button @click="getType" type="info">按钮</g-button>
      <g-button @click="getType" type="warning">按钮</g-button>
      <g-button @click="getType" type="danger">按钮</g-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getType () {
      console.log('type')
    }
  }
}
</script>

<style lang="scss">

</style>

测试效果

Vue封装组件库-button组件

活动

智算服务

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

Vue封装组件库-button组件

Vue封装组件库-button组件

常见组件封装

封装button组件

组件参数及事件

基本结构

type属性

传递参数

对props进行约束校验

plain属性

round属性

circle属性

字体图标

click事件

disabled属性

完整代码

相关文章

Element学习（布局组件、案例操作）（4）

结构型模式---装饰模式

【ETL工具】Kettle 调优 （使用阻塞组件的同时数据量大）

Vue3中如何实现动态菜单递归

golang实战项目log2metrics架构说明

设计模式-适配器模式

设计模式-组合模式

React之withRouter的作用和应用

prometheus为k8s做的4大适配工作

基于主流SpringBoot进行JavaWeb开发的学习路线

作者介绍

最新文章

Element学习（布局组件、案例操作）（4）

结构型模式---装饰模式

Vue3中如何实现动态菜单递归

React之withRouter的作用和应用

prometheus为k8s做的4大适配工作

【JAVA】-- GUI用户界面设计（面板组件、文本组件、标签组件、按钮组件、下拉框组件）

热门文章

【DockerImage】修复Docker镜像的组件安全漏洞（原创）

如何查看Vue使用的版本

Vue课程55-强调v-for中key值得注意点

react18-学习笔记45-添加button样式

Vue番外之循环数组从指定下标开始

Vue封装组件库-input组件

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

Vue课程8-指定webpack的entry和output

Vue学习笔记：VCA下使用provide与 inject

Vue中slot

详细分析Vue3中的defineExpose（附Demo）

对骨架屏的研究

React-Redux-其它组件中使用

【ETL工具】Kettle 调优（使用阻塞组件的同时数据量大）