近期使用element组件遇到的坑和总结

一. Drawer 组件
1 .有一个很关键的属性：append-to-body ，如果遇到抽屉蒙层覆盖了整个页面，就使用这个属性
2 .抽屉关闭时销毁组件，使用： destroy-on-close
3. 抽屉的宽度，占整个屏幕的百分比： size="54%"
4. 关闭抽屉前的钩子函数： :before-close="handleCloseNew"
5. 嵌套抽屉：有时会遇到第二层抽屉无论使用什么属性都无法正常显示，不能展示在最上面，遮罩层盖住了整个页面。使用了粗暴的方法解决：

	  // 展开第二层抽屉时使用
      setTimeout(() => {
        document.getElementsByClassName('v-modal')[0].style.width = '68%' // 设置遮罩层的宽度
        document.getElementsByClassName('v-modal')[0].addEventListener('click',()=>{
          this.inputVisible = false // 给遮罩层添加监听点击触发关闭事件
        })
      }, 200);

二. Upload组件
使用的是“picture-card”
6. multipe 上传时可以多选
7. :limit 限制上传总数量
8. :file-list=“arr” 保存上传图片的数组（相当于v-modal）
9. :http-request=“uploadFile” 上传图片触发的http请求
10. :on-exceed=“exceed” 上传数量超出限制时触发的钩子函数

三. Cascader 级联选择器
11.回显问题：
在这里插入图片描述

在这里插入图片描述回显的数组一定是二维数组，里面每一个item都是props里设置value对应的值和他的所有父级：

最后绑定到v-modal上就能回显了。

四. Select下拉选择组件
产品需要的功能：1⃣️下拉能选择，2⃣️输入能模糊搜索，3⃣️搜索不到可以新建，4⃣️选择后再次打开要将之前选择的项目排序到顶部
使用“创建条目”这个类型的select组件
123组件即可满足，第4个需求需要排序：
封装了一个简单的冒泡满足需求

/* checkArr 选择的项目数组： [3,6,7,2] 里面存放选中的项目id
*  targetArr 要排序的数组：[{name : '风景画' , id : 3},{name : '油画' , id : 4},{name : '水墨画' , id : 5}, ...]
*  targetValue 要排序数组排序依据的字段
*/
changeOption : function(checkArr = [], targetArr = [], targetValue = 'value' ){
  for(let i=0;  i < checkArr.length ; i++){
    for(let j=0; j < targetArr.length ; j++){
      if(checkArr[i] == targetArr[j][`${targetValue}`]){
        [targetArr[i],targetArr[j]] = [targetArr[j],targetArr[i]] 
      }
    }
  }
  return targetArr
},

秒客网

近期使用element组件遇到的坑和总结

相关文章