上面做的是在输入框内鼠标双击进行当前时间的显示,代码如下:
<input class="medicalHistoryBlur" type="text" style="width: 5vw" v-model="formInput['a' + item]"
@dblclick="setTime('a' + item)" />
上面HTML代码的class类名是将输入框的样式做成一条可以输入内容的线条,dblclick 事件在双击元素时会生成一个事件。当在非常短的时间内单击两次元素时,将触发该事件。我们还可以使用JavaScript的 addEventListener()方法来触发双击事件。
// 日期时间赋值
setTime(key) {
this.$set(
this.formInput,
key,
this.formatTimer1(new Date())
);
},
formatTimer1: function (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? "0" + MM : MM;
let d = date.getDate();
d = d < 10 ? "0" + d : d;
let h = date.getHours();
h = h < 10 ? "0" + h : h;
let m = date.getMinutes();
m = m < 10 ? "0" + m : m;
let s = date.getSeconds();
s = s < 10 ? "0" + s : s;
return y + "-" + MM + "-" + d + " " + h + ":" + m;
},
鼠标双击后执行 setTime 这个方法,需要修改某个对象的属性,并且需要确保这个属性是双向绑定的,需使用$set()方法,进行强制视图更新。
formatTimer1这个方法就是获取当前时间的集合;具体看实际开发中需要什么,末尾return 什么,这是由你个人来决定的。