如何修改Vuetify notify通知栏宽度、移除关闭按钮或寻找替代方案

现有vuetify-notify的配置方法 #

你现有代码里首先有个小问题：import的包名是VuetifyNotify，Vue.use()里传的notify变量未定义，要和导入的变量名保持一致。
两个需求都可以直接通过插件内置配置实现，支持全局统一配置，也支持单次调用单独传参：

调整通知栏宽度 #

插件原生支持width配置项，直接传合法的CSS宽度值即可，也可以通过自定义类名写样式实现更灵活的响应式效果。
全局配置示例（main.js）：

import VuetifyNotify from 'vuetify-notify';

Vue.use(VuetifyNotify, {
  vuetify,
  options: {
    toast: {
      x: "right",
      y: "top",
      color: "green",
      width: "400px" // 固定宽度，支持px、%、vw等单位
      // 响应式需求可以传自定义类名：class: "custom-toast"
    }
  }
});

如果用自定义类名，在全局样式文件里加对应样式即可：

.custom-toast {
  width: 90vw;
  max-width: 420px;
}

单次调用单独改宽度的写法：

this.$notify.toast("Hello toast", {
  width: "320px"
})

移除关闭图标 #

直接加showClose: false配置项即可隐藏右上角关闭叉号，同样支持全局/单次配置：
全局配置加到toast字段下：

toast: {
  x: "right",
  y: "top",
  color: "green",
  showClose: false,
  timeout: 3000 // 搭配自动关闭时间使用，单位毫秒，3秒后自动消失，不需要手动点关闭
}

单次调用写法：

this.$notify.toast("Hello toast", {
  showClose: false
})

其他易用的通知实现方案 #

如果觉得第三方插件配置受限，可以选这几个常用方案：

• vue-toastification：无框架依赖，轻量体积小，支持Vue2/Vue3，自带过渡动画、多位置、自定义内容，API简洁，上手成本极低
• 基于Vuetify自带的v-snackbar封装：本身项目已经用Vuetify的话完全不用额外装插件，自己封装个全局$notify方法也就十几行代码，所有样式、交互、图标完全可控，没有第三方插件的限制
• vue-notification：老牌通知插件，支持消息分组、自定义模板、进度条、音效提醒，配置灵活，文档完善

内容的提问来源于stack exchange，提问作者Muhsin