目录
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.inactiveColor
this.$refs.core.style.borderColor = color
this.$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-
