目录
input 组件封装
v-model用在组件上
显示和隐藏密码
封装switch组件
实现转换的功能
设置checkbox
input 组件封装
首先input组件的基本框架和样式：
<div class="miao-input"><input class="miao-input_inner" >
</div><style lang="scss" scoped>.miao-input {width: 100%;position: relative;font-size: 14px;display: inline-block;.miao-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 .2s cubic-bezier(.645, 045, .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的意思是后面如果有后缀的话，触发该样式.miao-input_suffix {.miao-input_inner {padding-right: 30px;}.miao-input_suffix {position: absolute;right: 10px;height: 100%;top: 0;line-height: 40px;text-align: center;color: #c0c4cc;transition: all .3s;z-index: 900;i {color: #c0c4cc;font-size: 14px;cursor: pointer;transition: color .2s cubic-bezier(.645, .045, .355, 1);}}}
</style>v-model用在组件上
首先app.vue里：
<miao-input v-model="username">
</miao-input>data(){
return {
username:'ss'
}
}
在input.vue里：
props:{
value:{
type:String,
default:''
}
} <input class="miao-input_inner" :class="{'is-disabled': disabled}":placeholder="placeholder" :type="type" :name="name":disabled="disabled":value="value">除了value之外还要触发事件
@input="handleinput" methods:{handleinput(e){
// this.value=e.target.value是不行的因为直接改了父组件传的参数
this.$emit('input',e.target.value)
// 触发这个事件}}添加图标
<span class="miao-input_suffix"><i class="miao-input_icon miao-icon-cancel" v-if="clearable" @click="clear"></i><i class="miao-input_icon miao-icon-visible" v-if="showPassword"></i></span><div class="miao-input" :class="{'miao-input_suffix': showSuffix}">computed:{showSuffix(){return this.clearable || this.showPassword}},点击图标清空内容：
clear(){this.$emit('input','')// 父组件就会清空}显示和隐藏密码
<i class="miao-input_icon miao-icon-visible" v-if="showPassword" @click="handlePassword"></i> :type="showPassword ? (passwordVisible ? 'text':'password'):type"
如果传来show-password判断是否需要切换密码显示，如果不传不判断
封装switch组件
只要是表单元素都支持name属性
switch初始模版：
<template><div class="one-switch"><span class="one-switch_core"><span class="one-switch_button"></span></span></div>
</template>css:
.miao-switch {display: inline-block;align-items: center;position: relative;font-size: 14px;line-height: 20px;vertical-align: middle;.miao-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;.miao-switch_button {position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}}
}// 选中样式
.is-checked {.miao-switch_core {border-color: #409eff;background-color: #409eff;.miao-switch_button {transform: translateX(20px);}}
}// 隐藏input标签
.miao-switch_input {position: absolute;width: 0;height: 0;opacity: 0;margin: 0;
}v-model绑定组件里的value和触发的事件：
props:{value:{type:Boolean,default:false}},methods:{handleClick(){this.$emit('input',!this.value)}}实现转换的功能
<label class="miao-switch" :class="{'is-checked': value}" @click="handleClick">// 选中样式
.is-checked {.miao-switch_core {border-color: #409eff;background-color: #409eff;.miao-switch_button {transform: translateX(20px);}}
}根据传入switch.vue的两个颜色来控制：
nexttick是基于promsie的封装，这里用语法糖async和await，用nexttick等数据修改后dom更新完毕再更改按钮颜色
methods:{async handleClick(){this.$emit('input',!this.value)//点击时候还要修改背景色//等待value发生变化再setcolor//把数据改了发生更新//nexttick基于promise封装//数据修改后等待dom更新再修改按钮颜色await this.$nextTick()this.setColor()},setColor() {//修改开关颜色,必须传入其一的颜色if (this.activeColor || this.inactiveColor) {let color = this.value ? this.activeColor : this.inactiveColorthis.$refs.core.style.borderColor = colorthis.$refs.core.style.backgroundColor = color}}},mounted(){this.setColor()}
设置checkbox
用户使用switch组件实际上当成表单元素使用，可能用到name属性，需要在switch组件中添加一个checkbox，当值改变时候，需要设置checkbox的value值
同步checkbox里的checked值，一进来mounted和切换时候设置值
点击label相当于点击input框
<!-- 外面的大框架如果用label会触发两次，抵消了 --><input class="miao-switch_input" type="checkbox" :name="name" ref="input"> async handleClick(){this.$emit('input',!this.value)//点击时候还要修改背景色//等待value发生变化再setcolor//把数据改了发生更新//nexttick基于promise封装//数据修改后等待dom更新再修改按钮颜色await this.$nextTick()this.setColor()this.$refs.input.checked = this.value},mounted(){this.setColor()//控制checkbox的值this.$refs.input.checked=this.value//input值和value同步}具体代码：
GitHub - Alicca-miao/component-library-vue-ui-Contribute to Alicca-miao/component-library-vue-ui- development by creating an account on GitHub.
https://github.com/Alicca-miao/component-library-vue-ui-
