本文讲述如何使用Vue.extend()
构造弹窗组件,并实现全局调用
点击这里查看,查看如何使用render()
,构造一个弹窗组件
准备工作
在components
文件夹下新建Tools
文件夹用于存放所有的全局组件,Tools
文件夹下新增Notice
文件夹,并在其中新建Notice.vue
和Notice.js
修改Notice.js
在Notice.js
中添加如下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| import Vue from 'vue'; import Notice from './Notice.vue';
const notice = Vue.extend(Notice); let VM = ''; function AModal() { return function(type, props) { if (!props.text) return; if (!VM) { const oDiv = document.createElement('div'); VM = new notice({ el: oDiv }); document.body.appendChild(VM.$el); } VM.type = type; VM.text = props.text; VM.timeout = !props.timeout&&props.timeout!=0?3000:props.timeout; VM.show = true; setTimeout(() => { VM.show = false; }, VM.timeout); }; } let SHOW = AModal(); function warning(props) { SHOW('warning', props); } function info(props) { SHOW('info', props); } function success(props) { SHOW('success',props); } function error(props) { SHOW('error', props); } export default { warning, success, info, error };
|
编写弹窗组件
在Notice.vue
中,添加如下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <template> <div v-if="show" class="box"> <div :class="type"> <strong>{{text}}</strong> </div> </div> </template>
<script> export default { props: ["show", "text", "type"], } </script> <style> .box { position: fixed; width: 100%; top: 16px; left: 0; text-align: center; pointer-events: none; border: grey 3px solid; box-sizing: border-box; } .success { background: #4caf50 !important; } .info { background: #2196f3 !important; } .warning { background: #ffc107 !important; } .error { background: #ff1744 !important; } </style>
|
注册全局组件
在main.js
中,添加如下代码
1 2 3
| import notice from './components/Tools/Notice/Notice'
Vue.prototype.$notice = notice
|
使用弹窗组件
在需要使用该组件的vue文件中
1 2
| this.$notice.info({text:"Joker真帅",timeout:9999}) this.$notice.success({text:"Joker真帅"})
|
就可以尽情使用了