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