当前位置：首页 > article >正文

iviewui Message/Notice 设置居顶高度方法

article 2025/3/3 18:33:16

iviewui Message 设置居顶高度，局部设置无效，需要全局设置，找到main.js文件，

Vue.prototype.$Message.config({
    top: 100,//top 提示组件距离顶端的距离，单位像素
    duration: 3//duration 默认自动关闭的延时，单位秒。
});
Vue.prototype.$Notice.config({
    top: 50,
    duration: 3
});

通过直接调用以下方法来使用组件：

this.$Message.info(config)
this.$Message.success(config)
this.$Message.warning(config)
this.$Message.error(config)
this.$Message.loading(config)

以上方法隐式的创建及维护 Vue 组件。参数 config 可以是字符串或对象，当为字符串时，直接显示内容，当为对象时，具体说明如下：

属性	说明	类型	默认值
content	提示内容	String	-
render	自定义描述内容，使用 Vue 的 Render 函数	Function	-
duration	自动关闭的延时，单位秒，不关闭可以写 0	Number	1.5
onClose	关闭时的回调	Function	-
closable	是否显示关闭按钮	Boolean	false
background 4.0.0	是否显示背景色	Boolean	false

另外提供了全局配置和全局销毁的方法：

this.$Message.config(options)
this.$Message.destroy()

this.$Message.config({
    top: 50,
    duration: 3
});

属性	说明	类型	默认值
top	提示组件距离顶端的距离，单位像素	Number	24
duration	默认自动关闭的延时，单位秒	Number	1.5

使用演示：

//直接使用
this.$Message.error('这是一条消息提示');
//带配置参数
this.$Message.info({
                content: 'I'll be gone in 10 seconds',
                duration: 10
            });

查看全文

http://www.kler.cn/a/454134.html