2.5.5. 自定义颜色 在使用switch时，希望能够自定义开关的颜色

props接收 activeColor: { type: String, default: '' }, inactiveColor: { type: String, default: '' } 封装设置颜色的方法 setColor () { if (this.activeColor || this.inactiveColor) { let color = this.value ? this.activeColor : this.inactiveColor this.$refs.core.style.borderColor = color this.$refs.core.style.backgroundColor = color } } 页面一进入调用 mounted () { // 设置颜色 this.setColor() }, 改变状态后调用 async handleClick () { this.$emit('input', !this.value) // 改变input框的值 await this.$nextTick() this.setColor() }, 2.5.6. name属性支持 用户在使用switch组件的时候，实质上是当成表单元素来使用的。因此可能会用到组件的name属性。因此需要在switch组件中添加一个checkbox，并且当值改变的时候，也需要设置checkbox的value值

结构 <input class="hm-switch__input" type="checkbox"

样式 .hm-switch__input { position: absolute; width: 0; height: 0; opacity: 0; margin: 0; } name属性的支持 name: { type: String, default: '' } 控制checkbox的值与value同步 mounted () { this.$refs.input.checked = this.value }, methods: { async handleChange () { this.$emit('input', !this.value) // 修改checkbox的值 await this.$nextTick() this.$refs.input.checked = this.value } } 2.6. radio组件 2.6.1. 前置知识点 radio的基本使用 2.6.2. 参数支持 参数名称 参数描述 参数类型 默认值 v-model 双向绑定 布尔类型 false label 单选框的value值 string，num,boolean '' name name属性 string 2.6.3. 基本结构 html结构 我是label 样式 .hm-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; -ms-user-select: none; .hm-radio__input { white-space: nowrap; cursor: pointer; outline: none; display: inline-block; line-height: 1; position: relative; vertical-align: middle; .hm-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 .15s ease-in; } } .hm-radio__original { opacity: 0; outline: none; position: absolute; z-index: -1; top: 0; left: 0px; right: 0; bottom: 0; margin: 0; } } .hm-radio__label { font-size: 14px; padding-left: 10px; } } 2.6.4. 选中的样式 .hm-radio.is-checked { .hm-radio__input { .hm-radio__inner { border-color: #409eff; background: #409eff; &:after { transform: translate(-50%,-50%) scale(1); } } } .hm-radio__label { color: #409eff; } } 2.6.5. label与插槽的处理 props接收 props: { label: { type: String, default: '' }, name: { type: String, default: '' } } 处理插槽

{{label}} 2.6.6. v-model处理 接收props数据 name: { type: String, default: '' }, value: { type: [String, Boolean, Number], default: '' } 结构 <input class="hm-radio__original" type="radio" :name="name" value="label" v-model="model"

提供计算属性 computed: { model: { get () { return this.value }, set (value) { this.$emit('input', value) } } },

控制选中样式

2.7. radio-group组件 使用radio组件的缺点，需要给每个组件都绑定v-mode,可以使用radio-group包裹

2.7.1. 前置知识 provide与inject

2.7.2. 基本结构 结构

数据

export default { name: 'HmRadioGroup', provide () { return { RadioGroup: this } }, props: { value: null } }

2.7.3. 修改radio组件 接收inject inject: { RadioGroup: { default: '' } },

计算属性判断是否包裹在group中 // 判断包裹在group中 isGroup () { return !!this.RadioGroup }

修改代码 model: { get () { return this.isGroup ? this.RadioGroup.value : this.value }, set (value) { this.isGroup ? this.RadioGroup.$emit('input', value) : this.$emit('input', value) } }

2.8. checkbox组件 2.8.1. 基本结构 {{label}}

样式

.hm-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; .hm-checkbox__input { white-space: nowrap; cursor: pointer; outline: none; display: inline-block; line-height: 1; position: relative; vertical-align: middle; .hm-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 .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46); &:after { box-sizing: content-box; content: ""; border: 1px solid #fff; border-left: 0; border-top: 0; height: 7px; left: 4px; position: absolute; top: 1px; transform: rotate(45deg) scaleY(0); width: 3px; transition: transform .15s ease-in .05s; transform-origin: center; } } .hm-checkbox__original { opacity: 0; outline: none; position: absolute; left: 10px; margin: 0; width: 0; height: 0; z-index: -1; } } .hm-checkbox__label { display: inline-block; padding-left: 10px; line-height: 19px; font-size: 14px; } }

2.8.2. 选中的样式 .hm-checkbox.is-checked { .hm-checkbox__input { .hm-checkbox__inner { background-color: #409eff; border-color: #409eff; &:after { transform: rotate(45deg) scaleY(1); } } } .hm-checkbox__label { color: #409eff; } }

2.8.3. 接收props数据 value: { type: Boolean, default: false }, name: { type: String, default: '' }, label: { type: String, default: '' }

2.8.4. 控制checked样式 控制label {{label}}

提供model计算属性 model: { get () { return this.value }, set (value) { this.$emit('input', value) } }

判断是否选中

2.9. checkbox-group组件 使用checkbox-group组件包裹checkbox

2.9.1. 结构

提供provide props: { value: { type: Array, default: function () { return [] } } }, provide () { return { CheckboxGroup: this } }

2.9.2. 修改checkbox 接收inject inject: { CheckboxGroup: { default: '' } },

修改 model: { get () { return this.isGroup ? this.CheckboxGroup.value : this.value }, set (value) { if (this.isGroup) { // 修改value属性 console.log(value, this.label) this.CheckboxGroup.$emit('input', value) } else { this.$emit('input', value) } } },
isGroup () { return !!this.CheckboxGroup }, isChecked () { // 判断是否选中 // console.log(this.model) if (this.isGroup) { return this.model.includes(this.label) } else { return this.model } }

2.10. form组件 基本结构

<script> export default { name: 'HmForm', provide () { return { Form: this } }, props: { model: { type: Object, required: true }, labelWidth: { type: String, default: '80px' } } } </script> <style> </style>

2.11. form-item组件 基本结构

<script> export default { name: 'HmFormItem', props: { label: { type: String, default: '' } }, inject: ['Form'], computed: { labelStyle () { return { width: this.Form.labelWidth } } } } </script> <style lang="scss"> .hm-form-item { margin-bottom: 25px; .hm-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; } .hm-form-item__content { line-height: 40px; position: relative; font-size: 14px; overflow: hidden; } } </style>

3. 封装成UI组件库 3.1. 目录调整 根目录创建两个文件夹packages和examples packages: 用于存放所有的组件 examples: 用于进行测试,把src改成examples

把components中所有的组件放入到packages中

把fonts放到packages中

删除原来的src目录

3.2. vue.config.js配置 新增vue.config.js配置

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

统一导出packages中所有的组件 // 统一导出 // 导入颜色选择器组件 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/font.scss'

// 存储组件列表 const components = [ Button, Dialog, Input, Checkbox, Radio, RadioGroup, Switch, CheckboxGroup, Form, FormItem ]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册 const install = function (Vue) { // 遍历注册全局组件 components.forEach(component => { Vue.component(component.name, component) }) }

// 判断是否是直接引入文件,如果是，就不用调用 Vue.use() if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) }

// 导出的对象必须具有 install，才能被 Vue.use() 方法安装 export default { install }

3.3. 测试 在examples中的main.js中进行导入测试

import Vue from 'vue' import App from './App.vue'

import HeimaUI from '../packages'

Vue.use(HeimaUI)

Vue.config.productionTip = false

new Vue({ render: h => h(App) }).$mount('#app')

4. 发布到npm与github 4.1. 发布到github 4.2. 发布到npm https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93

在scripts中新增一条 打包命令 "lib": "vue-cli-service build --target lib packages/index.js"

发布到npm 修改package.json文件

"private": false, "main": "dist/itcast-ui.umd.min.js", "author": { "name": "王贵" },

增加 .npmignore`文件

examples/ packages/ public/

vue.config.js babel.config.js *.map

npm发布 npm login npm publish