merge(plzl):关闭重置数据
Showing
2 changed files
with
88 additions
and
1 deletions
src/components/emailInput/emailInput.vue
0 → 100644
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> |
-
Please register or sign in to post a comment