标签: element-plus

我在 Vue2 中进行项目并使用 element-ui，但我们想将项目升级到 Vue3。为此，我们需要传递 Element-plus（element-ui 与 Vue3 不兼容）。

我们成功地传递了 Vue3，但是当我们想要使用 element comp 时，我们总是遇到相同的问题。控制台中出现错误，我不明白为什么。我怀疑使用 vue-loader 将我的 SFC 文件转换为渲染器函数时出现问题。

我的测试页面：

<template>
  <div id="app">
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="Pick a day"
    />
  </div>
</template>

<script>
const default_layout = "default";

export default {
    name: "App",
    components: {
    },
    data() {
        return {
            value1: null
        };
    },

vue.config.js：

module.exports = {
    lintOnSave: false,
    chainWebpack: config => {
        config.resolve.alias.set("vue", "@vue/compat");
        config.module
            .rule("vue")
            .use("vue-loader")
            .tap(options => {
                return {
                    ...options,
                    compilerOptions: {
                        compatConfig: {
                            MODE: 2
                        } …

我目前正在使用 Vue 3 和 Element Plus 开发一个项目。

截至目前，元素加图标未显示在我的应用程序上。我已经使用纱线安装了它们 $ yarn add @element-plus/icons ，但我不知道下一步该怎么做。

我尝试将其导入到我的main.ts文件中。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "@element-plus/icons";

createApp(App).use(store).use(router).use(ElementPlus).mount("#app");

但它还没有显示。

这是元素加消息框在我构建的最小页面上的外观：

我期望它看起来像element-plus 文档中的那样。

我将Vue与vite和ElementPlus一起使用。我从 vite 和 element plus 文档复制了设置。我玩了很多其他元素，它们都渲染正确。App.vue可以重现问题的最小组件：

<template>
  <el-button text @click="open">Click to open the Message Box</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK'
  })
}
</script>

我的vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' …

我需要在 el-select 组件中自定义选定的值，到目前为止，我只找到了有关自定义选项项的文档和示例，但没有找到选定后的值。这可能吗element-plus？如果是这样，请添加一个示例或为我指出正确的方向。

这些是使用槽通过自定义 HTML 自定义的选项

这是选择后的样子，我需要使用自定义 html 按选项显示

如果我尝试element-plus直接使用该组件，导入工作得很好。

我想做的是从element-plus库中扩展一个组件（它使用composition apiVue 3 中的组件）并向我的组件和方法添加一些附加属性。

在 Vue 2 中，它看起来像这样：

export default {
  extends: SomeComponent
}

在 Vue 3 中，这似乎不再起作用了。

我读过有关DefineComponent 的内容，但到目前为止，还没有成功实现它。

有人能给我一些灯光吗？谢谢。