饿了么中隐藏的实用小组件

258 阅读1分钟

1、el-scrollbar(简洁滚动条)

可结合组件使用,例如树组件不想使用原生滚动条,效果即为鼠标移入显示滚动条

image.png

代码如下:

        <el-scrollbar  class="treeBox">
             // 包含目标组件即可
        </el-scrollbar>

css样式代码调整如下:

// 需隐藏原生滚动条
::v-deep {
    .el-scrollbarwrap {
      overflow: hidden;
    }
  }

2、ElImageViewer(图片预览工具)

可提供图片查看简单旋转,全屏,放大缩小等基础工具 效果如下:

image.png 代码如下:

    //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
        })
    },