vue+element-ui，notify组件怎么自定义设置弹框的宽度

vue+element-ui，notify组件怎么自定义设置弹框的宽度？

页面展示

代码展示

打开开发者模式查看他的样式，然后重写样式就行，记住样式后面加上 !import

源于chatGPT仅供参考

要自定义设置 Element UI 的 Notify 组件的弹框宽度，你可以使用 CSS 来实现。Element UI 的 Notify 组件是基于层叠样式表（CSS）构建的。

下面是一个示例，展示了如何自定义设置 Notify 弹框的宽度：

```html
<template>
  <div>
    <el-button @click="showNotify">显示通知</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    showNotify() {
      this.$notify({
        title: '通知标题',
        message: '这是一条通知消息',
        duration: 0, // 设置持续时间为0，使其一直显示
        customClass: 'custom-notify' // 添加自定义 CSS 类名
      });
    }
  }
};
</script>

<style scoped>
.custom-notify .el-notification__content {
  width: 400px; /* 自定义宽度 */
}
</style>

在上述示例中，我们将 custom-notify 类添加到 Notify 组件的 customClass 属性中，并在样式中使用 .custom-notify .el-notification__content 指定了宽度为 400px。你可以根据需要调整宽度值以满足你的要求。

请注意，scoped 属性用于限制样式仅应用于当前组件，如果你在全局样式中使用，请移除 scoped 属性。

通过以上方法，你可以自定义设置 Element UI Notify 组件弹框的宽度。

```

• 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：vue element-ui的$notify注意点
• 除此之外, 这篇博客: vue3 中使用 element-ui 时出现的 Property ‘$notify‘ does not exist on type ‘App‘.中的 vue3 中使用 element-ui 时出现的 Property ‘$notify‘ does not exist on type ‘App‘. 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 上手研究了下 vue + typescript 开发 发现使用 element-ui之后 element库里的一些对vue的扩展方法无法使用

  

  比如调用 this.$notify 方法显示通知会报以下错误
  

  百度找了半天 找到几种方案

  1. 强转 any (<any>this).$notify
  2. as (this as any).$notify
  3. 在类中增加声明 private $notify: any;

  这几种办法异曲同工，但是我用的是typescript,遇到麻烦就转any 还用ts干嘛，仔细想了下这种问题出现的原因是typescript没有找到方法的声明，虽然vscode识别出来了但是ts编译器并不知道方法的存在。