欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-plus 在vue3 中不生效的原因解決方法(element-plus引入)

 更新時間:2022年08月16日 10:37:47   作者:顏值與實力并存源  
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

vue3.0 不兼容 element-ui ,于是推出了element-plus

1.安裝element-plus (3種方式 )

npm install element-plus --save (推薦)
yarn add element-plus
pnpm install element-plus

2. 在main.js種引用

import 'element-plus/theme-chalk/index.css' 					   //默認css樣式 英文
import Element from 'element-plus'              				   //引入插件
import zhCn from 'element-plus/es/locale/lang/zh-cn'               //引入中文包

 //全局 使用element-plus  
																   //中文使用
 createApp(App).use(Element,{locale:zhCn}).mount('#app')
																   //默認英文使用
  createApp(App).use(Element).mount('#app')

引入最重要看官方引入方法
官方引入方法:
https://element-plus.org/es-ES/guide/quickstart.html#configuracion-global
正常引入不生效的原因如下

原因一

main.js中加載順序不對

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')

原因二

  <el-tree
          ref="elTreeRef"
          :data="menus"
          show-checkbox
          node-key="id"
          :props="{ children: 'children', label: 'name' }"
          @check="handleCheckChange"
        >

import { ElTree } from 'element-plus'

 const elTreeRef = ref<InstanceType<typeof ElTree>>()
    const editCallback = (item: any) => {
      const leafKeys = menuMapLeafKeys(item.menuList)
      nextTick(() => {
        console.log(elTreeRef.value)
        elTreeRef.value?.setCheckedKeys(leafKeys, false)
      })
    }

有的時候全局注冊,但是不生效的原因,只能在template中可以使用,在js邏輯中使用組件名稱方法還是需要單獨引入的

到此這篇關(guān)于element-plus 在vue3 中不生效的原因解決方法(element-plus引入)的文章就介紹到這了,更多相關(guān)element-plus vue3 不生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vuex的基本概念、項目搭建以及入坑點

    Vuex的基本概念、項目搭建以及入坑點

    Vuex是一個專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,這篇文章主要介紹了Vuex的基本概念、項目搭建以及入坑點,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • Vue3中多個彈窗同時出現(xiàn)的解決思路

    Vue3中多個彈窗同時出現(xiàn)的解決思路

    這篇文章主要介紹了Vue3中多個彈窗同時出現(xiàn)的解決思路,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • vue實現(xiàn)過渡動畫Message消息提示組件示例詳解

    vue實現(xiàn)過渡動畫Message消息提示組件示例詳解

    這篇文章主要為大家介紹了vue實現(xiàn)過渡動畫Message消息提示組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • 利用Vue實現(xiàn)卡牌翻轉(zhuǎn)的特效

    利用Vue實現(xiàn)卡牌翻轉(zhuǎn)的特效

    這篇文章主要介紹了如何利用Vue實現(xiàn)一個春節(jié)抽??撁?,采用了卡牌翻轉(zhuǎn)的形式。文中的實現(xiàn)方法講解詳細,快跟隨小編一起學習一下吧
    2022-02-02
  • Windows系統(tǒng)下使用nginx部署vue2項目的全過程

    Windows系統(tǒng)下使用nginx部署vue2項目的全過程

    nginx是一個高性能的HTTP和反向代理服務(wù)器,因此常用來做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Windows系統(tǒng)下使用nginx部署vue2項目的相關(guān)資料,需要的朋友可以參考下
    2023-03-03
  • vue項目做屏幕自適應(yīng)處理方式

    vue項目做屏幕自適應(yīng)處理方式

    這篇文章主要介紹了vue項目做屏幕自適應(yīng)處理方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue 全局環(huán)境切換問題

    vue 全局環(huán)境切換問題

    小編在開發(fā)使經(jīng)常會碰到全局切換問題,今天小編給大家?guī)硪黄坛探o大家介紹vue 全局環(huán)境切換問題,感興趣的朋友一起看看吧
    2019-10-10
  • Vue2實現(xiàn)圖片的拖拽,縮放和旋轉(zhuǎn)效果的示例代碼

    Vue2實現(xiàn)圖片的拖拽,縮放和旋轉(zhuǎn)效果的示例代碼

    這篇文章主要為大家介紹了如何基于vue2?實現(xiàn)圖片的拖拽、旋轉(zhuǎn)、鼠標滾動放大縮小等功能。文中的示例代碼講解詳細,感興趣的小伙伴可以嘗試一下
    2022-11-11
  • vue在取對象長度length時候出現(xiàn)undefined的解決

    vue在取對象長度length時候出現(xiàn)undefined的解決

    這篇文章主要介紹了vue在取對象長度length時候出現(xiàn)undefined的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue prop屬性傳值與傳引用示例

    vue prop屬性傳值與傳引用示例

    今天小編就為大家分享一篇vue prop屬性傳值與傳引用示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11

最新評論