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