element plus的使用

開始用vue3.0開發項目了，得配合element UI的升級版本element plus來開發；

但是element plus實際在使用過程中還有有很多坑的，以下來慢慢列舉：

一、在main.js中引用

import ElementPlus from 'element-plus';

你覺得就能放心在組件里直接用的話，就開心的太早了，他有個挺大的bug的，你會發現在頁面里的element的UI組件都是英文的，都是英文的。。。。。。

上網查了很多資料后解決了，

在app.vue中這樣寫就好了

<script>
//引入vue方法
import { ElConfigProvider } from "element-plus";
//中文包
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
  name: "app",
  components: {
    [ElConfigProvider.name]: ElConfigProvider,
  },
  setup() {
    let locale = zhCn;
    return {
      locale,
    };
  },
};
</script> 

這樣就好了。

二、日期范圍組件

以前在vue2.0中使用，有個picker-options可以設置可以選擇的時間范圍什么的，但是這個屬性取消了；

<el-date-picker
        v-model="form.date"
        type="daterange"
        format="yyyy-MM-dd"
        start-placeholder="開始日期"
        end-placeholder="結束日期"
        @change="_onDateChange()"
        :picker-options="pickerOptions"
        style="width:250px;"
      ></el-date-picker>

要用這個屬性:disabled-date="disabledDate"，要不就會一直報錯

三、在設置路由攔截的時候，也就是你在main.js里用router.beforeEach的時候，想用下element plus的提醒彈窗，你會發現會報錯，你得單獨引用生命組件，才可以用；

例如：

import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
ElMessageBox.confirm('您確定要放棄當前操作嗎？', {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    next();
                }).catch(() => {
                    ElMessage.info({
                        message: '已取消'
                    });
                })

坑不少，以后發現會慢慢記錄，有什么錯誤或者有更好的方法，大家隨時指教哦