Skip to content
New issue

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

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

Already on GitHub? Sign in 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

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

Successfully merging a pull request may close this issue.

6 participants