基本介绍

• 做什么？

Vue-从0到1搭建UI组件库

• 哪些内容？

封装常见的功能性组件（Button、Modal、Form相关）

• 涉及知识点

vue基础语法
组件基本语法
组件通讯(sync,provide,inject)
插槽的使用
props校验
过渡与动画处理
计算属性与监听属性
v-model语法糖
vue插件机制
npm发布

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

效果演示

• 初始化vue项目

vue create demo

• 安装组件库

npm install xy-ui --save
#or
yarn add xy-ui

• 全局导入

import XyUI from 'xy-ui'
import 'xy-ui/lib/xy-ui.css'

Vue.use(XyUI)

• 使用组件

<template>
  <div id="app">
    <xy-button type="success" @click="visible=true">显示登录框</xy-button>
    <xy-dialog title="用户登录" :visible.sync="visible" width="30%">
      <xy-form :model="model" label-width="80px">
        <xy-form-item label="用户名">
          <xy-input v-model="model.username" placeholder="请输入用户名" clearable></xy-input>
        </xy-form-item>
        <xy-form-item label="用户密码">
          <xy-input v-model="model.password" placeholder="请输入用户密码" show-password></xy-input>
        </xy-form-item>
        <xy-form-item label="即时配送">
          <xy-switch v-model="model.soon" active-color="green" inactive-color="red"></xy-switch>
        </xy-form-item>
        <xy-form-item label="爱好">
          <xy-checkbox-group v-model="model.hobby">
            <xy-checkbox label="篮球"></xy-checkbox>
            <xy-checkbox label="足球"></xy-checkbox>
            <xy-checkbox label="乒乓球"></xy-checkbox>
          </xy-checkbox-group>
        </xy-form-item>
        <xy-form-item label="性别">
          <xy-radio-group v-model="model.gender">
            <xy-radio label="1">男</xy-radio>
            <xy-radio label="0">女</xy-radio>
          </xy-radio-group>
        </xy-form-item>
      </xy-form>
      <template v-slot:footer>
        <xy-button type="primary" @click="login">登录</xy-button>
        <xy-button @click="visible=false">取消</xy-button>
      </template>
    </xy-dialog>
  </div>
</template>

button组件

参数支持

事件支持

click事件支持

结构

@click="handleClick"

dialog组件

参数支持

事件支持

插槽说明

input组件

参数支持

事件支持

switch组件

参数支持

事件支持

radio组件

radio的基本使用

参数支持

checkbox组件

参数支持

checkbox-group组件

form组件