notify 消息通知组件

概述

消息通知组件, 支持弹窗和声音播放(会有静音问题), 依赖 ant-design-vue 的 Notification 组件

使用示例

import notify form '@binlun/notify'

notify({
  title: '秒杀专区暂时下线公告',
  date: '2017-08-02 15:47:44',
  maxLength: 80,
  onlyVoice: true,
  voiceSrc: 'https://cdn.tosound.com:3321/preview?file=freesound%2F0%2F334%2F437002.mp3', 
  description: '尊敬的用户，为了给您带来更好的体验，秒杀专区业务将于2022年11月1日22：00-2022年11月5日09:00期间进行系统升级，升级期间秒杀专区入口将暂时下线',
  onDetail: (closeCb, params) => { xxx }
})

接口文档

属性

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | | -------- | :------: | :------: | :------------------: | :--------------------------------------- | | title | string | option | '' | 标题 | | date | string | option | '' | 日期 | | maxLength | number | option | 0 | 内容达到多少文字显示省略号, 0表示不限制 | | isTitleEllipsis | boolean | option | false | 标题内容超过一行是否显示省略号 | | detailTxtPosition | string | option | 'top' | '查看详情' 的位置: top, bottom | | onlyVoice | boolean | option | false | 只播放声音, 为true时不会有弹层通知 | | voiceSrc | string | option | '' | 声音地址, 该值不为空表示会播放声音 | | onDetail | function | option | (closeCb, params) => {} | 点击 '查看详情' 的回调 | | 其它 Notification 组件所有属性 | - | - | - | 参考: https://www.antdv.com/components/notification-cn |

开发与调试

• 运行 npm install 安装依赖
• 运行 npm start

目录结构

.
├── index.js ----------------------  npm入口文件，新增组件时需要在这里添加
├── lib ---------------------------  打包代码
├── examples ----------------------  示例代码
    ├── assets --------------------  静态资源目录
    ├── main.ts -------------------  示例入口
    ├── App.vue -------------------  示例实现
├── public ------------------------  html上引用的公共资源
└── src ---------------------------  源码目录
    ├── components ----------------  组件目录
        ├── helloworld ------------  具体的组件
        ├── helloworld2 -----------  具体的组件
├── index.hml ---------------------  页面入口

打包

• 运行 npm run build 来打包
• bundle的入口在vite.build.config.ts的entry字段中配置
• 打包以后生成lib/bundle.es.js和lib/bundle.umd.js