VUE this.$xxx 自定义全局变量方法
公司的项目,用到了很多类似的方法,在方法中直接使用this.$xxx 但是代码太复杂,没研究出什么原理,就百度查了下,百度有个类似的,但是代码不全,搞了好久才明白原理,下面分享下。做了个公共的简易弹窗,下图是程序的基本结构,用得上的都框起来了index.js:import modal from '../view/Modal.vue'function installModal(Vue) {Objec
·
公司的项目,用到了很多类似的方法,在方法中直接使用this.$xxx 但是代码太复杂,没研究出什么原理,就百度查了下,百度有个类似的,但是代码不全,搞了好久才明白原理,下面分享下。
做了个公共的简易弹窗,下图是程序的基本结构,用得上的都框起来了
index.js:
import modal from '../view/Modal.vue'
function installModal(Vue) {
Object.defineProperty(Vue.prototype, '$modal', {
get() {
let div = document.createElement('div')
document.body.appendChild(div);
return (title) => {
const Constructor = Vue.extend(modal)
const Instance = new Constructor({
data() {
return {
title: title,
show: true,
x: 0,
y: 0,
node: null,
isCanMove: false,
}
}
}).$mount(div);
};
}
});
};
export default installModal;
Modal.vue:
<template>
<div
class="modal-bg"
v-show="show"
@mousemove="modalMove"
@mouseup="cancelMove"
>
<div class="modal-container">
<div class="modal-header" @mousedown="setStartingPoint">
{{ title }}
</div>
<div class="modal-main">
<slot></slot>
</div>
<div class="modal-footer">
<button @click="hideModal">取消</button>
<button @click="submit">确认</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "modal",
// props: {
// show: {
// type: Boolean,
// default: false,
// },
// title: {
// type: String,
// default: "",
// },
// },
data() {
return {
x: 0,
y: 0,
node: null,
isCanMove: false,
};
},
mounted() {
this.node = document.querySelector(".modal-container");
},
methods: {
hideModal() {
// 子组件向父组件传值
// this.$emit("hideModal");
this.show = false;
},
submit() {
// this.$emit("submit");
this.show = false;
},
setStartingPoint(e) {
this.x = e.clientX - this.node.offsetLeft;
this.y = e.clientY - this.node.offsetTop;
this.isCanMove = true;
},
modalMove(e) {
if (this.isCanMove) {
this.node.style.left = e.clientX - this.x + "px";
this.node.style.top = e.clientY - this.y + "px";
}
},
cancelMove() {
this.isCanMove = false;
},
},
};
</script>
<style scoped>
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.modal-container {
background: #fff;
border-radius: 10px;
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-header {
height: 56px;
background: #409eff;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: move;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: center;
height: 57px;
border-top: 1px solid #ddd;
}
.modal-footer button {
width: 100px;
}
.modal-main {
padding: 15px 40px;
}
</style>
main.js:
import Vue from 'vue'
import App from './App'
import modal from './common/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
Vue.use(modal)
最后在逻辑里面调用即可
点击按钮出现了可移动的弹窗
核心逻辑就是index.js文件里面导入vue文件,然后写一个方法,把vue增加到父页面去,最后在vue初始化的时候use这个自己创建的方法即可
更多推荐
已为社区贡献4条内容
所有评论(0)