npm 包 vue-pure-ui 使用教程

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

安装和使用

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

安装

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

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

引入

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

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

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

使用

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

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

按需引入

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

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

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

组件列表

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 当选项发生变化时触发

代码示例

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

Radio

Radio 组件用于生成单选框。

props 属性

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

events 事件

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

代码示例

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

Checkbox

Checkbox 组件用于生成复选框。

props 属性

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

events 事件

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

代码示例

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

Table

Table 组件用于生成表格。

props 属性

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

columns 的属性：

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

代码示例

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

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 '' 提示内容

代码示例

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

Loading

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

props 属性

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

代码示例

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

结语

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

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005527f81e8991b448cff94

阅读全文

猜你喜欢

  • npm 包 generator-r-gen 使用教程

    什么是 generator-r-gen generator-r-gen 是一个基于 Yeoman 的 npm 包，用于快速生成 React 组件代码的脚手架工具。通过使用 generator-r-ge...

    2 年前
  • npm 包 wa.component 使用教程

    前言 随着现代前端开发的快速发展和进步，我们不断地使用各种 npm 包来提高自己的开发效率，而 wa.component 便是一款非常常用的前端组件库，今天我们就来学习一下如何使用它。

    2 年前
  • npm 包 styled-css-modules-component 使用教程

    前端开发中，CSS 样式管理是一项重要的技能。随着前端工具的不断发展，我们有了更多的选择。其中，styled-css-modules-component 是一款能够将模块化 CSS 和 React 组...

    2 年前
  • npm 包 @p1p3/angular-utilities 使用教程

    前言 在现代 Web 应用开发中，Angular 是一个广为使用的前端框架。通过 Angular，您可以轻松地构建复杂的单页 Web 应用程序。不过，实际 Angular 开发中，我们经常会遇到各种问...

    2 年前
  • npm 包 koa-test 使用教程

    Koa 是一款 Node.js 的框架，用于编写 Web 应用程序和 API。简单易用、轻量级和高度可定制的特性是 Koa 受欢迎的原因之一。但是，开发者在编写测试用例时，可能会遇到一些麻烦。

    2 年前
  • npm 包 react-hide-div 使用教程

    在前端开发中，经常需要动态隐藏或显示某个元素。本文介绍一个开源的 npm 包 react-hide-div，通过它我们可以很方便地实现元素的隐藏和显示。 安装 使用 npm 安装 react-hide...

    2 年前
  • npm 包 @igorline/react-virtualized 使用教程

    前言 在一个前端页面，如果一次性渲染大量的数据元素，会导致页面的效率严重下降，这时候我们需要使用虚拟化列表技术。 @igorline/react-virtualized 是一个强大的 React 组件...

    2 年前
  • npm包grunt-protractor-runner-temp使用教程

    1.前言 在前端开发中，自动化测试是不可或缺的一部分。Protractor是一种流行的自动化测试框架，由于其易于使用和高效性，成为了许多前端工程师的首选。而 grunt-protractor-runn...

    2 年前
  • npm 包 midd-compose 使用教程

    npm 包 midd-compose 使用教程 前言 在 Web 开发中，中间件是一种非常重要的概念。中间件是一个函数，用于在请求处理过程中对请求和响应进行处理。通常情况下，对于一个应用场景来说，可能...

    2 年前
  • npm 包 react-native-maps-benestudio 使用教程

    简介 react-native-maps-benestudio 是一个帮助 React Native 应用程序添加 Google Maps API 功能的 npm 包。

    2 年前
  • npm 包 stalk-my-friends 使用教程

    介绍 stalk-my-friends 是一款前端 npm 包，用于根据电子邮件地址或手机号码搜索社交网络上的好友。它可以集成到你的网站或应用程序中，帮助你查找你的用户的好友，从而提高你的应用程序的社...

    2 年前
  • npm 包 vue-hello-plugin 使用教程

    前言 在前端开发中，我们经常会用到各种各样的 npm 包来辅助我们的工作，而 vue-hello-plugin 就是一个非常实用的插件。本文将介绍如何使用该插件，并深入探讨其实现原理。

    2 年前
  • npm 包 botmaster-enrich 使用教程

    概述 在聊天机器人领域中，许多开发者都有一些需求，即想要从聊天记录中提取出更多有用的信息，进而为机器人提供更个性化、更有针对性的回复。为了提高开发效率，我们通常会使用一些 npm 包来实现这个功能。

    2 年前
  • npm 包 ng-plural-form 使用教程

    在前端开发中，经常需要处理语言本地化和复数形式的问题。而 AngularJS 框架自带的 AngularJS pluralization（复数形式）并不十分好用。因此，有一个社区成员开发了一个 Ang...

    2 年前
  • npm 包 nutty-util 使用教程

    简介 nutty-util 是一个 npm 包，提供了很多常用的前端工具函数，比如常见的字符串处理、日期格式处理、数组处理、以及一些便捷的工具函数等等。使用这个包可以让前端开发变得更加高效。

    2 年前
  • npm 包 leaflet.hardbounds 使用教程

    引言 随着 Web 技术的发展，前端在地图可视化方面的应用也越来越广泛，而 Leaflet 作为一个轻量级的 JavaScript 地图框架，在开发中也变得越来越受欢迎。

    2 年前
  • npm包underscore.excerpt使用教程

    简介 underscore.excerpt 是一款基于 JavaScript 库 Underscore.js 的一个小工具，其作用是将一段长文本截取为一定的长度，并加上省略号，以便在页面上显示更加美观...

    2 年前
  • npm 包 @jukhan/zaitun 使用教程

    npm 是 Node.js 的包管理器，它可以让我们轻松地安装和管理 Node.js 模块和包。@jukhan/zaitun 就是一个非常优秀的 Node.js 包，它提供了一系列易于使用、高效且功能...

    2 年前
  • npm 包 json.human 使用教程

    简介 json.human 是一款 NPM 包，它可以将 JSON 数据转换成易于阅读和理解的文本格式，非常适合前端工程师在开发和调试过程中进行数据格式化输出。 安装 在终端中执行以下命令： --- ...

    2 年前
  • npm 包 s3-list-all-objects 使用教程

    简介 s3-list-all-objects 是一个用于列出 Amazon S3 存储桶中所有对象的 npm 包。它可以帮助前端开发人员快速地遍历存储桶的每个对象，并返回其键（自定义对象名称）列表。

    2 年前

相关推荐

    暂无文章