自定义组件库

实例内容
封装常见的功能组件（Button，Modal，Form相关），封装完成后封装成UI组件库发布到NPM上。

涉及知识点
        vue基础语法
        组件基本语法
        字键通讯（sync，provide，inject）
        插槽使用
        prop校验
       过渡与动画处理
       计算属性与监听属性
       v-model语法糖
       vue插件机制
       npm发布

实例目的
       掌握组件封装的语法和技巧
       学会造轮子，了解组件库实现原理
       搭建和积累自己的组件库

学习前提
       有一定vue基础，懂vue语法
       熟悉ES6的一些常见语法
       对vue感兴趣
 

一、使用vue脚手架初始化一个项目

使用vue created one-ui，创建一个名为one-ui的项目。

按照自己的习惯设置脚手架风格，这里不多做介绍。

脚手架搭建完毕后，将App.vue文件下的自带内容清理一下，为后续开发做准备。

二、如何封装，注册和使用一个组件

在componet下创建一个button.vue的文件，放置button组件代码。创建一个组建的button组件，，并且指定name为lyfButton。

<template>
  <button class="lyf-button">
   按钮组件
  </button>
</template>
 
<script>
export default {
  name: 'lyfButton'
}
</script>
 
<style lang="scss">
 
</style>

创建组件完成后，不能在项目中直接使用，需要到main.js中注册才可以使用。

import Vue from 'vue'
import App from './App.vue'
// 第一步：导入button组件
import OneButton from './components/button.vue'
 
Vue.config.productionTip = false
 
// 第二步：注册组件,设置(组件名，组件)
Vue.component(OneButton.name, OneButton)
 
new Vue({
  render: h => h(App)
}).$mount('#app')

注册完成后，组件就可以在项目中使用了。

<template>
  <div>
    <lyf-button></lyf-button>
  </div>
</template>

三、封装一个element-ui风格的按钮

需要使用到的知识：

1. 组件通讯
2. 组件插槽
3. props校验

参数支持：

 

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

使用插槽：

简单来说，凡是希望组件中内容可以灵活设置的地方，都需要用到slot插槽来自定义内容。

使用slot来定义按钮上的文本内容：

<template>
  <button class="lyf-button">
   <span><slot></slot></span>
  </button>
</template>

在使用时就可以直接输入文本，定义按钮文本内容了：

<template>
  <div>
    <lyf-button>登录</lyf-button>
    <lyf-button>删除</lyf-button>
    <lyf-button>取消</lyf-button>
  </div>
</template>

button组件基础样式：

<style lang="scss">
  .lyf-button{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #ffffff;
    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;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    &:hover,
    &:hover{
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
</style>

3.1button组件的type属性

让按钮支持type属性，使得按钮支持不同样式：

第一步:父组件组件传递type属性

<template>
  <div id="app">
    <div class="row">
    <lyf-button>按钮</lyf-button>
    <lyf-button type="primary">primary按钮</lyf-button>
    <lyf-button type="success">success按钮</lyf-button>
    <lyf-button type="info">info按钮</lyf-button>
    <lyf-button type="danger">danger按钮</lyf-button>
    <lyf-button type="warning">warning按钮</lyf-button>
    </div>
  </div>
</template>

第二步：子组件接收负组件传递的数据

export default {
  name: 'oneButton',
  // 此时对props进行校验，值接收string类型的type值
  props: {
    type:{
      type: String，
      // 设置默认值：如果不传值，那么使用default
      default: 'default'
    }
  },
  created () {
    console.log(this.type)//defalut primary success info danger warning
  }
}

第三步:通过绑定类名的方法动态控制样式

<template>
  <button class="one-button" :class="`one-button-${type}`">
   <span><slot></slot></span>
  </button>
</template>

第四步：设置不同类型的样式

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

第五步：至此就完成了对于按钮样式的设置

 

3.2button组件的plain属性

和type类型相同，我们只要将样式先设置好，然后通过父组件传递过来的值进行判断，就可以设置plain属性了。

第一步:父组件组件传递plain值

<template>
  <div id="app">
    <div class="row">
    <lyf-button plain>按钮</lyf-button>
    <lyf-button plain type="primary">primary按钮</lyf-button>
    <lyf-button plain type="success">success按钮</lyf-button>
    <lyf-button plain type="info">info按钮</lyf-button>
    <lyf-button plain type="danger">danger按钮</lyf-button>
    <lyf-button plain type="warning">warning按钮</lyf-button>
    </div>
  </div>
</template>

第二步：子组件接收负组件传递的数据，同样进行props校验，并且设置默认值为false

  props: {
    plain: {
      type: Boolean,
      default: false
    }
  }

第三步:通过绑定类名的方法动态控制样式，由于plain类型是布尔值，所以在类型中我们使用对象的形式来控制样式

<template>
  <button class="one-button" :class="[`one-button-${type}`,{
    'is-plain':plain
  }]">
   <span><slot></slot></span>
  </button>
</template>

第四步：设置不同类型的样式，由于plain类型是以对象的形式在类中定义的，所以使用获取属性的方法定义样式

// 朴素按钮样式
.lyf-button.is-plain{
  &:hover,
  &:focus{
    background: #fff;
    border-color: #489eff;
    color: #409eff;
  }
}
.lyf-button-primary.is-plain{
  color: #409eff;
  background: #ecf5ff;
  &:hover,
  &:focus{
    background: #409eff;
    border-color: #409eff;
    color: #fff;
  }
}
.lyf-button-success.is-plain{
  color: #67c23a;
  background: #c2e7b0;
  &:hover,
  &:focus{
    background: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
}
.lyf-button-info.is-plain{
  color: #909399;
  background: #d3d4d6;
  &:hover,
  &:focus{
    background: #909399;
    border-color: #909399;
    color: #fff;
  }
}
.lyf-button-warning.is-plain{
  color: #e6a23c;
  background: #f5dab1;
  &:hover,
  &:focus{
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
  }
}
.lyf-button-danger.is-plain{
  color: #f56c6c;
  background: #fbc4c4;
  &:hover,
  &:focus{
    background: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }
}

第五步：至此就完成了对于按钮样式的设置。