您的位置: 首页  >  文章  >  vue实现双击编辑

vue实现双击编辑

分类: 文章 • 2025-03-29 14:02:57

JS 实现双击编辑


原始 HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="form-group">
<label>姓名：</label>
<span>张三</span>
</div>
<div class="form-group">
<label>个人介绍：</label>
<span>我就是我，颜色不一样的烟火！</span>
</div>
</body>
</html>


原始 页面效果：

vue实现双击编辑


JS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="form-group">
<label>姓名：</label>
<span Î¿ndblclick="edit(this)">张三</span>
</div>
<div class="form-group">
<label>个人介绍：</label>
<span Î¿ndblclick="edit(this)">我就是我，颜色不一样的烟火！</span>
</div>
 
<script>
function edit (element) {
// èŽ·å–要编辑的文本内容
var oldHtml = element.innerHTML;
 
// åˆ›å»ºä¸€ä¸ªæ–°çš„ input è¾“入框
var newInput = document.createElement('input');
 
// ä¸ºæ–°çš„ input添加属性
newInput.type = "text";
newInput.value = oldHtml;
 
// æ¸…空当前元素的文本内容
element.innerHTML = '';
 
// æŠŠæ–°çš„ input æ¡† è¿½åŠ åˆ°å½“前元素节点中
element.appendChild(newInput);
 
// è®¾ç½®é€‰æ‹©æ–‡æœ¬çš„内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
newInput.setSelectionRange(0, oldHtml.length)
 
// ä¸ºæ–° input æ¡†èŽ·å–焦点
newInput.focus();
 
// ä¸ºæ–°çš„ input æ·»åŠ å¤±åŽ»ç„¦ç‚¹äº‹ä»¶
newInput.onblur = function () {
// åˆ¤æ–­å¤±åŽ»ç„¦ç‚¹æ—¶ï¼Œinput æ¡†çš„值是否与原值相同，相同则表示没有修改，返回原值；不同则表示有改动，返回新值
element.innerHTML = this.value == oldHtml? oldHtml : this.value;
}
}
</script>
</body>
</html>



效果：

vue实现双击编辑


VUE 实现双击编辑


代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<template>
<div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list">
<td>
<span v-if="!editing" @dblclick="edit">`item`.`wenzi`</span>
<input type="text"
class="form-control"
ref="input"
v-if="editing"
:value="item.wenzi"
v-model="item.wenzi"
@blur="save">
</td>
<td>
<span v-if="!editing" @dblclick="edit">`item`.`gender`</span>
<input type="text"
class="form-control"
ref="input"
v-if="editing"
:value="item.gender"
v-model="item.gender"
@blur="save">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
 
<script type="text/ecmascript-6">
export default {
data: function () {
return {
editing: false,
list: [
{wenzi: '迪热力巴', gender: '女性'},
{wenzi: '鹿晗', gender: '男性'},
],
}
},
methods: {
edit: function () {
this.editing = true
this.$nextTick(function () {
this.$els.input.focus()
})
},
save: function () {
this.editing = false
}
}
}
</script>
 
<style lang="scss" rel="stylesheet/scss" scoped>
 
 
</style>



效果：

vue实现双击编辑


当然，这种效果在实际应用中可能不太友好，我们也可以用按钮来控制

vue实现双击编辑

本文转自   frwupeng517   51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1949914




相关推荐