1、el-scrollbar(简洁滚动条)
可结合组件使用,例如树组件不想使用原生滚动条,效果即为鼠标移入显示滚动条
代码如下:
<el-scrollbar class="treeBox">
// 包含目标组件即可
</el-scrollbar>
css样式代码调整如下:
// 需隐藏原生滚动条
::v-deep {
.el-scrollbarwrap {
overflow: hidden;
}
}
2、ElImageViewer(图片预览工具)
可提供图片查看简单旋转,全屏,放大缩小等基础工具 效果如下:
代码如下:
//1.导入组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
//2.页面内注册
export default {
components: {
ElImageViewer
},
}
//3.组件内使用 showModule:控制组件显隐,cancelPreview:点击关闭的回调,url-list:图片url数组
<el-image-viewer
v-if="showModule"
:on-close="cancelPreview"
:url-list="[pic]"
/>
//4.应用场景据交互而定,我这里只是简单的转换为base64后显隐 js代码如下
imgPreview(row) {
this.tableLoading = true
view({ fileId: row.ID_FILE })
.then((res) => {
return (
'data:image/png;base64,' +
btoa(
new Uint8Array(res.data).reduce(
(data, byte) => data + String.fromCharCode(byte),
''
)
)
)
})
.then((data) => {
this.pic = data
this.tableLoading = false
this.showModule = true
})
},