写了上一篇文章后,我尝试了在一个js文件里面放两个公共控件,结果一直报方法找不到的问题,初学vue,有些语法不太了解,研究了一下午,最后解决,分享下。
首先是js最后的export和export default的区别,简单的说,export default输出单个值,引用的时候可以随便写函数名字,exprot输出多个值,引用的时候需要加括号,把引用的函数写进去,所以下面的这种写法是错的
最后报了个不是方法的错误,正确的如下图
最后贴一下index.js和另外一个弹窗的代码
index.js:
/*
* @Author: your name
* @Date: 2022-01-26 16:59:07
* @LastEditTime: 2022-02-07 17:08:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \vuepro\src\common\index.js
*/
import alert from '../components/alert.vue'
import modal from '../view/Modal.vue'
function installAlert(Vue) {
Object.defineProperty(Vue.prototype, '$alert111', {
get() {
let div = document.createElement('div')
document.body.appendChild(div);
return (message) => {
const Constructor = Vue.extend(alert)
const Instance = new Constructor({
data() {
return {
message: message,
show: true
}
}
}).$mount(div);
};
}
});
};
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 installAlert
// export default installModal
export {
installAlert,
installModal,
};
alert.vue:
<!--
* @Author: your name
* @Date: 2022-01-26 16:53:31
* @LastEditTime: 2022-02-07 14:21:31
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \vuepro\src\components\alert.vue
-->
<template>
<!-- <transition name="dialog-fade"> -->
<div
v-if="show"
class="modal fade dialog-modal"
role="dialog"
data-backdrop="false"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header row">
<h5 class="modal-title col-md-4">提示</h5>
<button type="button" class="close" aria-label="Close" @click="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-offset-1">{{ message }}</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="close">
确定
</button>
</div>
</div>
</div>
</div>
<!-- </transition> -->
</template>
<script>
export default {
methods: {
close: function () {
this.show = false;
},
},
};
</script>
程序架构,逻辑相关的都标出来了: