npm 包 trix-vue2 使用教程

trix-vue2 是一个针对 Vue 2.x 的组件库，它集成了一些常用的 UI 组件和工具。本文将介绍如何使用 trix-vue2。

模块的安装

先通过 npm 进行安装：

npm install trix-vue2 --save

注意需要安装 vue 和 vue-template-compiler：

npm install vue vue-template-compiler --save

使用 trix-vue2

安装完成后可以通过如下方式引入 trix-vue2 组件：

import Vue from 'vue'
import TrixVue2 from 'trix-vue2'
import 'trix-vue2/dist/main.css'

Vue.use(TrixVue2)

其中 import 'trix-vue2/dist/main.css' 是为了加载样式文件。

支持按需加载，可以在 main.js 中添加如下代码，这样就只加载需要的组件：

import Vue from 'vue'
import { Button, Input } from 'trix-vue2/dist/components'
import 'trix-vue2/dist/main.css'

Vue.component(Button.name, Button)
Vue.component(Input.name, Input)

trix-vue2 组件

现在让我们看一下 trix-vue2 提供了哪些组件。这里会介绍其中几个常用组件。

Button 按钮

Button 是一个常用的按钮组件。

使用方法如下：

<template>
  <trix-button>Click me!</trix-button>
</template>

参数：

<template>
  <trix-button type="primary" :disabled="true" :round="true">Click me!</trix-button>
</template>

属性：

Input 输入框

Input 是一个输入框组件。

使用方法如下：

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

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

参数：

<template>
  <trix-input type="textarea" autosize :min-rows="2" :max-rows="4" v-model="value" placeholder="请输入内容"></trix-input>
</template>

属性：

Toast 提醒

Toast 是一个提醒组件。

使用方法如下：

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

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

属性：

这些组件仅仅是 trix-vue2 提供的一部分，还有很多其他的组件，详见 文档。

总结

本文介绍了 npm 包 trix-vue2 的使用方法，以及其中几个组件的使用。可以根据自己的需要按需引入相关组件，以达到优化项目性能的效果。

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