Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Open
5 tasks done
fct182 opened this issue Jan 12, 2023 · 14 comments · May be fixed by #615
Open
5 tasks done

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

fct182 opened this issue Jan 12, 2023 · 14 comments · May be fixed by #615

Comments

@fct182
Copy link

fct182 commented Jan 12, 2023

Describe the bug

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

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

Reproduction

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

System Info

无样式

Used Package Manager

npm

Validations

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

WangJincheng4869 commented Jan 30, 2023

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

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
Copy link
Contributor

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

@WangJincheng4869
Copy link

@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去除

image

@lishaobos
Copy link
Contributor

老兄,你们可能犯了同样的问题:

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

image

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

image

去掉就 ok 了

image

@WangJincheng4869
Copy link

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

@lishaobos
Copy link
Contributor

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

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

@WangJincheng4869
Copy link

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

@WangJincheng4869
Copy link

动画

@lishaobos
Copy link
Contributor

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

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

@fct182
Copy link
Author

fct182 commented Feb 21, 2023

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

@GeorgeHcc
Copy link

老兄,你们可能犯了同样的问题:

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

image

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

image

去掉就 ok 了

image

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

@g8up
Copy link

g8up commented May 20, 2023

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

@WangJincheng4869
Copy link

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

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

@GHLandy
Copy link

GHLandy commented Nov 28, 2023

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

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

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants