element-plus 关于按需加载的问题
完整的引入没什么说的import { createApp } from 'vue'import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';import App from './App.vue';const app = createApp(App)app.use(ElementPlu
完整的引入没什么说的
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
------------------------------------------------------------
1. npm install babel-plugin-import -D yarn add babel-plugin-import -D
2.babel.config.js 中添加 plugins
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'import',
{
libraryName: 'element-plus',
customStyleName: (name) => {
name = name.slice(3)
return `element-plus/packages/theme-chalk/src/${name}.scss`
}
}
]
]
}
3. 在入口文件中引入
app.config.globalProperties.$ELEMENT = option
这个也是添加全局参数的方法,照理说用下面的方法后,插件会自动添加掉vue的实例中,如果你在ctx的对象中找不到,可以用上面的方法
const { ctx } = getCurrentInstance(); // 方式一,这种方式只能在开发环境下使用,生产环境下的ctx将访问不到
const { proxy } = getCurrentInstance(); // 方式二,此方法在开发环境以及生产环境下都能放到组件上下文对象(推荐)
import 'element-plus/packages/theme-chalk/src/base.scss'
import { ElMessage, ElMessageBox } from 'element-plus'
app.use(ElMessageBox)
Element Plus 为 app.config.globalProperties
添加了全局方法 $message。因此在 vue instance 中可以采用在 method 中调用 this.$message
方法唤起 ElMessage
this.$message.warning('商品至少保留一件')
ElMessage.success(options) 官网上有就不多说了
----------------------------------------------------------------------
如果你完整引入了 Element,它会为 app.config.globalProperties
添加如下全局方法:$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 MessageBox
。调用参数为:
$msgbox(options)
$alert(message, title, options)
或$alert(message, options)
$confirm(message, title, options)
或$confirm(message, options)
$prompt(message, title, options)
或$prompt(message, options)
this.$confirm('请选择一件商品', {
showClose: true
})
this.$confirm('加入购物车, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'success'
}).then(() => {
this.$message({
type: 'success',
message: '添加成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '您已取消'
})
})
更多推荐
所有评论(0)