仿element-ui 实现自己组件库＜3＞

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-