- 演示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bef179377d51724458bef2ca675a6f83.gif)
- 使用
<input-click :data.sync="value"></input-click>
<template>
<div class="input-click-main" @click="myclick">
<div style="width: 100%" v-show="show">{{mydata}}</div>
<el-input v-if="type==1" ref="myinput" type="input" v-model="mydata" v-show="!show" @blur="myblur"></el-input>
<el-input v-else ref="myinput" type="textarea" :rows="5" v-model="mydata" v-show="!show" @blur="myblur"></el-input>
</div>
</template>
<script>
export default{
props:{
data:{
type:String,
default:''
},
type:{
type:Number,
default:1
}
},
data(){
return{
show:true,
mydata:this.data
}
},
methods:{
myclick(){
this.show=false;
if(this.type==1){
this.$nextTick(_ => {
this.$refs.myinput.$refs.input.focus();
});
}
else{
this.$nextTick(_ => {
this.$refs.myinput.$refs.textarea.focus();
});
}
},
myblur(){
this.show=true;
},
},
watch:{
mydata:{
handler(val){
this.$emit('update:data',val);
},
deep:true,
},
data:{
handler(val){
this.mydata=this.data;
},
deep:true,
}
}
}
</script>
<style>
.input-click-main{
min-height: 50%;
min-width: 50%;
display: inline-block;
cursor: pointer;
}
</style>
详情
https://qinyushop.com/Vue/#vue%E5%B0%81%E8%A3%85%E7%82%B9%E5%87%BB%E7%BC%96%E8%BE%91%E7%BB%84%E4%BB%B6