b674603f by weimo934

merge(plzl):关闭重置数据

1 parent 950a2ebc
1 <template>
2 <div class="main">
3 <div class='input' contenteditable placeholder='请输入文字'>
4 <div @mouseover="mouseover($event)" @mouseleave="mouseLeave($event)" v-for="(item,index) in datas"
5 :key="index" style="float: left;"
6 class="item">
7 {{item}};
8 <div style="float: right;display: none" @click="itemClick(index)">X</div>
9 </div>
10
11 </div>
12 </div>
13 </template>
14
15 <script>
16 export default {
17 name: "emailInput",
18 data() {
19 return {
20 datas: ['111', '222', '333', '444', '555', '666', '777', '888', '999'],
21 }
22 },
23 props: {},
24 methods: {
25 mouseover(e) {
26 // e.target 是你当前点击的元素
27 // 是你绑定事件的元素
28 let dom = e.currentTarget.firstElementChild
29 dom.style = "float: right;display: block";
30 // 获得点击元素的前一个元素
31 /* e.currentTarget.previousElementSibling.innerHTML
32 // 获得点击元素的第一个子元素
33 e.currentTarget.firstElementChild
34 // 获得点击元素的下一个元素
35 e.currentTarget.nextElementSibling
36 // 获得点击元素中id为string的元素
37 e.currentTarget.getElementById("string")
38 // 获得点击元素的string属性
39 e.currentTarget.getAttributeNode('string')
40 //获得点击元素的父级元素
41 e.currentTarget.parentElement
42 // 获得点击元素的前一个元素的第一个子元素的HTML值
43 e.currentTarget.previousElementSibling.firstElementChild.innerHTML*/
44
45 },
46 mouseLeave(e) {
47 let dom = e.currentTarget.firstElementChild
48 dom.style = "float: right;display: none"
49 },
50 itemClick(index){
51 this.datas.splice(index,1)
52 }
53 },
54 computed: {
55 text: function () {
56 let text = "";
57 for (let item of this.datas) {
58 text += item + ";";
59 }
60
61 return text;
62 }
63 }
64 }
65 </script>
66
67 <style scoped lang="less">
68 .main {
69 .input {
70 width: auto;
71 height: 24px;
72 line-height: 24px;
73 font-size: 14px;
74 padding: 5px 8px;
75 border: 1px solid #ddd;
76 }
77 .input:empty::before {
78 content: attr(placeholder);
79 }
80 .item{
81 cursor: pointer;
82 }
83 .item:hover {
84 border: 1px solid #BBF;
85 }
86 }
87 </style>
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
44 </el-select> 44 </el-select>
45 </td> 45 </td>
46 <td> 46 <td>
47 <input type="text" class="inputtitle" v-model="plshData.fghB"/> 47 <input type="text" class="inputtitle" v-model="plshData.fgfB"/>
48 </td> 48 </td>
49 <td> 49 <td>
50 50
......