加入收藏 | 设为首页 | 会员中心 | 我要投稿 汽车网 (https://www.0577qiche.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 教程 > 正文

Vant Notify 消息提示的组件

发布时间:2023-04-20 12:38:14 所属栏目:教程 来源:
导读:Vant Notify 消息提示是通过顶栏下拉进行消息推送提示的组件。

引入
import Vue from 'vue';
import { Notify } from 'vant';

Vue.use(Notify);
基础用法
Notify('通知内容');
Vant Notify 消息提示是通过顶栏下拉进行消息推送提示的组件。

引入
import Vue from 'vue';
import { Notify } from 'vant';
 
Vue.use(Notify);
基础用法
Notify('通知内容');
通知类型
支持primary、success、warning、danger四种通知类型,默认为danger

// 主要通知
Notify({ type: 'primary', message: '通知内容' });
 
// 成功通知
Notify({ type: 'success', message: '通知内容' });
 
// 危险通知
Notify({ type: 'danger', message: '通知内容' });
 
// 警告通知
Notify({ type: 'warning', message: '通知内容' });
自定义通知
自定义消息通知的颜色和展示时长

Notify({
  message: '自定义颜色',
  color: '#ad0000',
  background: '#ffe1e1'
});
 
Notify({
  message: '自定义时长',
  duration: 1000
});
组件内调用
引入 Notify 组件后,会自动在 Vue 的 prototype 上挂载 $notify 方法,便于在组件内调用。

export default {
  mounted() {
    this.$notify('提示文案');
  }
}

(编辑:汽车网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章