element-plus 中使用服务方式调用Loading ，不会自动引入样式

fct182 commented 1 year ago

Describe the bug

        this.loading = ElLoading.service({
          lock: true,
          text: '正在卖力加载中....'
        });

Reproduction

    this.loading = ElLoading.service({           lock: true,           text: '正在卖力加载中....'         });

System Info

无样式

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

WangJincheng4869 commented 1 year ago

在TS中使用组件也会有同样的问题，不会引入css

import {i18n} from "@/config/i18n";
import {ElMessageBox, ElMessageBoxOptions} from "element-plus";

const {t} = i18n.global;

class UseMessageBox {
  /**
   * 当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。<br>
   * 调用 ElMessageBox.alert 方法以打开 alert 框。 它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。 此例中接收了两个参数，message和title。 值得一提的是，窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。 若不确定浏览器是否支持Promise，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。
   * @param msg 消息内容
   * @param title 标题
   * @param options 配置参数，详见https://element-plus.org/zh-CN/component/message-box.html#messagebox-%E9%85%8D%E7%BD%AE%E9%A1%B9
   */
  // @ts-ignore
  public alert(msg: string, title = t("messageBox.title.tip"), options?: ElMessageBoxOptions | undefined) {
    return ElMessageBox.alert(msg, title, options);
  }

  /**
   * 普通的询问框，提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。<br>
   * 调用 ElMessageBox.confirm 方法以打开 confirm 框。它模拟了系统的 confirm。 Message Box 组件也拥有极高的定制性，我们可以传入 options 作为第三个参数，它是一个字面量对象。 type 字段表明消息类型，可以为success，error，info和 warning，无效的设置将会被忽略。 需要注意的是，第二个参数 title 必须定义为 String 类型，如果是 Object，会被当做为 options使用。 在这里我们返回了一个 Promise 来处理后续响应。
   * @param msg 消息内容
   * @param title 标题
   * @param options 配置参数，详见https://element-plus.org/zh-CN/component/message-box.html#messagebox-%E9%85%8D%E7%BD%AE%E9%A1%B9
   * @returns {*}
   */
  // @ts-ignore
  public confirm(msg: string, title = t("messageBox.title.tip"), options?: ElMessageBoxOptions | undefined) {
    return ElMessageBox.confirm(msg, title, options);
  }

  /**
   * 警告询问框，就是confirm添加了默认的参数{type: 'warning'}
   * @param msg 消息
   * @param title 标题
   * @returns {*}
   */
  // @ts-ignore
  public warningConfirm(msg: string, title = t("messageBox.title.warning")) {
    return ElMessageBox.confirm(msg, title, {type: "warning"});
  }
}

export const useMessageBox = new UseMessageBox();

lishaobos commented 1 year ago

可能需要麻烦你提供个 reproduction，看下具体配置啥的。

WangJincheng4869 commented 1 year ago

@lishaobos 我是通过同时使用 unplugin-element-plus插件解决了此问题，如果你想复原此问题可以使用我这个项目，去除unplugin-element-plus插件做个测试 https://github.com/WangJincheng4869/fanKuiWenJian/blob/main/%5Bvue-i18n%5D%20-%20vuepress2%20bulid%20error%20--SyntaxError%20-%20Named%20export%20createI18n%20not%20found.zip

官网的意思貌似可以二选一，但是我发现不能将unplugin-element-plus去除

lishaobos commented 1 year ago

老兄，你们可能犯了同样的问题：

ElMessage.success({
  message: 'qwe',
  duration: 10e3
})

没有样式的原因是因为你上面引了 message

去掉就 ok 了

WangJincheng4869 commented 1 year ago

@lishaobos 看来就是这个原因，那看来这个是自动导入插件的bug了，没有生成 ElMessage 的全局声明

lishaobos commented 1 year ago

@lishaobos 看来就是这个原因，那看来这个是自动导入插件的bug了，没有生成 ElMessage 的全局声明

也不是 bug，他在转换的时候会判重，如果你自己引入，他就不操作了。

WangJincheng4869 commented 1 year ago

@lishaobos 好吧，但的确是很难用。不会像vue那样第一次启动就全部生成好，而是每次启动都会重新生成一遍。搞得开始就会有报错，然后一会又好了....

WangJincheng4869 commented 1 year ago

lishaobos commented 1 year ago

@lishaobos 好吧，但的确是很难用。不会像vue那样第一次启动就全部生成好，而是每次启动都会重新生成一遍。搞得开始就会有报错，然后一会又好了....

我这两天加个缓存功能，效果会好一点。

fct182 commented 1 year ago

不使用import导入，使用TS那就会报类型错误，那就必须得declare所有用到的东西

GeorgeHcc commented 1 year ago

老兄，你们可能犯了同样的问题：
ElMessage.success({
  message: 'qwe',
  duration: 10e3
})
没有样式的原因是因为你上面引了 message

去掉就 ok 了

确实是这样的，很多是auto-import没有配置好，导致不能自动导入才手动导入依赖的

g8up commented 1 year ago

类似错误我也犯了一次。原因是对 auto import 机制不熟悉。在我朴素的认知中，在模板中使用的组件，我不会手动再引用。但是通过 API 调用的时候，我总觉得得先声明一下，结果画蛇添足。

WangJincheng4869 commented 1 year ago

类似错误我也犯了一次。原因是对 auto import 机制不熟悉。在我朴素的认知中，在模板中使用的组件，我不会手动再引用。但是通过 API 调用的时候，我总觉得得先声明一下，结果画蛇添足。

我都是IDE自动导入的，很少手动写 import 太麻烦了

GHLandy commented 10 months ago

@lishaobos 看来就是这个原因，那看来这个是自动导入插件的bug了，没有生成 ElMessage 的全局声明

意思是 unplugin-vue-components 必须和 unplugin-auto-import 一块使用吗？不能单独使用 unplugin-vue-components？

unplugin / unplugin-vue-components