mixin ⽤于全局混⼊，会影响到每个组件实例，通常插件都是这样做初始化的,但是这种⽅式会影响到每个组件的 beforeCreate 钩⼦函数
//文档也不建议我们直接使⽤ mixin，我还没用过
mixins 如果多个组件中有相同的业务逻辑， 就可以将这些逻辑剥离出来，通过 mixins 混⼊代码，⽐如上拉下拉加载数据、窗体禁止拖拽。
需要注意的是 mixins 混⼊的钩⼦函数会先于组件内的钩⼦函数执⾏（生命周期），并且在遇到同名选项的时候也会有选择性的进⾏合并。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。
//用法 就是导出一个模块
//这是一个electron-vue 窗体禁止拖拽 功能
// 全局监听drag和drop事件，当用户拖入一个文件但是又不是拖入可拖拽区域的时候，将其屏蔽掉
// 避免electron应用像浏览器那样，拖入pdf或图片会自动打开
const disDrag = {
mounted () {
this.disableDragEvent()
},
methods: {
disableDragEvent () {
window.addEventListener('dragenter', this.disableDrag, false)
window.addEventListener('dragover', this.disableDrag)
window.addEventListener('drop', this.disableDrag)
},
disableDrag (e) {
const dropzone = document.getElementById('upload-area') // 这个是可拖拽的上传区
if (dropzone === null || !dropzone.contains(e.target)) {
e.preventDefault()
e.dataTransfer.effectAllowed = 'none'
e.dataTransfer.dropEffect = 'none'
}
}
},
beforeDestroy () {
window.removeEventListener('dragenter', this.disableDrag, false)
window.removeEventListener('dragover', this.disableDrag)
window.removeEventListener('drop', this.disableDrag)
}
}
export {disDrag};
//接下来就是引入了 如果是vue的话可以直接引入到APP.vue中
//这个方法可是比引入工具函数好用多了吧！可以在不同的生命周期中写逻辑，最最重要的就是引入简单呀！！！
import {disDrag} from "../assets/js/vue_disDrag";
export default {
mixins:[disDrag],
name: "test.vue",
data () {
return {
num:0
}
},
mounted() {}
