仿ele封装vue-ui 组件库

你的名字 2023-02-28 01:59 17阅读 0赞

# 模仿element-ui封装vue组件库 #

## 初始化项目–优化字体图标 ##

使用vue脚手架初始化一个项目：使用 `vue created my-ui`，创建一个名为`my-ui`的项目

优化iconfont字体图标：

方法：

第一步：将选择好的字体图标，添加项目。

第二步：然后点击更多操作，选择编辑项目

第三步：修改`FontClass/Symbol前缀 和 Font Family`，统一修改为：`vh-icon-`

第四步：将字体图标文件，复制粘贴到项目 `iconfont.css`

将初始的`iconfont`类改为了`[class*=‘vh-icon-’]`，当类名中有`vh-icon-`时使用，如下

/* 其中 class*= 表示包含 [class*='vh-icon-']：表示只要类别包含 vh-icon- ，就使用 [class*='vh-icon-'] 里面的样式 而字体图标类名：vh-icon-chahao ，里面包含 vh-icon- 从而实现：只使用字体图标自身的类名，就可以了。 优化后：不再需要这样的写法 class="iconfont 字体图标类名" */
    
    [class*='vh-icon-'] { 
      font-family: "vh-icon-" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .vh-icon-chahao:before { 
      content: "\e644";
    }

第五步：在main.js中引入字体图标

// 引入字体图标
    import './assets/fonts/iconfont.css'

第六步：在项目中使用字体图标（`只需使用字体图标类名`）

## button组件 ##

> 参数说明：

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

第一步：在 `src / components / button.vue`，创建一个button.vue的文件

第二步：在main.js中全局注册组件

import oneButton from './components/button.vue'
    Vue.component(oneButton.name, oneButton)

第三步：在项目中使用button组件

<one-button class="m20" icon="delete" disabled>按钮</one-button>
     <one-button class="m20" type="primary">按钮</one-button>
     <one-button class="m20" type="success" round>round</one-button>
     <one-button class="m20" type="info" circle>拆</one-button>
     <one-button class="m20" type="danger" plain>plain</one-button>
    
    ******************************************************************
    <div class="row">
      <one-button @click="getInfo" disabled>按钮</one-button>
    </div>
    
    <script>
      methods: {
        getInfo () {
          console.log('获取信息！！')
        }
      }
     </script>

> button.vue 组件，完整代码示例：

<template>
      <div class="index">
        <button
          class="one-button"
          :class="[`one-button-${type}`,{'is-plain':plain,'is-round': round,'is-circle': circle,'is-disabled':disabled}]"
          @click="handleClick"
          :disabled="disabled"
        >
          
          <i v-if="icon" :class="`vh-icon-${icon}`"></i>
          
          <span v-if="$slots.default">
            <slot></slot>
          </span>
        </button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'oneButton',
      // 此时对props进行校验，值接收string类型的type值
      props: {
        type: {
          type: String,
          // 设置默认值：如果不传值，那么使用default
          default: 'default'
        },
        plain: {
          type: Boolean,
          default: false
        },
        round: {
          type: Boolean,
          default: false
        },
        circle: {
          type: Boolean,
          default: false
        },
        disabled: {
          type: Boolean,
          default: false
        },
        icon: {
          type: String,
          default: ''
        }
      },
      created () {
        console.log(this.type)
      },
      data () {
        return {}
      },
      methods: {
        handleClick (e) {
          this.$emit('click', e)
        }
      }
    }
    </script>
    
    <style lang='scss' scoped>
    // 基础样式
    .one-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;
      }
    }
    // type 样式
    .one-button-primary {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      &:hover,
      &:focus {
        background: #66b1ff;
        background-color: #66b1ff;
        color: #fff;
      }
    }
    .one-button-success {
      color: #fff;
      background-color: #67c23a;
      border-color: #67c23a;
      &:hover,
      &:focus {
        background: #85ce61;
        background-color: #85ce61;
        color: #fff;
      }
    }
    .one-button-info {
      color: #fff;
      background-color: #909399;
      border-color: #909399;
      &:hover,
      &:focus {
        background: #a6a9ad;
        background-color: #a6a9ad;
        color: #fff;
      }
    }
    .one-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;
      }
    }
    // 朴素按钮样式
    .one-button.is-plain {
      &:hover,
      &:focus {
        background: #fff;
        border-color: #489eff;
        color: #409eff;
      }
    }
    .one-button-primary.is-plain {
      color: #409eff;
      background: #ecf5ff;
      &:hover,
      &:focus {
        background: #409eff;
        border-color: #409eff;
        color: #fff;
      }
    }
    .one-button-success.is-plain {
      color: #67c23a;
      background: #c2e7b0;
      &:hover,
      &:focus {
        background: #67c23a;
        border-color: #67c23a;
        color: #fff;
      }
    }
    .one-button-info.is-plain {
      color: #909399;
      background: #d3d4d6;
      &:hover,
      &:focus {
        background: #909399;
        border-color: #909399;
        color: #fff;
      }
    }
    .one-button-warning.is-plain {
      color: #e6a23c;
      background: #f5dab1;
      &:hover,
      &:focus {
        background: #e6a23c;
        border-color: #e6a23c;
        color: #fff;
      }
    }
    .one-button-danger.is-plain {
      color: #f56c6c;
      background: #fbc4c4;
      &:hover,
      &:focus {
        background: #f56c6c;
        border-color: #f56c6c;
        color: #fff;
      }
    }
    // icon配套样式
    .one-button [class*='vh-icon-'] + span {
      margin-left: 5px;
    }
    
    // round 样式
    .one-button.is-round {
      border-radius: 20px;
      padding: 12px 23px;
    }
    // circle 样式
    .one-button.is-circle {
      border-radius: 50%;
      padding: 12px;
    }
    // disabled 样式
    .one-button.is-disabled {
      cursor: no-drop;
    }
    </style>

## input 组件 ##

> 参数说明

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>参数描述</th> 
   <th>参数类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>宽度</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>距离顶部的距离</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>占位符</td> 
   <td>string</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>文本框类型（text/password）</td> 
   <td>string</td> 
   <td>text</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>禁用</td> 
   <td>boolean</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>clearable</td> 
   <td>是否显示清空按钮</td> 
   <td>boolean</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>show-password</td> 
   <td>是否显示密码切换按钮</td> 
   <td>boolean</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>name属性</td> 
   <td>string</td> 
   <td>无</td> 
  </tr> 
 </tbody> 
</table>

> 事件说明：

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>事件描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>blur</td> 
   <td>失去焦点事件</td> 
  </tr> 
  <tr> 
   <td>change</td> 
   <td>内容改变事件</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>获取焦点事件</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

第一步：在 `src / components / input.vue`，创建一个 `input.vue`的文件

第二步：在main.js中全局注册组件

import oneInput from './components/input.vue'
    Vue.component(oneInput.name, oneInput)

第三步：在项目中使用组件

<one-input
          width="180px"
          top="10px"
          placeholder="请输入用户名"
          type="password"
          name="username"
          v-model="username"
          clearable
          showPassword
        ></one-input>

> input 组件，完整代码：

<template>
      <div
        class="one-input"
        :style="{width:width,marginTop:top}"
        :class="{'one-input_suffix':showSuffix}"
      >
      
        <input
          class="one-input_inner"
          :class="{'is-disabled': disabled}"
          :placeholder="placeholder"
          :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
          :name="name"
          :disabled="disabled"
          :value="value"
          @input="handleInput"
        />
        
        <span class="one-input_suffix" v-if="showSuffix">
          <i class="vh-icon-clear_circle_outlined" v-if="clearable && value" @click="clear"></i>
          <i class="vh-icon-yanjing" :class="{'vh-icon-yanjing-active': passwordVisible}" v-if="showPassword && type=='password'" @click="handlePassword"></i>
        </span>
      </div>
    </template>
    <script>
    export default {
      name: 'oneInput',
      components: {
      },
      props: {
        width: {
          type: String,
          default: '100%'
        },
        top: {
          type: String,
          default: ''
        },
        placeholder: {
          type: String,
          default: ''
        },
        type: {
          type: String,
          default: 'text'
        },
        name: {
          type: String,
          default: ''
        },
        disabled: {
          type: Boolean,
          default: false
        },
        value: {
          type: String,
          default: ''
        },
        clearable: {
          type: Boolean,
          default: false
        },
        showPassword: {
          type: Boolean,
          default: false
        }
      },
      data () {
        return {
          // 显示是否显示密码框
          passwordVisible: false
        }
      },
      // 利用计算属性，动态添加类名
      computed: {
        // 只要传了一个就显示小图标（删除、眼睛）
        showSuffix () {
          return this.clearable || this.showPassword
        }
      },
      methods: {
        // 绑定input事件进行回调
        handleInput (e) {
          this.$emit('input', e.target.value)
        },
        // 清除输入框的内容
        clear () {
          this.$emit('input', '')
        },
        // 切换密码的显示和隐藏
        handlePassword () {
          this.passwordVisible = !this.passwordVisible
        }
      }
    }
    </script>
    <style lang="scss">
    .one-input {
      width: 100%;
      position: relative;
      font-size: 14px;
      display: inline-block;
      .one-input_inner {
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 045, 0.355, 1);
        width: 100%;
    
        &:focus {
          outline: none;
          border-color: #409eff;
        }
        // input禁用样式
        &.is-disabled {
          background-color: #f5f7fa;
          border-color: #e4e7ed;
          color: #c0c4cc;
          cursor: not-allowed;
        }
      }
    }
    // 控制清除图标和眼睛图标的位置，suffix表示后缀。如果带小图标了就要有这个类
    .one-input_suffix {
      .one-input_inner {
        padding-right: 30px;
      }
      .one-input_suffix {
        position: absolute;
        right: 10px;
        height: 100%;
        top: 0;
        line-height: 40px;
        text-align: center;
        color: #c0c4cc;
        transition: all 0.3s;
        z-index: 900;
        i {
          color: #c0c4cc;
          font-size: 28px;
          cursor: pointer;
          transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        .vh-icon-yanjing-active {
          color: blue;
        }
      }
    }
    </style>

## dialog组件 ##

> 参数说明：

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>参数描述</th> 
   <th>参数类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>对话框标题</td> 
   <td>string</td> 
   <td>提示</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>宽度</td> 
   <td>string</td> 
   <td>50%</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>与顶部的距离</td> 
   <td>string</td> 
   <td>15vh</td> 
  </tr> 
  <tr> 
   <td>visible</td> 
   <td>是否显示dialog（支持sync修饰符）</td> 
   <td>boolean</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

> 事件说明：

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>事件描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>opened</td> 
   <td>模态框显示事件</td> 
  </tr> 
  <tr> 
   <td>closed</td> 
   <td>模态框关闭事件</td> 
  </tr> 
 </tbody> 
</table>

第一步：在 `src / components / dialog.vue`，创建一个 `dialog.vue`的文件

第二步：在main.js中全局注册组件

import oneDialog from './components/dialog.vue'
    Vue.component(oneDialog.name, oneDialog)

第三步：在项目中使用

<div class="row">
          <one-button class="m20" icon="camera" @click="visible=true">按钮</one-button>
          <one-dialog width="60%" top="80px" :visible.sync="visible">
            <template v-slot:title>
              <h3 style="color:red">我是标题</h3>
            </template>
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
            <template v-slot:footer>
              <one-button type="primary" @click="visible=false">确定</one-button>
              <one-button @click="visible=false">取消</one-button>
            </template>
          </one-dialog>
        </div>
    
    <script>
    export default {
      name: 'App',
      data () {
        return {
          visible: false
        }
      }
    }
    </script>

> dialog组件，完整代码：

<template>
      <transition name="dialog-fade">
        
        <div class="one-dialog_wrapper" v-show="visible" @click.self="handleClose">
          <div class="one-dialog" :style="{width:width,marginTop:top}">
            <div class="one-dialog_header">
              
              <slot name="title">
                <span class="one-dialog_title">{
       {title}}</span>
              </slot>
              <button class="one-dialog_headerbtn" @click="handleClose">
                <i class="vh-icon-chahao"></i>
              </button>
            </div>
            <div class="one-dialog_body">
              
              
              <slot></slot>
            </div>
            <div
              class="one-dialog_footer"
              style="display: flex; justify-content: flex-end;"
              v-if="$slots.footer"
            >
              <slot name="footer"></slot>
            </div>
          </div>
        </div>
      </transition>
    </template>
    
    <script>
    export default {
      name: 'oneDialog',
      props: {
        title: {
          type: String,
          default: '提示'
        },
        width: {
          type: String,
          default: '50%'
        },
        top: {
          type: String,
          default: '15vh'
        },
        // 控制对话框的显示和隐藏
        visible: {
          type: Boolean,
          default: false
        }
      },
      methods: {
        handleClose () {
          // 冒号后面不能有空格
          this.$emit('update:visible', false)
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    // 动画
    .dialog-fade-enter-active {
      animation: fade 0.3s;
    }
    .dialog-fade-leave-active {
      animation: fade 0.3s reverse;
    }
    @keyframes fade {
      0% {
        opacity: 0;
        // transform: translateY(-20px);
      }
      100% {
        opacity: 1;
        // transform: translateY(0);
      }
    }
    // 样式
    .one-dialog_wrapper {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: auto;
      margin: 0;
      z-index: 2001;
      background-color: rgba(0, 0, 0, 0.5);
      .one-dialog {
        position: relative;
        margin: 15vh auto 50px;
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        width: 30%;
        &_header {
          padding: 20px 20px 10px;
          .one-dialog_title {
            line-height: 24px;
            font-size: 18px;
            color: #303133;
          }
          .one-dialog_headerbtn {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 0;
            background: transparent;
            border: none;
            outline: none;
            cursor: pointer;
            font-size: 16px;
            .vh-icon-duihao1 {
              color: 909399;
            }
          }
        }
        &_body {
          padding: 30px 20px;
          color: #606266;
          font-size: 14px;
          word-break: break-all;
        }
        &_footer {
          padding: 10px 20px 20px;
          text-align: right;
          box-sizing: border-box;
          ::v-deep .one-button:first-child {
            margin-right: 20px;
          }
        }
      }
    }
    </style>

## radio组件 ##

> 参数说明：

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>参数描述</th> 
   <th>参数类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>v-model</td> 
   <td>双向绑定</td> 
   <td>Boolean</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>单选框和value值</td> 
   <td>string，num，Boolean</td> 
   <td>50%</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>与顶部的距离</td> 
   <td>string</td> 
   <td>15vh</td> 
  </tr> 
  <tr> 
   <td>visible</td> 
   <td>是否显示dialog（支持sync修饰符）</td> 
   <td>boolean</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

第一步：

*  在 `src / components / radio.vue`，创建一个 `radio.vue`的文件
 *  在 `src / components / radio-group.vue`，创建一个 `radio-group.vue`的文件

第二步：在main.js中全局注册组件

import oneRadio from './components/radio.vue'
    import oneRadioGroup from './components/radio-group.vue'
    
    Vue.component(oneRadioGroup.name, oneRadioGroup)
    Vue.component(oneRadio.name, oneRadio)

第三步：在项目中使用，定义：`gender: '1'`

<one-radio label="1" v-model="gender">男</one-radio>
    <one-radio label="0" v-model="gender">女</one-radio>
    
     <one-radio-group v-model="gender">
          <one-radio label="1">男</one-radio>
          <one-radio label="0">女</one-radio>
     </one-radio-group>

> radio.vue 组件，完整代码：

<template>
      
      <label class="one-radio" :class="{'is-checked': label == model}">
        <span class="one-radio_input">
          <span class="one-radio_inner"></span>
          <input type="radio" class="one-radio_original" :value="label" :name="name" v-model="model" />
        </span>
        <span class="one-radio_label">
          
          <slot></slot>
          <template v-if="!$slots.default">{
       {label}}</template>
        </span>
      </label>
    </template>
    <script>
    export default {
      name: 'oneRadio',
      props: {
        label: {
          type: [String, Number, Boolean],
          default: ''
        },
        // 这里不指定类型：因为最终接收的是label值
        value: null,
        // 单选框一般作为表单元素，可能会传name属性
        name: {
          type: String,
          default: ''
        }
      },
      inject: {
        RadioGroup: {
          default: ''
        }
      },
      // 计算属性
      computed: {
        model: {
          get () {
            // 获取传入的value值
            return this.isGroup ? this.RadioGroup.value : this.value
          },
          set (value) {
            // 触发父组件给当前组件注册的input事件
            this.isGroup ? this.RadioGroup.$emit('input', value) : this.$emit('input', value)
          }
        },
        // 用于判断radio是否被radioGroup包裹，使用 !! 把任意类型的值转换为布尔值
        isGroup () {
          return !!this.RadioGroup
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    .one-radio {
      color: #606266;
      font-weight: 500;
      line-height: 1;
      position: relative;
      cursor: pointer;
      display: inline-block;
      white-space: nowrap;
      outline: none;
      font-size: 14px;
      margin-right: 30px;
      -moz-user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      .one-radio_input {
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        display: inline-block;
        line-height: 1;
        position: relative;
        vertical-align: middle;
        .one-radio_inner {
          border: 1px solid #dcdfe6;
          border-radius: 100%;
          width: 14px;
          height: 14px;
          background-color: #fff;
          position: relative;
          cursor: pointer;
          display: inline-block;
          box-sizing: border-box;
          &:after {
            width: 4px;
            height: 4px;
            border-radius: 100%;
            background-color: #fff;
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.15s ease-in;
          }
        }
        // 隐藏输入框
        .one-radio_original {
          opacity: 0;
          outline: none;
          position: absolute;
          z-index: -1;
          top: 0;
          left: 0px;
          right: 0;
          bottom: 0;
          margin: 0;
        }
      }
      .one-radio_label {
        font-size: 14px;
        padding-left: 10px;
      }
    }
    // 选中的样式
    .one-radio.is-checked {
      .one-radio_input {
        .one-radio_inner {
          border-color: #409eff;
          background-color: #409eff;
          &:after {
            transform: translate(-50%, -50%) scale(1);
          }
        }
      }
      .one-radio_label {
        color: #409eff;
      }
    }
    </style>

> radio-group.vue 完整代码：

<template>
      <div class="one-radio-group">
        <slot></slot>
      </div>
    </template>
    <script>
    export default {
      name: 'oneRadioGroup',
      provide () {
        return {
          RadioGroup: this
        }
      },
      props: {
        // 组件接收到了value值，我们需要触发这个组件的input事件
        // provide 与 inject  用来做祖孙之间得组件通讯
        value: null
      }
    }
    </script>

## switch组件 ##

第一步：在 `src / components / switch.vue`，创建一个 `switch.vue`的文件

第二步：在main.js中全局注册组件

import oneSwitch from './components/switch.vue'
    
    Vue.component(oneSwitch.name, oneSwitch)

第三步：在项目中使用

<one-switch 
         v-model="active" 
         active-color="#13ce66" 
         inactive-color="#ff4949" 
     	 name="username">
     </one-switch>

> switch.vue 组件，完整代码：

<template>
      <div class="one-switch" :class="{'is-checked':value}" @click="handleClick">
        <span class="one-switch_core" ref="core">
          <span class="one-switch_button"></span>
        </span>
        <input type="checkbox" class="one-switch_input" :name="name" ref="input" />
      </div>
    </template>
    
    <script type="text/javascript">
    export default {
      name: 'oneSwitch',
      data () {
        return {
    
        }
      },
      props: {
        value: {
          type: Boolean,
          default: false
        },
        activeColor: {
          type: String,
          default: ''
        },
        inactiveColor: {
          type: String,
          default: ''
        },
        name: {
          type: String,
          default: ''
        }
      },
      mounted () {
        // 修改开关颜色
        this.setColor()
        // 控制checkbox的选中效果
        this.$refs.input.checked = this.value
      },
      methods: {
        async handleClick () {
          this.$emit('input', !this.value)
          /**
           * 点击的时候修改背景色，等待value发生变化再 setColor；数据修改后，等待DOM更新，再修改按钮的颜色
           */
          await this.$nextTick()
          this.setColor()
          this.$refs.input.checked = this.value
        },
        // 设置颜色
        setColor () {
          if (this.activeColor || this.inactiveColor) {
            var color = !this.value ? this.activeColor : this.inactiveColor
            this.$refs.core.style.borderColor = color
            this.$refs.core.style.backgroundColor = color
          }
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .one-switch {
      display: inline-block;
      align-items: center;
      position: relative;
      font-size: 14px;
      line-height: 20px;
      vertical-align: middle;
      .one-switch_core {
        margin: 0;
        display: inline-block;
        position: relative;
        width: 40px;
        height: 20px;
        border: 1px solid #dcdfe6;
        outline: none;
        border-radius: 10px;
        box-sizing: border-box;
        background: #dcdfe6;
        cursor: pointer;
        transition: border-color 0.3s, background-color 0.3s;
        vertical-align: middle;
        .one-switch_button {
          position: absolute;
          top: 1px;
          left: 1px;
          border-radius: 100%;
          transition: all 0.3s;
          width: 16px;
          height: 16px;
          background-color: #fff;
        }
      }
    }
    // 选中样式
    .is-checked {
      .one-switch_core {
        border-color: #409eff;
        background-color: #409eff;
        // 移动圆球
        .one-switch_button {
          transform: translateX(20px);
        }
      }
    }
    // 隐藏input标签
    .one-switch_input {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      margin: 0;
    }
    </style>

## checkbox组件 ##

第一步：

*  在 `src / components / checkbox.vue`，创建一个 `checkbox.vue`的文件
 *  在 `src / components / checkbox-group.vue`，创建一个 `checkbox-group.vue`的文件

第二步：在main.js中全局注册组件

import oneCheckBox from './components/checkbox.vue'
    import oneCheckBoxGroup from './components/checkbox-group.vue'
    
    Vue.component(oneCheckBoxGroup.name, oneCheckBoxGroup)
    Vue.component(oneCheckBox.name, oneCheckBox)

第三步：在项目中使用

<one-check-box v-model="active">是否选中</one-check-box>
    
    <one-check-box-group v-model="hobby">
          <one-check-box label="游戏"></one-check-box>
          <one-check-box label="电脑"></one-check-box>
          <one-check-box label="象棋"></one-check-box>
    </one-check-box-group>
    
    <script>
    export default {
      name: 'App',
      data () {
        return {
          active: false,
          hobby: ['游戏', '电脑', '象棋']
        }
      },
      methods: {
    
      }
    }
    </script>

> checkbox.vue 组件，完整代码：

<template>
      <label class="one-checkbox" :class="{'is-checked':isChecked}">
        <span class="one-checkbox_input">
          <span class="one-checkbox_inner"></span>
          <input
            type="checkbox"
            class="one-checkbox_original"
            :name="name"
            v-model="model"
            :value="label"
          />
        </span>
        <span class="one-checkbox_label">
          
          <slot></slot>
          <template v-if="!$slots.default">{
       {label}}</template>
        </span>
      </label>
    </template>
    <script>
    export default {
      name: 'oneCheckBox',
      inject: {
        CheckboxGroup: {
          default: ''
        }
      },
      props: {
        value: {
          type: Boolean,
          default: false
        },
        label: {
          type: String,
          default: ''
        },
        name: {
          type: String,
          default: ''
        }
      },
      computed: {
        model: {
          get () {
            // 如果使用 CheckboxGroup 进行包裹，就获取 CheckboxGroup 传递的value值；否则获取本身的value值
            return this.isGroup ? this.CheckboxGroup.value : this.value
          },
          set (value) {
            // 同理：如果使用包裹触发父组件的input事件；否则触发本身的input事件
            this.isGroup ? this.CheckboxGroup.$emit('input', value) : this.$emit('input', value)
            console.log(value)
          }
        },
        // isGroup 函数返回值 是一个布尔值 true 或者 false ; !! 可以将任意类型转换为布尔类型；如果使用 CheckboxGroup 包裹返回值就是true
        isGroup () {
          return !!this.CheckboxGroup
        },
        isChecked () {
          // 如果group包裹，判断label是否在model中
          // 如果没有group包裹,直接使用model
          return this.isGroup ? this.model.includes(this.label) : this.model
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    .one-checkbox {
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      position: relative;
      cursor: pointer;
      display: inline-block;
      white-space: nowrap;
      user-select: none;
      margin-right: 30px;
      .one-checkbox_input {
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        display: inline-block;
        line-height: 1;
        position: relative;
        vertical-align: middle;
        .one-checkbox_inner {
          display: inline-block;
          position: relative;
          border: 1px solid #dcdfe6;
          border-radius: 2px;
          box-sizing: border-box;
          width: 14px;
          height: 14px;
          background-color: #fff;
          z-index: 1;
          transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
            background-color 0.25s, cubic-bezier(0.71, -0.46, 0.29, 1.46);
          &:after {
            box-sizing: content-box;
            content: '';
            border: 1px solid #ffffff;
            border-left: 0;
            border-top: 0;
            height: 7px;
            left: 4px;
            position: absolute;
            top: 1px;
            transform: rotate(45deg) scaleY(0);
            width: 3px;
            transition: transform 0.15s ease-in 0.05s;
            transform-origin: center;
          }
        }
        .one-checkbox_original {
          opacity: 0;
          outline: none;
          position: absolute;
          left: 10px;
          margin: 0;
          width: 0;
          height: 0;
          z-index: -1;
        }
      }
      .one-checkbox_label {
        display: inline-block;
        padding-left: 10px;
        line-height: 19px;
        font-size: 14px;
      }
    }
    // 选中的样式
    .one-checkbox.is-checked {
      .one-checkbox_input {
        .one-checkbox_inner {
          background-color: #409eff;
          border-color: #409eff;
        }
        &:after {
          transform: rotate(45deg) scaleY(1);
        }
      }
      .one-checkbox_label {
        color: #409eff;
      }
    }
    </style>

> checkbox-group.vue 组件，完整代码：

<template>
      <div class="one-checkbox-group">
        <slot></slot>
      </div>
    </template>
    <script>
    export default {
      name: 'oneCheckBoxGroup',
      provide () {
        return {
          CheckboxGroup: this
        }
      },
      props: {
        value: {
          type: Array
        }
      }
    }
    </script>

## form表单组件 ##

第一步：

*  在 `src / components / form.vue`，创建一个 `form.vue`的文件
 *  在 `src / components / form-item.vue`，创建一个 `form-item.vue`的文件

第二步：在main.js中全局注册组件

import oneForm from './components/form.vue'
    import oneFormItem from './components/form-item.vue'
    
    Vue.component(oneFormItem.name, oneFormItem)
    Vue.component(oneForm.name, oneForm)

第三步：在项目中使用

<one-form v-model="model" label-width='100px'>
       <one-form-item label="用户名">
         <one-input placeholder="请输入用户名" v-model="model.username" width="180px">
         </one-input>
       </one-form-item>
     </one-form>
    
    <script>
    export default {
      name: 'App',
      data () {
        return {
          model: {
            username: '',
            active: true
          }
        }
      },
      methods: {
    
      }
    }
    </script>

> form.vue 组件，完整代码：

<template>
      <div class="one-form">
        <slot></slot>
      </div>
    </template>
    <script>
    export default {
      name: 'oneForm',
      provide () {
        return {
          Form: this
        }
      },
      props: {
        model: {
          type: Object,
          required: true
        },
        labelWidth: {
          type: String,
          default: '80px'
        }
      }
    }
    </script>

> form-item.vue 组件，完整代码：

<template>
      <div class="one-form-item">
        <label :style="labelStyle" class="one-form-item_label">{
       {label}}</label>
        <div class="one-form-item_content">
          <slot></slot>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'oneFormItem',
      props: {
        label: {
          type: String,
          default: ''
        }
      },
      inject: ['Form'],
      computed: {
        labelStyle () {
          return {
            width: this.Form.labelWidth
          }
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    .one-form-item {
      margin-bottom: 25px;
      .one-form-item_label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
      }
      .one-form-item_content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
        overflow: hidde;
      }
    }
    </style>

# 封装成ui组件库 #

我们在前面已经将组件全部封装完毕了，现在我们要将组件打包成组件库，上传到github上。

由于是模仿element-ui进行的组件封装，所以在发布时也是用element-ui的打包结构。

## 目录调整 ##

我们新建一个vue项目，并且在根目录创建两个文件夹 `packages` 和 `examples`

*  packages：用于存放所有的组件以及字体图标。
    
    具体做法：`将之前写好的组件以及字体图标copy到新建项目的packages路径下`
 *  examples：用于进行测试，把src改为examples
    
    具体做法：`将App.vue和main.js放到examples路径下`

在项目根目录下创建 `vue.config.js`文件，并进行如下配置：`直接复制使用`

*  通过设置`entry`属性将入口文件设置为`examps路径下的main.js文件`
 *  通过`chainWebpack`对项目进行配置，使用babel处理可以将高版本语法转成低版本语法

const path = require('path')
    module.exports = { 
      pages:{ 
        index:{ 
          // 修改项目入口文件
          entry:'examples/main.js',
          template:'public/index.html',
          filename:'index.html'
        }
      },
      // 扩展webpack配置,使webpages加入编译
      chainWebpack: config => { 
        config.module
        .rule('js')
        .include.add(path.resolve(__dirname,'packages')).end()
        .use('babel')
        .loader('babel-loader')
        .tap(options => { 
          return options
        })
      }
    }

在packages路径下，新建一个`index.js文件`，用于声明install对象

1.  我们将所有的组件和字体图标引入到index.js文件中
2.  声明conpoments数组，将组件全部放到这个数组中
3.  定义install方法，在Vue中注册所有的组件
4.  判断是否直接引入了文件，如果引入了，则不需要调用Vue.use()方法
5.  导出install对象

> index.js 文件 ，完整代码：

// 整个包的入口
    // 统一导出
    // 导出颜色选择器组件
    import Button from './button'
    import Dialog from './dialog'
    import Input from './input'
    import Checkbox from './checkbox'
    import Radio from './radio'
    import RadioGroup from './radio-group'
    import Switch from './switch'
    import CheckboxGroup from './checkbox-group'
    import Form from './form'
    import FormItem from './form-item'
    import './fonts/iconfont.css'
     
    const components = [
      Button,
      Dialog,
      Input,
      Checkbox,
      Radio,
      RadioGroup,
      Switch,
      CheckboxGroup,
      Form,
      FormItem
    ]
    // 定义install方法
    const install = function (Vue) { 
      // 注册所有的组件
      components.forEach(component => { 
        Vue.component(component.name, component)
      })
    }
    // 判断是否直接引入文件，如果是，就不用调用Vue.use()
    if (typeof window !== 'undefined' && window.Vue) { 
      install(window.Vue)
    }
    // 导出install方法
    export default { 
      install
    }

## 打包组件库 ##

vue-cli给开发者提供了很多构建目标的命令，可以将我们的vue项目构建成应用、库或者Web Components组件。

我们需要构建成库，所以我们在vue-cli官方文档中找到相应命令：

vue-cli-service build --target lib

所以我们在`package.json`文件中的 `script`下加入该条指令，并且命名为`lib`，

需要注意的是，我们需要在打包指令后面加上需要打包的路径，这里我们指定为 `packages/index.js`。

"scripts": { 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "lib":"vue-cli-service build --target lib packages/index.js"
      }

然后我们在终端中使用lib（npm run lib）命令就可以对packages/index.js指定的组件进行打包了。

打包完成后，会默认生成一个名为dist的路径，我们的打包文件就在这个路径下。

在dist路径下我们看到有多个js文件，这是因为打包生成了多种js规范的文件

## 组件库上传前的准备工作 ##

将README.md文件中的内容进行处理，我的处理方式是将原来的内容全部删除，新增了项目介绍和个人介绍：

- 初始化vue项目
        vue created demo
     
    - 安装组件库
        npm add one-ui
     
    - 全局导入
        import OneUI form 'one-ui'
        import 'one-ui/lib/one.css'
     
        Vue.use(OneUI)

在package.json文件中声明了个人信息

{ 
      "name": "xxxxx",
      "version": "0.1.0",
      "private": false,
      "main": "dist/one-ui-upload.umd.min.js",
      "author": { 
        "name": "xxx",
        "CSDN": "xxx",
        "github":"xxxx"
      },

## github管理项目 ##

我们使用github管理项目，首先要有一个github的账号，这部分不多做介绍了。

在有账号的情况下，我们到自己账号的仓库中新建一个仓库，来保存我们本次的项目代码

创建好项目库后，在本地项目中右键进入git指令页面。

git status
    git add .
    git commit -m '提交'
    
    // 复制仓库提示的命令：
    git remote add origin git@github.com:weizhuren/one-ui.git
    git push -u origin master

## 组件库上传到npm ##

第一步、设置`package.json`中的配置项

*  如果想把包发布到npm上，`package.json`中的`private必须为fasle`
 *  并且name必须为npm上没有的包，否则不能上传
 *  指定入口文件 `"main": "dist/one-ui-upload.umd.min.js"`

第二步、根目录下增加一个`.npmigore`文件

这个文件的作用是将一些不需要上传到npm的路径、文件进行忽略，我们在上传到npm时就不会把这部分上传了。因为我们已经将项目打包好了，所以我们只用上传dist路径下的打包文件，不需要上传源码了。

# 忽略目录
    examples/
    packages/
    public/
     
    # 忽略指定文件
    vue.config.js
    babel.config.js
    *.map

第三步、上传到npm。这里需要注意的是，密码是密文，不会显示。

1.  如果安装了nrm，需要保证当前的源时是npm。
2.  使用`npm login`登录。（需要自己提前注册npm账号）

PS E:\vue封装组件\my-ui> npm login
    Username: **
    Password: ****
    Email: (this IS public) **

1.  使用`npm publish`命令直接发布到npm上