<template>
    <div class="main">
        <div class='input' contenteditable placeholder='请输入文字'>
            <div @mouseover="mouseover($event)" @mouseleave="mouseLeave($event)" v-for="(item,index) in datas"
                 :key="index" style="float: left;"
                 class="item">
                {{item}};
                <div style="float: right;display: none" @click="itemClick(index)">X</div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "emailInput",
        data() {
            return {
                datas: ['111', '222', '333', '444', '555', '666', '777', '888', '999'],
            }
        },
        props: {},
        methods: {
            mouseover(e) {
                // e.target 是你当前点击的元素
                // 是你绑定事件的元素
                let dom = e.currentTarget.firstElementChild
                dom.style = "float: right;display: block";
                // 获得点击元素的前一个元素
                /* e.currentTarget.previousElementSibling.innerHTML
                 // 获得点击元素的第一个子元素
                 e.currentTarget.firstElementChild
                 // 获得点击元素的下一个元素
                 e.currentTarget.nextElementSibling
                 // 获得点击元素中id为string的元素
                 e.currentTarget.getElementById("string")
                 // 获得点击元素的string属性
                 e.currentTarget.getAttributeNode('string')
                 //获得点击元素的父级元素
                 e.currentTarget.parentElement
                 // 获得点击元素的前一个元素的第一个子元素的HTML值
                 e.currentTarget.previousElementSibling.firstElementChild.innerHTML*/

            },
            mouseLeave(e) {
                let dom = e.currentTarget.firstElementChild
                dom.style = "float: right;display: none"
            },
            itemClick(index){
                this.datas.splice(index,1)
            }
        },
        computed: {
            text: function () {
                let text = "";
                for (let item of this.datas) {
                    text += item + ";";
                }

                return text;
            }
        }
    }
</script>

<style scoped lang="less">
    .main {
        .input {
            width: auto;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            padding: 5px 8px;
            border: 1px solid #ddd;
        }
        .input:empty::before {
            content: attr(placeholder);
        }
        .item{
            cursor: pointer;
        }
        .item:hover {
            border: 1px solid #BBF;
        }
    }
</style>