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

在前端开发中，使用 UI 组件库可以让我们快速构建界面、提高开发效率。vue-pure-ui 是一个基于 Vue.js 的 UI 组件库，支持按需引入，提供了丰富的 UI 组件，适用于各种类型的前端项目。本文将介绍如何使用 vue-pure-ui，帮助学习和理解 vue-pure-ui 的使用。

安装和使用

使用 vue-pure-ui 的前提是已经安装了 Vue.js。具体用法如下：

安装

使用 npm 包管理工具安装 vue-pure-ui。

npm install vue-pure-ui

引入

在 Vue.js 的入口文件中引入 vue-pure-ui 组件库，并注册使用。

import Vue from 'vue';
import VpButton from 'vue-pure-ui/dist/components/VpButton';

Vue.component('VpButton', VpButton);

使用

在 Vue.js 模板中使用 vue-pure-ui 组件。

<template>
  <VpButton>按钮</VpButton>
</template>

按需引入

如果不需要引用整个 vue-pure-ui 组件库，只希望按需引入一部分组件，可以采用以下方式。

import Vue from 'vue';
import { VpButton, VpInput } from 'vue-pure-ui/dist/components';

Vue.component('VpButton', VpButton);
Vue.component('VpInput', VpInput);

组件列表

vue-pure-ui 提供了众多常用 UI 组件，包括 Button、Input、Select、Radio、Checkbox、Table、Modal、Tooltip、Loading 等。下面分别介绍这些组件的使用。

Button

Button 组件用于生成按钮，在创建按钮时可以设置不同的类型和大小。

props 属性

属性	类型	默认值	说明
type	string	'default'	按钮类型，可选值：default，primary，danger
size	string	'default'	按钮大小，可选值：default，small，large
round	bool	false	是否是圆形按钮
disabled	bool	false	是否禁用按钮
nativeType	string	'button'	HTML 原生 button 类型
loading	bool	false	是否是加载状态

代码示例

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

Input

Input 组件用于生成输入框，支持多种类型。

props 属性

属性	类型	默认值	说明
type	string	'text'	输入框类型，可选值：text，number，password，email，date
size	string	'default'	输入框大小，可选值：default，small，large
placeholder	string	''	输入框占位符

代码示例

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

Select

Select 组件用于生成下拉选项，支持单选和多选。

props 属性

属性	类型	默认值	说明
data	array	[]	选项数据
labelKey	string	'label'	选项显示文本的字段名
valueKey	string	'value'	选项的值的字段名
type	string	'default'	选框类型，可选值：default，multiple

events 事件

事件	参数	说明
onChange	event	当选项发生变化时触发

代码示例

<template>
  <div>
    <VpSelect :data="[{label: '选项1', value: '1'}, {label: '选项2', value: '2'}, {label: '选项3', value: '3'}]"></VpSelect>
    <VpSelect :data="[{label: '选项1', value: '1'}, {label: '选项2', value: '2'}, {label: '选项3', value: '3'}]" type="multiple"></VpSelect>
  </div>
</template>

Radio

Radio 组件用于生成单选框。

props 属性

属性	类型	默认值	说明
data	array	[]	选项数据
labelKey	string	'label'	选项显示文本的字段名
valueKey	string	'value'	选项的值的字段名

events 事件

事件	参数	说明
onChange	event	当选项发生变化时触发

代码示例

<template>
  <div>
    <VpRadio :data="[{label: '选项1', value: 1}, {label: '选项2', value: 2}, {label: '选项3', value: 3}]"></VpRadio>
  </div>
</template>

Checkbox

Checkbox 组件用于生成复选框。

props 属性

属性	类型	默认值	说明
data	array	[]	选项数据
labelKey	string	'label'	选项显示文本的字段名
valueKey	string	'value'	选项的值的字段名

events 事件

事件	参数	说明
onChange	event	当选项发生变化时触发

代码示例

<template>
  <div>
    <VpCheckbox :data="[{label: '选项1', value: 1}, {label: '选项2', value: 2}, {label: '选项3', value: 3}]"></VpCheckbox>
  </div>
</template>

Table

Table 组件用于生成表格。

props 属性

属性	类型	默认值	说明
columns	array	[]	表格列配置
data	array	[]	表格数据

columns 的属性：

属性	类型	默认值	说明
key	string	''	列数据字段名
label	string	''	列标题
width	string	''	列宽度
align	string	'left'	列文字对齐方式

代码示例

<template>
  <div>
    <VpTable :columns="[{key: 'name', label: '姓名'}, {key: 'age', label: '年龄', width: '100px', align: 'center'}]" :data="[{name: '小明', age: 18}, {name: '小红', age: 20}]"></VpTable>
  </div>
</template>

Modal

Modal 组件用于生成对话框。

props 属性

属性	类型	默认值	说明
show	bool	false	是否显示
title	string	''	对话框标题
width	string	'500px'	对话框宽度
okText	string	'确定'	确定按钮文字
cancelText	string	'取消'	取消按钮文字

events 事件

事件	参数	说明
onOk	event	点击确定按钮时触发
onCancel	event	点击取消按钮时触发

代码示例

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

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

Tooltip

Tooltip 组件用于生成提示信息。

props 属性

属性	类型	默认值	说明
content	string	''	提示内容

代码示例

<template>
  <div>
    <VpTooltip content="示例提示信息">
      <span>鼠标移到这里</span>
    </VpTooltip>
  </div>
</template>

Loading

Loading 组件用于显示加载状态。

props 属性

属性	类型	默认值	说明
size	string	'default'	加载状态尺寸，可选值：default，small，large
text	string	'加载中'	加载状态文本

代码示例

<template>
  <div>
    <VpLoading></VpLoading>
    <VpLoading size="small" text="小号加载中..."></VpLoading>
    <VpLoading size="large"></VpLoading>
  </div>
</template>

结语

vue-pure-ui 是一个非常不错的 Vue.js UI 组件库，提供了常用的 UI 组件，而且非常易于使用。通过本文，我们初步了解了 vue-pure-ui 的使用方法和组件列表，相信读者已经能够轻松上手了。

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