npm 包 tanbo-ui 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

Tanbo-ui 是一款基于 Vue.js 的 UI 组件库，拥有一系列常用的组件，可以帮助我们快速地开发网页。

安装

首先需要在项目中安装 tanbo-ui：

npm install tanbo-ui --save

然后在 Vue 中引入：

import Vue from 'vue';
import tanboUi from 'tanbo-ui';
import 'tanbo-ui/dist/tanbo-ui.css';

Vue.use(tanboUi);

引入后，就可以在项目中使用 tanbo-ui 中的组件了。

组件列表

tanbo-ui 中拥有多种常用组件，如下：

1. button

使用方法：

<tb-button @click="onClick">按钮</tb-button>

属性：

参数	说明	类型	默认值
type	按钮类型(primary/info/warning)	string	-
plain	是否是朴素按钮	boolean	false
round	是否是圆角按钮	boolean	false
disabled	是否是禁用按钮	boolean	false

事件：

方法名	说明	参数
click	按钮点击时触发的事件	-

2. input

使用方法：

<tb-input v-model="inputValue" />

属性：

参数	说明	类型	默认值
type	input 的类型	string	'text'
placeholder	占位符	string	''
disabled	是否禁用	boolean	false
size	输入框大小	string	'normal'
clearable	是否可清空	boolean	false
value	输入框的值（双向绑定）	string	''

事件：

方法名	说明	参数
input	输入框内容发生改变	输入框的值
change	输入框值改变时触发	输入框的值
keydown	输入框按键按下时触发	原生的 keydown 事件

3. tag

使用方法：

<tb-tag>{{ tagText }}</tb-tag>

属性：

参数	说明	类型	默认值
size	大小	string	-
color	颜色	string	-
fill	填充色	string	-

注意事项

目前 tanbo-ui 还处于版本 1.0.0，存在以下问题：

由于部分组件库还未进行测试，请谨慎使用
可能存在兼容性问题

示例代码

-- -------------------- ---- -------
----------
  -----
    ---------- -------------- -------------------------------
    ---------- ----------- ---------------------------------
    ---------- -------------- ---------------------------------

    --------- -------------------- ------------------- --
    --------- -------------------- ------------ ------------------- --
    --------- -------------------- ------------ ------------------- --------- --

    ---------- ------- -----------
    ------- -------------- --------------- ------- -----------

    -------- --
  ------
-----------

--------
------ - --------- -------- ----- - ---- -----------

------ ------- -
  ----------- -
    ---------
    --------
    ------
  --
  ------ -
    ------ -
      -------- -----
      ------ -------
      ----- ----------
      ----------- ---
    --
  --
  -------- -
    --------- -
      ---------------------
    --
  --
--
---------

以上就是 tanbo-ui 的常用组件使用方法，希望可以帮助到大家。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600566c281e8991b448e31d6