elementui 按钮封装组件 vue封装按钮组件

常见组件封装

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

勾选如下

选择scss

选择eslint风格

选择保存时校验

选择In package.json

保存

输入项目名

创建项目成功

启动项目

然后把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

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

封装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文件中进行注册该组件

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

下面为组件添加样式，其中为插槽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>

浏览器查看效果

type属性

传递参数

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

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

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

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

对props进行约束校验

如果传递是一个数值类型

那么控制台会报错

正确传递参数打印的情况

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

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组件的外表了

plain属性

第一步：父组件传递plain值

第二步：子组件接收值

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

动态添加样式

第四步：设置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;
  }
}

第五步：查看浏览器效果

round属性

round是设置按钮圆角的

第一步：父组件传值

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

第三步：动态添加class样式

第四步：设置round样式

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

第五步：浏览器查看效果

circle属性

第一步：父组件传参

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

第三步：动态添加样式

第四步：设置circle样式

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

第五步：浏览器查看效果

字体图标

第一步：下载字体图标

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

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

点击上方的购物车图标

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

然后在main.js中导入

第二步：修改图标样式

// 意思是只要类名中包括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值

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

第四步：子组件接收值

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

第五步：添加显示标签

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

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

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

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

查看效果

click事件

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

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

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

第三步：浏览器查看效果

disabled属性

第一步：父组件传值

<g-button disabled @click="getType" icon="g-icon icon-guanzhu" round plain type="danger"></g-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>

测试效果