vue双击编辑

单击@click和双击@dblclick

click事件是一种常见的事件类型，用于在用户点击某个元素时触发相应的操作。
dblclick指令可以将一个方法绑定到特定元素的双击事件上。当用户在该元素上双击时，Vue会调用绑定的方法。

当一个元素绑定了click和dbclick，如果用户双击时，同时click也会相应，这时需要用延时处理。

<template>
  <div class="about">
    <h1>This is an about page</h1>
	<!-- <button @click="handleClick" @dblclick="handleDoubleClick">点击</button> -->
	
	<div class="list">
		<div v-for="(item,i) in list" :key="i" class="item">
			<div @click="handleClick(i)" @dblclick="handleDoubleClick(i)" v-show="!item.has">
				<el-button type="primary" >{{item.name}}</el-button>
			</div>
			<div v-show="item.has">
				<InputDetail :item="item" @close="close" @edit="edit"></InputDetail>
			</div>
			
		</div>
	</div>
	
	
  </div>
</template>

<script>
var timeId = null;
import InputDetail from "@/components/Input/InputUi.vue";

export default{
	components:{
		InputDetail
	},
	data(){
		return{
			list:[
				{id:1, name:'111', has:false},
				{id:2, name:'222', has:false},
				{id:3, name:'333', has:false},
				{id:4, name:'444', has:false},
			]
		}
	},
	methods:{
		edit(e){
			console.log(e)
		},
		close(){
			this.list.forEach((item,i)=>{
				item.has = false
			})
		},
		handleClick(e){
			// 清除上一次的定时器
			clearTimeout(timeId)
			timeId = setTimeout(() => {
				// 单击事件执行逻辑
				// ...
				console.log('单击')
				// 清除定时器
				clearTimeout(timeId)
			}, 250)
		},
		handleDoubleClick(i){
			console.log(i)
			// 清除单击事件的定时器
			clearTimeout(timeId)
			// 双击事件执行逻辑
			// ...
			console.log('双击')
			
			this.list.forEach((item,index)=>{
				item.has = false
			})
			this.list[i].has = true
			
		}
	}
}
</script>

<style>
.item{ margin-bottom: 10px;}
</style>

组件

<template>
	<div>
		<el-row>
			<el-col :span="4"><el-input v-model="text"></el-input></el-col>
			<el-col :span="4">
				<el-button type="primary" size="mini" @click="save">保存</el-button>
				<el-button type="warning" size="mini" @click="close">取消</el-button>
			</el-col>
		</el-row>
		
	</div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
	item:{
		type:Object,
		default:{}
	}
  },
  data(){
	  return{
		  text:''
	  }
  },
  created(){
	  this.text = this.item.name
  },
  methods:{
	  save(){
		let obj = {
			id:this.item.id,
			name:this.text,
			old:this.item
		}
		this.$emit('edit',obj)  
	  },
	  close(){
		  this.$emit('close')
	  }
  }
};
</script>

<style>
</style>