在Java语言中，contains可以用于判断str1是否包含str2

 

原生JS中是有contains方法的

但它并不是字符串方法，，仅用于判断DOM元素的包含关系，参数是Element类型

 

 

 

 若要在JS中判断俩字符串的包含关系，用indexOf()

 

div

<div style="width: 100%; padding: 1px;position: relative;" class="aaa" v-clickoutside="handleClose"></div>

 

构造函数

const clickoutside = {
    // 初始化指令
    bind (el, binding, vnode) {
        function documentHandler (e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
            if (el.contains(e.target)) {
                return false
            }
            // 判断指令中是否绑定了函数
            if (binding.expression) {
                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                binding.value(e)
            }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler
        document.addEventListener('click', documentHandler)
    },
    update () { },
    unbind (el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__)
        delete el.__vueClickOutside__
    }
}

 

在vue里注册构造的函数

export default {
    directives: { clickoutside },

 

methods

handleClose () { // 点击除了页面其他地方关闭车型选择
    this.isSelected = false;
    this.addButtonStyle;
},

 

具体

<template>
  <div style="width: 100%; padding: 1px;position: relative;" class="aaa" v-clickoutside="handleClose">
    <div v-on:click="iconC" >
      <a-input  v-model="tbvalue" class="sss"></a-input>
      <span style="position: absolute;right: 10px;top: 0"><a-icon type="down" class="iconStyle" /></span>
    </div>
    <div v-bind:class="addButtonStyle"
         style="position: absolute;width: 100%;z-index: 999;background-color: white">
      <a-table
        :columns="columns"
        :dataSource="data"
        bordered
        :pagination="false"
        size="small"
        :customRow="onCustomRow"
        v-on:blur="blur()"

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

<script>
    const clickoutside = {
        // 初始化指令
        bind (el, binding, vnode) {
            function documentHandler (e) {
                // 这里判断点击的元素是否是本身，是本身，则返回
                if (el.contains(e.target)) {
                    return false
                }
                // 判断指令中是否绑定了函数
                if (binding.expression) {
                    // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                    binding.value(e)
                }
            }
            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.__vueClickOutside__ = documentHandler
            document.addEventListener('click', documentHandler)
        },
        update () { },
        unbind (el, binding) {
            // 解除事件监听
            document.removeEventListener('click', el.__vueClickOutside__)
            delete el.__vueClickOutside__
        }
    }
    export default {
        name: 'ASelectTable',
        props: {
            abc:{
                type: String,
                default:'',
                required: false
            }
        },
        /**在vue里注册构造的函数**/
        directives: { clickoutside },
        data(){
            return {
                tbvalue: [],
                isSelected:false,
                columns: [
                    {
                        title: '编码',
                        align: "center",
                        dataIndex: 'code'
                    },
                    {
                        title: '名称',
                        align: "center",
                        dataIndex: 'name'
                    }
                ],
                data: [
                    {
                        key: '1',
                        name: 'John Brown',
                        code: 32,
                    },
                    {
                        key: '2',
                        name: 'Jim Green',
                        code: 42,
                    },
                    {
                        key: '3',
                        name: 'Joe Black',
                        code: 32,
                    },
                ],
            }
        },
        created(){
        },
        computed:{
            addButtonStyle(){
                if(this.isSelected){
                    return 'showTable';
                }else{
                    return 'hideTable';
                }
            }

        },
        methods: {
            handleClose () { // 点击除了页面其他地方关闭车型选择
                this.isSelected = false;
                this.addButtonStyle;
            },
            iconC(){
                this.isSelected = true;
                this.addButtonStyle;
            },
            blur(e){
                console.log(e.target)
            },
            onCustomRow(record,index){
                // console.log(record,index)
                return {
                    props: {

                    },
                    on: {
                        click: () => {
                            this.tbvalue=this.data[record.key-1].name;
                            // console.log(this.data[record.key-1].name);
                            this.isSelected = false;
                            this.addButtonStyle;

                        },
                    },
                };
            }
        },
    }
</script>
<style scoped lang="less">
  .showTable {
    display: block;
  }
  .hideTable {
    display: none;
  }
  .iconStyle{
    /*position: absolute;*/
    /*right: -200px;*/
    /*bottom:30px ;*/
    /*left: 60%;*/
  }
  .sss{
    margin-right: 20px;
  }

</style>