VUE3全局对象挂载

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
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>
【文章原创作者:香港显卡服务器 http://www.558idc.com/hkgpu.html 网络转载请说明出处】