npm 包 agreed-ui 使用教程

简介

npm 包 agreed-ui 是一个基于 Vue.js 的 UI 组件库。它提供了一系列优雅的组件和工具，可以帮助前端开发人员快速构建优秀的 UI 界面。

安装

在使用 agreed-ui 之前，需要先安装它。可以通过 npm 命令来安装：

npm install agreed-ui

使用方法

安装完成之后，就可以在项目中引用 agreed-ui 了。在 main.js 中添加以下代码：

import AgreedUI from 'agreed-ui';
import 'agreed-ui/dist/agreed-ui.css';

Vue.use(AgreedUI);

之后就可以在各个组件中使用了。例如：

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

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

组件列表

按钮

<ag-button>Default Button</ag-button>
<ag-button type="primary">Primary Button</ag-button>
<ag-button type="info">Info Button</ag-button>
<ag-button type="success">Success Button</ag-button>
<ag-button type="warning">Warning Button</ag-button>
<ag-button type="danger">Danger Button</ag-button>

输入框

<ag-input v-model="name"></ag-input>
<ag-textarea v-model="description"></ag-textarea>
<ag-search v-model="keyword"></ag-search>
<ag-password v-model="password"></ag-password>

工具栏

<ag-toolbar>
  <ag-toolbar-item>Item 1</ag-toolbar-item>
  <ag-toolbar-item>Item 2</ag-toolbar-item>
  <ag-toolbar-item>Item 3</ag-toolbar-item>
</ag-toolbar>

弹出框

<ag-dialog v-model="dialogVisible">
  <h3 slot="title">Title</h3>
  <p>Dialog Content</p>
  <template slot="footer">
    <ag-button @click="dialogVisible = false">Cancel</ag-button>
    <ag-button type="primary">OK</ag-button>
  </template>
</ag-dialog>

选项卡

<ag-tabs type="card">
  <ag-tab-pane label="Tab 1">Tab 1 Content</ag-tab-pane>
  <ag-tab-pane label="Tab 2">Tab 2 Content</ag-tab-pane>
  <ag-tab-pane label="Tab 3">Tab 3 Content</ag-tab-pane>
</ag-tabs>

提示框

<ag-alert>Default Alert</ag-alert>
<ag-alert type="success">Success Alert</ag-alert>
<ag-alert type="warning">Warning Alert</ag-alert>
<ag-alert type="danger">Danger Alert</ag-alert>

模态框

<ag-modal v-model="modalVisible">
  <h3 slot="title">Title</h3>
  <p>Modal Content</p>
  <template slot="footer">
    <ag-button @click="modalVisible = false">Cancel</ag-button>
    <ag-button type="primary">OK</ag-button>
  </template>
</ag-modal>

总结

npm 包 agreed-ui 为我们提供了非常实用的组件库，可以方便地为我们构建优秀的 UI 界面。在使用过程中，我们需要注意引用和使用方式，熟悉组件的 API，才能更好地使用它。

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