简介
@tmtek/bulletinboard 是一个简单易用的前端组件库，可以用于展示公告、消息和通知等内容。它采用了 Vue 组件化和样式化的设计理念，并且支持响应式和动态更新。
安装
在项目中安装 @tmtek/bulletinboard：
$ npm install @tmtek/bulletinboard --save
使用
ES6 模块
使用 ECMAScript 6 的模块导入方式：
import BulletinBoard from '@tmtek/bulletinboard'; // 注册 BulletinBoard 组件 Vue.component('BulletinBoard', BulletinBoard);
直接引用
直接在 HTML 中引入：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------- ---------- ----- ---------------- --------------------------------------------------------------------------------- -- ------- ------------------------------------------------------------ ------- ------------------------------------ ------- ------ ---- --------- --------------- -------------------------------- ------ -------- --- --- - --- ----- --- ------- ----- - ------ - - ------ ------- -------- ------------------- ----- ----------------------- ------ ---------- ----- ----------- --------- -- - ------ ------ -------- ----- ------------- ------ ----- ----------- ------ ---------- ----- ----------- --------- - - - --- --------- ------- -------展开代码
配置
BulletinBoard 组件支持以下配置选项：
items
- 类型：Array
- 默认值：
[] - 描述：传入的展示对象数组，每个对象包含以下属性：
- title：标题，必填
- content：内容，必填
- icon：图标，选填
- color：颜色，选填（可选值为：
primary、info、success、warning、danger） - time：时间，选填
limit
- 类型：Number
- 默认值：
5 - 描述：消息显示的最大数量，超出部分将被截断。
interval
- 类型：Number
- 默认值：
5000 - 描述：消息自动滚动的时间间隔，单位：毫秒（ms）。
scrollSpeed
- 类型：Number
- 默认值：
30 - 描述：消息滚动的速度，单位：px。
height
- 类型：String
- 默认值：
'200px' - 描述：组件的高度。
示例
-- -------------------- ---- ------- ---------- ----- ----------------- ------- --------------- -------------- ---------- ---------------- ----------------- ----------------------------------- ------ ----------- -------- ------ ------------- ---- ----------------------- ------ ------- - ----------- - -------------- -- ------ - ------ - ------ - - ------ ------- -- -- --------- -------- --------------------- ------ ------ ---- --- ----------- ----- ----------------------- ------ ---------- ----- ----------- --------- -- - ------ ---- - -------------------- ---- -------- ----- -------------------- -------- ----- ----------- ------ ---------- ----- ----------- --------- -- - ------ ------- ----- ---- - ------ ---------- -------- ------- ------ ------ ----- ------------------ ----- -------------- ------ ------- ----- ----------- --------- -- - ------ -- ------ ------------------ -------- ------------- ------ ----------------- ----- ----------------------- ------ ---------- ----- ----------- --------- -- - ------ ------- -------- --- ------ ------- -------- ----- ----------- ------ ---------- ----- ----------- --------- - -- - -- -- ---------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e2d9381d61a35409c5
