vue3 + vite + element-plus 踩坑

1, cascader 插件如果启用了多选，要用<el-form-item></el-form-item>包裹，不然会报错

2, el-popover 通过按钮点击手动关闭

//html 主要是定义ref这个属性 
<el-popover placement="bottom" :width="400" trigger="click" ref="pop">
              <template #reference>
                <el-button>选择标签</el-button>
              </template>

              <el-tree
                :data="tagList"
                show-checkbox
                check-on-click-node
              /> 

              <div style="text-align:right;margin-top:20px;">
                  <el-button size="mini" @click="closePop"
                  >关闭</el-button>
                  <el-button type="primary" size="mini" 
                  >搜索</el-button>

              </div>

            </el-popover>

//点击关闭按钮的时候执行这个方法就行
 //关闭popover
    const closePop = () => {
      console.log(pop.value);
      pop.value.visibility = false
    }

　　

3,el-cascader 复选的时候，之前只能点击前面的复选框才行，要改成点击选项也可以选中，加入下面的样式就可以。

注意：不能加在scoped的style标签里，单独用一个style标签包裹或者写在全局的css那里也行

<style >
  .el-checkbox{
      position: absolute;
      width: 100%;      
    }
    .el-checkbox + span{
      margin-left: 10px;
    }
</style>

　　

4，vue3.x 监听页面关闭和刷新

onMounted(() => {
      window.addEventListener('beforeunload', e => handleUnload(e))
    })

    onUnmounted(() => {
      window.removeEventListener('beforeunload', e => handleUnload(e))
    })

    const handleUnload= (e) => {

        e = e || window.event;
      // 兼容IE8和Firefox 4之前的版本
      if (e) {
          e.returnValue = "您是否确认离开此页面-您输入的数据可能不会被保存";
      }
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return "您是否确认离开此页面-您输入的数据可能不会被保存";
    }

 

5，

我们在修改element的一些样式的时候,在加了scoped的时候会不起作用,下面是解决方案:

解决方法:起一个类名将页面包裹起来,后面加 /deep/

P.S. 在lang=scss或者其他语言时deep会报错，最好写在lang=css里

<style scoped lang="css">

.limit-page /deep/ .el-checkbox {

   position: relative!important;

}</style>

参考链接：https://www.cnblogs.com/jun-qi/p/10895019.html