``` + 使用计算属性优化 ```js computed: { showSuffix () { return this.clearable || this.showPassword } } ``` + 注册事件-清空内容和切换密码显示 ```js clear () { // console.log('123') this.$emit('input', '') } ``` + 控制密码显示 ```js data () { return { // 是否显示密码 passwordVisible: false } }, handlePasswordVisible () { // 切换type类型 this.passwordVisible = !this.passwordVisible } ``` ### 其他常见事件的支持 ```js handleFocus (e) { this.$emit('focus', e) }, handleBlur (e) { this.$emit('blur', e) }, handleChange (e) { this.$emit('change', e.target.value) } ``` ## switch组件 ### 参数支持 | 参数名称 | 参数描述 | 参数类型 | 默认值 | | ------------- | -------------------- | -------- | ------ | | v-model | 双向绑定 | 布尔类型 | false | | name | name属性 | string | text | | activeColor | 自定义的激活的颜色 | string | | | inactiveColor | 自定义的不激活的颜色 | string | | ### 事件支持 | 事件名称 | 事件描述 | | -------- | ------------------ | | change | change时触发的事件 | ### 基本结构 + 页面 ```html ``` + 样式 ```scss .hm-switch { display: inline-flex; align-items: center; position: relative; font-size: 14px; line-height: 20px; height: 20px; vertical-align: middle; .hm-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 .3s,background-color .3s; vertical-align: middle; .hm-switch__button { position: absolute; top: 1px; left: 1px; border-radius: 100%; transition: all .3s; width: 16px; height: 16px; background-color: #fff; } } } ``` ### v-mode双向绑定 + 接收value值 ```js props: { value: { type: Boolean, default: false } }, ``` + 注册点击事件 ```html

``` + 事件处理程序 ```js methods: { handleClick () { this.$emit('input', !this.value) } } ``` + 选中样式 ```scss .hm-switch.is-checked { .hm-switch__core { border-color: #409eff; background-color: #409eff; .hm-switch__button { transform: translateX(20px); } } } ``` + 控制选中样式 ```html

``` ### 自定义颜色在使用switch时，希望能够自定义开关的颜色 ```html ``` + props接收 ```js activeColor: { type: String, default: '' }, inactiveColor: { type: String, default: '' } ``` + 封装设置颜色的方法 ```js 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 } } ``` + 页面一进入调用 ```js mounted () { // 设置颜色 this.setColor() }, ``` + 改变状态后调用 ```js async handleClick () { this.$emit('input', !this.value) // 改变input框的值 await this.$nextTick() this.setColor() }, ``` ### name属性支持用户在使用switch组件的时候，实质上是当成表单元素来使用的。因此可能会用到组件的name属性。**因此需要在switch组件中添加一个checkbox，并且当值改变的时候，也需要设置checkbox的value值** + 结构 ```html ``` + 样式 ```scss .hm-switch__input { position: absolute; width: 0; height: 0; opacity: 0; margin: 0; } ``` + name属性的支持 ```js name: { type: String, default: '' } ``` + 控制checkbox的值与value同步 ```js 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 } } ``` ## radio组件 ### 前置知识点 ```js radio的基本使用 ``` ### 参数支持 | 参数名称 | 参数描述 | 参数类型 | 默认值 | | -------- | --------------- | ------------------- | ------ | | v-model | 双向绑定 | 布尔类型 | false | | label | 单选框的value值 | string，num,boolean | '' | | name | name属性 | string | | ### 基本结构 + html结构 ```html ``` + 样式 ```scss .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; } } ``` ### 选中的样式 ```js .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; } } ``` ### label与插槽的处理 + props接收 ```js props: { label: { type: String, default: '' }, name: { type: String, default: '' } } ``` + 处理插槽 ```html ``` ### v-model处理 + 接收props数据 ```js name: { type: String, default: '' }, value: { type: [String, Boolean, Number], default: '' } ``` + 结构 ```html ``` + 提供计算属性 ```html computed: { model: { get () { return this.value }, set (value) { this.$emit('input', value) } } }, ``` + 控制选中样式 ```html ``` ## radio-group组件使用radio组件的缺点，需要给每个组件都绑定v-mode,可以使用radio-group包裹 ### 前置知识 ```js provide与inject ``` ### 基本结构结构 ```html ``` 数据 ```html export default { name: 'HmRadioGroup', provide () { return { RadioGroup: this } }, props: { value: null } } ``` ### 修改radio组件 + 接收inject ```js inject: { RadioGroup: { default: '' } }, ``` + 计算属性判断是否包裹在group中 ```js // 判断包裹在group中 isGroup () { return !!this.RadioGroup } ``` + 修改代码 ```js model: { get () { return this.isGroup ? this.RadioGroup.value : this.value }, set (value) { this.isGroup ? this.RadioGroup.$emit('input', value) : this.$emit('input', value) } } ``` ## checkbox组件 ### 基本结构 ```html ``` 样式 ```scss .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; } } ``` ### 选中的样式 ```scss .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; } } ``` ### 接收props数据 ```js value: { type: Boolean, default: false }, name: { type: String, default: '' }, label: { type: String, default: '' } ``` ### 控制checked样式 + 控制label ```html ``` + 提供model计算属性 ```js model: { get () { return this.value }, set (value) { this.$emit('input', value) } } ``` + 判断是否选中 ```js ``` ## checkbox-group组件使用checkbox-group组件包裹checkbox ### 结构 ```html ``` + 提供provide ```js props: { value: { type: Array, default: function () { return [] } } }, provide () { return { CheckboxGroup: this } } ``` ### 修改checkbox + 接收inject ```js inject: { CheckboxGroup: { default: '' } }, ``` + 修改 ```js 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 } } ``` ## form组件基本结构 ```html ``` ## form-item组件基本结构 ```html ``` # 封装成UI组件库 ## 目录调整 + 根目录创建两个文件夹`packages`和`examples` ```js packages: 用于存放所有的组件 examples: 用于进行测试,把src改成examples ``` + 把components中所有的组件放入到packages中 + 把fonts放到packages中 + 删除原来的src目录 ## vue.config.js配置新增`vue.config.js`配置 ```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中所有的组件 ```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/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 } ``` ## 测试在examples中的main.js中进行导入测试 ```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') ``` # 发布到npm与github ## 发布到github ## 发布到npm [https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93](https://cli.vuejs.org/zh/guide/build-targets.html#库) + 在scripts中新增一条打包命令 ```js "lib": "vue-cli-service build --target lib packages/index.js" ``` + 发布到npm 修改package.json文件 ```js "private": false, "main": "dist/itcast-ui.umd.min.js", "author": { "name": "胡聪聪" }, ``` 增加 ``.npmignore`文件 ```js # 忽略目录 examples/ packages/ public/ # 忽略指定文件 vue.config.js babel.config.js *.map ``` + npm发布 ```js npm login npm publish ```