Element組件中組件的使用問題

一：el-image組件問題

直接使用el-image組件會導致一個問題：當用戶點擊圖片的時候頁面滾動條消失！

原因：組件API中有這樣一條：

參數	說明	類型	默認值
scroll-container	開啟懶加載后，監聽 scroll 事件的容器	string / HTMLElement	最近一個 overflow 值為 auto 或 scroll 的父元素

 

 

 

 

解決方法：全局設置樣式頁面滾動優先級：body {overflow: scroll !important;} 問題解決

 

---

 

el-image大圖預覽無效

參數	說明	類型
preview-src-list	開啟圖片預覽功能	Array

 

 

 

 

解決方法：查看綁定的數據是否為一個數組，v-for循環遍歷數組綁定給src，大圖預覽綁定循環的數組

---

el-image懶加載無效

參數	說明	類型	默認值
lazy	是否開啟懶加載	boolean	false

 

 

 

解決方式：查看圖片布局是否是flex布局，flex布局默認加載所有圖片，懶加載優先級低

　　二：el-backtop組件使用

el-backtop組件直接復制粘貼沒有效果

解決方法：將組件放入最外層的盒子里面第一個，去掉 target 屬性使用（默認的target屬性就是外層盒子）：<el-backtop :bottom="100">↑</el-backtop>

　　三：NavMenu/el-menu 導航菜單

el-menu：在頁面刷新時子菜單未展開

參數	說明	類型	默認值
router	是否使用 vue-router 的模式	boolean	false
unique-opened	是否只保持一個子菜單的展開	boolean	false
default-active	當前激活菜單的 index	string	——

 

 

 

 

 

 

解決方法：使用上面三個常用API，router開啟子菜單路由模式和unique-opened直接使用，default-active需要綁定子菜單的路由地址

寫法：:default-active="$route.path"

el-submenu不多介紹，注意設置好index和key

el-menu-item使用方式：

參數	說明	類型
index	唯一標志	string

 

 

 

 

注意這里的index綁定必須是路由地址，寫法：index="/user" 這里的路由地址必須是  “ / ”開頭，否則上面的激活綁定無效

　　四：Message和MessageBox 消息提示

message消息提示無法使用

注意引用方式和使用方式，如果是單獨引入組件：

並不是這樣使用： Vue.use(Message)

而是： Vue.prototype.$message = Message  直接更改原型

注意這里的$message可以隨意更改文本，但是最好不要更改，因為如果后期上線cdn引用的話和你的使用方式不同會造成錯誤

使用方式：　 this.$message.success('這是成功提示文本！')

　　　　this.$message.error('這是失敗提示文本!')

 

MessageBox彈框使用

同上

建議規范引入：Vue.prototype.$confirm = MessageBox.confirm

使用方式：this.$confirm('......')

　　五：Pagination/el-pagination分頁

 

 

完整分頁功能參數使用

　　<el-pagination
      @size-change="handleSizeChange"  每頁多少條
      @current-change="handleCurrentChange"  當前多少頁
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>