element ui 使用汇总

1. popver气泡 弹出位置太靠上 想要向下偏移 offset支持的是左右 想要向下偏移 可以给popver绑定个类 写上样式

transform: translateY(18px);

2.el-tooltip写了之后不显示 页面显示没有这个元素

记住 el-tooltip里面需要标签包裹内容
我是这样写的

   <el-tooltip effect="dark" :content="item.endAddress" placement="top">
                  {{ item.endAddress }}
   </el-tooltip>

不生效 ！！！！！加个span标签就行了

<el-tooltip effect="dark" :content="item.endAddress" placement="top">
           <span>{{ item.endAddress }}</span>
</el-tooltip>

3.页面内嵌套组件或者其他页面 根据侧边栏展开/收起 展示页面样式

先使用computed获取侧边栏展开收起的值 再watch监控此值 根据true/false 写不同的样式 如下：

 watch: {
    'sidebar.opened': {
      handler (val) {
        const node = document.querySelectorAll('.five-cards-nav-cxt')
        const node1 = document.querySelectorAll('.five-cards-submit-cxt')
        if (!val) {
          node[1].style.left = '-120px'
          node1[1].style.width = 'calc(100% - 54px)'
        } else {
          node[1].style.left = '-30px'
          node1[1].style.width = 'calc(100% - 231px)'
        }
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },

注意 第一次进页面没更新 可以在mouted里也写个判断

image.png

4.el-image 图片预览时 element默认是可以拖拽预览图片的 但是 鼠标移出元素 图片还是会跟着鼠标移动

经排查（一步步去掉页面可能影响的代码）发现是页面里写了监听鼠标的方法影响 还没查出怎么影响的 先注释掉了 就好了