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>