✊不积跬步，无以至千里；不积小流，无以成江海。

2021年11月17日

参与项目 中台能力运营中心
是否为核心功能 是
是否协助解决 否
协助解决人 姚溪
整体耗时 2小时

工作重点

  1. 中台能力运营平台服务体验优化需求

遇到的问题和解决思路

遇到的问题

资源管理界面，应用卡片不超一行时，不显示点击查看按钮

image.png

解决思路

应用卡片的宽度固定，应用卡片的数量确定。 只需要动态获取应用卡片容器的宽度 应用卡片的宽度 / 应用卡片的宽度 < 应用卡片的数量 的bool值来显示和隐藏点击查看按钮

解决方案

使用 element-resize-detector 插件

  1. 在vue中引入element-resize-detector插件

    npm install element-resize-detector

  2. 导入

    import elementResizeDetectorMaker from ‘element-resize-detector’

  3. 创建实例

    由于当前dom元素是由数据驱动加载的(通俗易懂的就是用v-for循环出来的) 所以把创建实例放在了 updated() 中

  1. updated() {
  2.   const erdm = elementResizeDetectorMaker()
  3.   erdm.listenTo(this.$refs.container[0], element => {
  4.     this.containerWidth = element.offsetWidth;
  5.   })
  6. },

  1. 获取应用卡片的宽度 / 应用卡片的宽度 < 应用卡片的数量的bool值

    1. isShowButton(num) {
    2. return this.containerWidth / 225 <= num;
    3. },

  2. 使用上述bool值

    使用 v-if 或者 v-show 展示或者隐藏按钮

个人总结

  1. element-resize-detector插件
    1. npm install element-resize-detector

  1. import elementResizeDetectorMaker from ‘element-resize-detector’

  2. 创建实例需要注意，一般是放在 created() 中就可以作用

因为在created()在大多数情况下能通过 this.$refs 拿到相应的dom元素 但不排除有其他可能，例如本例需要放在 updated() 中

  1. // 创建实例
  2. const erdm = elementResizeDetectorMaker()
  4. //监听元素
  5. erdm.listenTo(dom, function(element) {
  6.     // element指代dom元素
  7.   // 再此函数中进行dom操作
  8.   // 可以获取dom元素高度，宽度或者其他需要监听的属性
  9. })

详情参考 链接