博客列表 >VUE3全局对象挂载

VUE3全局对象挂载

搁浅
搁浅原创
2023年03月02日 16:50:16453浏览

main.js

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import './registerServiceWorker'
  4. import router from './router'
  5. import store from './store'
  6. import ElementPlus,{ElLoading} from 'element-plus'
  7. import 'element-plus/dist/index.css'
  8. const app = createApp(App)
  9. app.use(store).use(router).use(ElementPlus).mount('#app')
  10. app.config.globalProperties.$ElLoading=ElLoading
  11. window.ElLoading=ElLoading//也可以挂到window对象里面

app.vue

  1. <template>
  2. <el-button type="primary" @click="overall"> As a service </el-button>
  3. </template>
  4. <script setup>
  5. import { getCurrentInstance } from 'vue';//因为vue3是组合API,所以要引入对应的(getCurrentInstance)
  6. const {proxy} = getCurrentInstance()
  7. const openFullScreen2 = () => {
  8. //const loading = window.ElLoading.service({
  9. const loading = proxy.$ElLoading.service({
  10. lock: false,
  11. text: 'Loading',
  12. background: 'rgba(0, 0, 0, 0.7)',
  13. })
  14. setTimeout(() => {
  15. loading.close()
  16. }, 1000)
  17. }
  18. </script>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议