trix-vue2
是一个针对 Vue 2.x 的组件库,它集成了一些常用的 UI 组件和工具。本文将介绍如何使用 trix-vue2。
模块的安装
先通过 npm 进行安装:
--- ------- --------- ------
注意需要安装 vue
和 vue-template-compiler
:
--- ------- --- --------------------- ------
使用 trix-vue2
安装完成后可以通过如下方式引入 trix-vue2 组件:
------ --- ---- ----- ------ -------- ---- ----------- ------ ------------------------- -----------------
其中 import 'trix-vue2/dist/main.css'
是为了加载样式文件。
支持按需加载,可以在 main.js
中添加如下代码,这样就只加载需要的组件:
------ --- ---- ----- ------ - ------- ----- - ---- --------------------------- ------ ------------------------- -------------------------- ------- ------------------------- ------
trix-vue2 组件
现在让我们看一下 trix-vue2 提供了哪些组件。这里会介绍其中几个常用组件。
Button 按钮
Button 是一个常用的按钮组件。
使用方法如下:
---------- ------------------ ----------------- -----------
参数:
---------- ------------ -------------- ---------------- ------------------- ----------------- -----------
属性:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | String | default | 按钮类型,可选值有:default 、primary 、success 、warning 、danger 、inverse |
disabled | Boolean | false | 是否禁用 |
round | Boolean | false | 是否展示圆形按钮 |
Input 输入框
Input 是一个输入框组件。
使用方法如下:
---------- ----------- --------------- --------------------------------- ----------- -------- ------ ------- - ------ - ------ - ------ -- - - - ---------
参数:
---------- ----------- --------------- -------- ------------- ------------- --------------- --------------------------------- -----------
属性:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | String | input | 输入框类型,可选值有:input 、textarea |
autosize | Boolean | false | 是否自适应高度 |
min-rows | Number | - | autosize 时的最小行数 |
max-rows | Number | - | autosize 时的最大行数 |
maxlength | Number | - | 最大输入字数限制 |
Toast 提醒
Toast 是一个提醒组件。
使用方法如下:
---------- ----- ------------ ----------------------- ------------------- ----------- ----------------------- --------------------- -- - ----- --------------------- ------ ----------- -------- ------ ------- - ------ - ------ - -------------- ----- - -- -------- - ----------- - ------------------ - ---- - - - ---------
属性:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | Boolean | false | 是否显示 |
duration | Number/String | 2000 | 显示时间,默认为 2000 |
type | String | 默认 | type有:success、warning、error等 |
这些组件仅仅是 trix-vue2 提供的一部分,还有很多其他的组件,详见 文档。
总结
本文介绍了 npm 包 trix-vue2
的使用方法,以及其中几个组件的使用。可以根据自己的需要按需引入相关组件,以达到优化项目性能的效果。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005586281e8991b448d599b