记一次配合自定义指令使用mixin混入的总结

xx同事写了一个弹窗指令v-drag-modal，指令里用到了一个叫dragModal的组件，当绑定了v-drag-modal指令的dom元素被点击时，会打开弹窗。该弹窗指令是这么封装的：

Vue.directive('dragModal', {
            bind(el, binding, vnode) {
                function clickHandler(e) {
                    // 这里判断点击的元素是否是本身，是本身，则返回
                    if (el.contains(e.target)) {
                        dargModal.create({
                            ...binding.value.modal,
                        })
                    }
                }
                // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
                el.__vueDragModalButtonClick__ = clickHandler
                document.addEventListener('click', clickHandler)
            },
            update() {
                console.log('更新')
            },
            unbind(el, binding) {
                // 解除事件监听
                document.removeEventListener('click', el.__vueDragModalButtonClick__)
                delete el.__vueDragModalButtonClick__
            },
        })

之前的需求是点击某个按钮时，根据路由的传参去打开另外一个页面，所以在另外的这个页面在create生命周期我对路由参数进行接收和处理，现在要使用这个弹窗指令和组件完成，而且因为好多地方都会用到这个指令，并对指令传过来的参数进行处理，我使用了mixin混入进行统一处理：

指令里的binding.value需要接收带modal属性的对象，而modal属性值也需要是一个对象。 这里传给v-drag-modal的对象，我也写进了混入里面(其实和混入没有关系，只是为了方便书写)，混入长这个样子：

export default {
    created() {
        if (Object.keys(this.$attrs).length) {
            this.params = {
                ...this.$attrs,
            }
            if (this.params.type) {
                this.tabName = this.params.type
            } else {
                this.tabName = this.$route.params.type
            }
            if (this.tabName === 'myIssue' || this.tabName === 'myDraft') {
                this.getMaterialList()
            }
        }
    },
    data() {
        return {
            params: {
                type: '',
            },
            marketEnum: {
                // 创建内容
                0: {
                    title: '创建内容',
                    path: '/madara/supermarket/issueArticle/index',
                    params: {
                        type: 'createContent',
                    },
                },
                // 我的发布
                1: {
                    title: '我的发布',
                    path: '/madara/supermarket/issueArticle/index',
                    params: {
                        type: 'myIssue',
                    },
                },
                // 草稿箱
                2: {
                    title: '草稿箱',
                    path: '/madara/supermarket/issueArticle/index',
                    params: {
                        type: 'myDraft',
                    },
                },
            },
        }
    },
    methods: {
        option(type) {
            return {
                modal: this.marketEnum[type],
            }
        },
    },
}

重点在于需要打开的那个弹窗（也就是接收组件）需要使用这个混入，相当于把之前对路由参数的处理统一放入混入了

然后我也是第一次知道指令传过来的参数可以在this.$attrs中进行接收。