vue elementui mini_vue 封装一个小组件

在项目中，我们经常会封装一些组件，今天简单了解下用 vue 封装一个 element ui 的 button 组件。

新建一个 srcpackagingpackagesbuttonbutton.vue 的文件

<template>
  <div class="ls_button">
    <el-button
      :disabled="disabled"
      :type="type"
      :size="size"
      :loading="loading"
      @click="handleClick"
    >
      <slot />
    </el-button>
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'LsButton',
  props: {
    size: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    handleClick(e) {
      this.$emit('click', e)
    }
  }
}
</script>
<style lang="scss">
@import "./button.scss";
</style>

再建一个 srcpackagingpackagesbuttonindex.js 文件

import 

创建一个 install 的文件 srcpackagingindex.js

import 

在 main.js 中应用 srcmain.js

import 

这样就完成了自己组件的封装在项目中就可以直接愉快的使用了 。比如：

<ls-button type="primary" width="40px">lotus</ls-button>

---

补充CSS

// varibles.css

/* 常规边框颜色 */
$borderBlack: rgba(224, 224, 224, 1);
$btnNormalCommon: rgba(255, 255, 255, 1);
/* 默认-微软雅黑 */
$fontFamily: PingFang; 
/* 主体字体大小*/
$fontSize: 12px;
/* 标题大小 */
$titleSize: 14px;
$btnHoverCommon: rgba(10, 11, 14, 1);
$btnDisabledCommon: rgba(10, 11, 14, 0.1);
$btnNormalPrimary: rgba(10, 11, 14, 1);
$btnHoverPrimary: #2B2D35;
$btnDisabledPrimary: linear-gradient(90deg, #38858A 0%, #2A618A 100%);
$primarCyolor: #fff;
$btnNormalSecondary: #535A77;
$btnHoverSecondary: #8B92B1;
$btnDisabledSecondary: #535A77;
$disabledColor: rgba(255, 255, 255, 0.3);

// button.css

@import "../../commonCSS/varibles";
.ls_button {
  display: inline-block;
}
.ls_button .el-button {
  min-width: 60px;
  background: $btnNormalCommon;
  border: 1px solid $borderBlack;
  color: $csColor;
  font-family: $fontFamily;
  font-weight: 600;
  font-size: $titleSize;
  padding: 5px 17px;
  line-height: 17px;
  font-size: 12px;
  border-radius: 4px;
  user-select: none;
  &:hover {
    background: $btnHoverCommon;
    color: #fff;
  }

}
.ls_button {
  .el-button--small,
  .el-button--small.is-round {
    min-width: 72px;
    padding: 5px 17px;
    border-radius: 4px;
    font-size: $fontSize;
  }
  .el-button--mini,
  .el-button--mini.is-round {
    min-width: 40px;
    padding: 5px 17px;
    border-radius: 4px;
    font-size: $fontSize;
  }
}
.ls_button {
  .el-button.is-disabled,
  .el-button.is-disabled:focus,
  .el-button.is-disabled:hover {
    color: rgba(0, 0, 0, 0.25);
    background: $btnDisabledCommon;
    cursor: not-allowed;
  }
  .el-button--primary {
    background: $btnNormalPrimary;
    border: none;
    color: $primarCyolor;
    &:hover {
      background: $btnHoverPrimary;
    }
  }
  .el-button--primary.is-disabled,
  .el-button--primary.is-disabled:focus,
  .el-button--primary.is-disabled:hover {
    color: $primarCyolor;
    background: $btnDisabledPrimary;
    cursor: not-allowed;
  }
  .el-button--info {
    background: $btnNormalSecondary;
    border: none;
    color: $csColor;
    &:hover {
      background: $btnHoverSecondary;
    }
  }
  .el-button--info.is-disabled,
  .el-button--info.is-disabled:focus,
  .el-button--info.is-disabled:hover {
    color: $disabledColor;
    background: $btnDisabledSecondary;
    cursor: not-allowed;
  }
}