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="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: '已取消'
                    });
                })

坑不少，以后发现会慢慢记录，有什么错误或者有更好的方法，大家随时指教哦