简介
@tmtek/bulletinboard 是一个简单易用的前端组件库，可以用于展示公告、消息和通知等内容。它采用了 Vue 组件化和样式化的设计理念，并且支持响应式和动态更新。
安装
在项目中安装 @tmtek/bulletinboard：
- --- ------- -------------------- ------
使用
ES6 模块
使用 ECMAScript 6 的模块导入方式：
------ ------------- ---- ----------------------- -- -- ------------- -- ------------------------------ ---------------
直接引用
直接在 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