vue3访问全局变量以及element引进css

首先定义全局变量变量

app.config.globalProperties.name = '我爱L'

应用配置 | Vue.js

获取实例,访问全局属性

 const internalInstance = getCurrentInstance()

 internalInstance.appContext.config.globalProperties // 访问 globalProperties

访问某个全局属性

<template>
  <div>{{proxy.name}}</div>
</template>

<script setup>
 import { getCurrentInstance } from 'vue'
const {proxy} = getCurrentInstance();

</script>

如果是想使用某个组件的api,可以挂载全局,但是css不显示咋办?

 

 

官网有写到

 快速开始 | Element Plus

因为是ElMessageBox,所以按照他的规则找到

import 'element-plus/es/components/message-box/style/css'

完整代码

<script setup>
 import { getCurrentInstance } from 'vue'
 import 'element-plus/es/components/message-box/style/css'
const {proxy} = getCurrentInstance() 
 proxy.$Alert('This is a message', 'Title', {
    confirmButtonText: 'OK',
    callback: (action ) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })

</script>