Vue.component 点击 div盒子 外面区域控制隐藏

需求：选择审批意见（类似下拉框展示），可以删除单条数据

1.html页面

<select-audit-content v-model="auditContent" :act-id="actId"></select-audit-content>

2.js

/*
*   选择审批意见
*   actId 流程节点id
* */
Vue.component('selectAuditContent', {
    template: ''+
        '<div class="selectContent-box" :value="defaultValue" @click="handleBodyClick($event)">'+
            '<input class="selectContent-ipt" placeholder="常用语选择" v-model="defaultValue" @focus="focus" readonly="readonly" autocomplete="off" :style="showList ? s_ipt_focus : \'\'">'+
            '<div class="selectContent" v-show="showList">'+
                '<ul>'+
                    '<li v-for="item in contentList" @click="selectContent(item.auditOpinion)">' +
                        '<span class="selectContent-text">{{ item.auditOpinion }}</span>' +
                        '<a href="javascript:;" @click="removeContent(item.id)" class="selectContent-remove">删除</a>' +
                    '</li>'+

                    '<li v-if="contentList.length == 0" style="cursor:default;color:#626675; background-color: initial;">' +
                        '<span class="selectContent-text">--没有查到相关选项--</span>' +
                    '</li>'+
                '</ul>'+
            '</div>'+
            '<div style="clear: both;"></div>'+
        '</div>'+
      '',
    data:function() {
        return {
            defaultValue: null,
            showList: false,
            contentList: [],
            s_ipt_focus: {
                'border-radius': '10px 10px 0 0',
                'border-bottom': '0',
                'padding-bottom': '12px',
            }
        }
    },
    props:{
        actId:[String],
    },
    methods:{
        initContentList: function(){
        },
        //选择
        selectContent: function(auditOpinion){
            this.defaultValue = auditOpinion;
            this.showList = false; //隐藏列表
        },
        //移除
        removeContent: function(id){
        },
        focus: function (event) {
            //获取焦点时
            this.showList = true; //显示列表
        },
        handleBodyClick: function (event){
            // 点击div区域外的地方，隐藏列表
            //console.log(this.$refs.selectAuditContent.contains(event.target));
            if (!this.$el.contains(event.target)) {
                this.showList = false; //隐藏列表
            }
        },
    },
    mounted: function(){
        this.initContentList();

        //增加监听事件
        this.$nextTick(() => {
            //document.querySelector('body').addEventListener('click', this.handleBodyClick);
            document.addEventListener('click', this.handleBodyClick, true);

            //存在顶级
            if (top) {
                top.document.addEventListener('click', this.handleBodyClick, true);
            }
        })
    },
    beforeDestroy: function(){
        //销毁监听事件
        //document.querySelector('body').removeEventListener('click', this.handleBodyClick);
        document.removeEventListener('click', this.handleBodyClick, true);

        //存在顶级
        if (top) {
            top.document.removeEventListener('click', this.handleBodyClick, true);
        }
    },
    watch:{
        defaultValue: function (val) {
            // vue 原生的方法 return 出去
            this.$emit('input', val);
        },
        actId: function (val) {
            this.initContentList();
        }
    },
});

3.css样式

/* 选择审批意见 开始 */
.selectContent-box {
    width: 590px;
    overflow: auto !important;
}
.selectContent-box .selectContent-ipt {
    height: 38px;
    padding: 10px 0 10px 14px;
    width: 590px;
    background: transparent;
    outline: 0;
    -webkit-appearance: none;
    border: 2px solid #2bb7b4;
    border-radius: 10px;
}
.selectContent {
    height: auto;
    width: 590px;
    top: 38px;
    border-radius: 0 0 10px 10px;
    border: 2px solid #2bb7b4 !important;
    border-top: 0!important;
    box-shadow: none;
    z-index: 1;
    background: #ffffff;
    position: absolute;
}
.selectContent ul {
    margin: 0 14px 0;
    padding: 8px 0 7px;
    background: 0 0;
    border-top: 2px solid #f5f5f6;
}
.selectContent ul li {
    width: auto;
    padding: 0 8px 0 14px;
    position: relative;
    cursor: default;
    overflow: hidden;
    margin-left: -14px;
    margin-right: -14px;
    color: #626675;
    line-height: 28px;
    background: 0 0;
}
.selectContent ul li:hover{cursor:pointer;color:#315efb;text-decoration:none;background:#F1F3FD;}
.selectContent ul li a:hover{text-decoration: underline}
.selectContent .selectContent-text{
    width: 450px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    float: left;
}
.selectContent .selectContent-remove {
    right: 10px;
    position: absolute;
    color: #ff0000 !important;
    float: right;
}

/* 选择审批意见 结束 */

4.效果