uview-plus组件库快速入门【uni-app 移动端开发进阶必备】

灵眸幻翎

已于 2024-10-30 21:15:15 修改

阅读量4.4k

点赞数 15

文章标签： uni-app 前端

于 2024-10-30 21:14:12 首次发布

本文链接：https://blog.csdn.net/qq_69183322/article/details/143355242

版权

（2）在引入并使用uview-plus的JS库

（3）引入uview-plus的全局SCSS主题文件

prefixIcon，suffixIcon 前后图标

:lines 文本超出隐藏：

一、简介

（1）uview-plus介绍

uView-plus 3.0 是一款基于 Vue 3 的 UI 框架，专为 uni-app 生态设计，以实现跨平台应用的高效开发。这个框架继承并优化了 uView 2.x 版本的优点，如丰富的组件库、强大的自定义能力和优秀的性能表现。uView-plus 3.0 强调其灵活性和可扩展性，适用于构建从复杂的管理系统到轻量级的移动应用等多种应用场景。此外，它还提供了多种主题样式选择，以增强用户体验。

（2）uview-plus 官网链接

uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架http://uview-plus.jiangruyi.com/

二、安装

我这里推荐两种安装方式

（1）HBuilderX直接下载插件

下载链接如下所示：

零云®uview-plus3.0重磅发布，全面的Vue3移动组件库。 - DCloud 插件市场https://ext.dcloud.net.cn/plugin?name=uview-plus不过这种方式需要看30秒的广告

（2）通过Npm安装：

在根目录执行下面的命令

npm install uview-plus

三、配置

（1）安装 scss

uview-plus依赖scss，如果不按照scss，就无法正常运行

如果已经安装了scss，可以选择略过

// 安装sass
npm i sass -D

// 安装sass-loader
npm i sass-loader -D

（2）在引入并使用uview-plus的JS库

在main.js中引入并使用uview-plus的JS库，引入相关代码：

import uviewPlus from '@/uni_modules/uview-plus'

app.use(uviewPlus)

引入位置如下所示：

（3）引入uview-plus的全局SCSS主题文件

在uni.scss中引入此文件

@import '@/uni_modules/uview-plus/theme.scss';

（4）引入uview-plus基础样式

在App.vue中，引入下面代码：

	@import "@/uni_modules/uview-plus/index.scss";

注意：注意给App.vue中的style标签加入lang="scss"属性

（5）安装依赖库

npm i dayjs
npm i clipboard

（6）配置easycom组件模式

在pages.json中：

{
	"easycom": {
		"autoscan": true,
		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
	    "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
		}
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

四、组件示例 - 文本

我就以文本组件示例，跟着大家一起打开uview-plus的组件库的大门吧！

text 基本文本

文本的基本使用：在text参数中定义文兵值

<up-text text="Hello World"></up-text>

显示效果：就是Hello World

type 主题色

使用 type参数，可以选择文本的主题色

		<up-text type="primary" text="Hello World"></up-text>
		<up-text type="error"   text="Hello World"></up-text>
		<up-text type="success" text="Hello World"></up-text>
		<up-text type="warning" text="Hello World"></up-text>
		<up-text type="info"    text="Hello World"></up-text>

显示效果：

phone 电话

在phone的文本模式中，显示的文本和text中的值一样，不过这段代码会在页面上显示一个电话号码，并且当用户点击这个号码时，会尝试调用设备的电话应用，以便拨打该号码。

虚假电话号码示例：

<up-text mode="phone" text="199919479399990"></up-text>

date 时间日期

在date的文本模式中，text中代表从1970-01-01至今的时间戳

<up-text mode="date" text="1612959739"></up-text>

如果不填写text参数，则显示今天时间

<up-text mode="date"></up-text>

name 姓名脱敏

name的文本模式，是为姓名进行脱敏，只显示首和尾的单个字，其余使用 * 号进行代替

<up-text mode="name" text="张三三三三" format="encrypt"></up-text>

显示效果：

link 超链接

在link文本模式中，href为调整的地址，点击该文本即可跳转所制定的地址

<up-text mode="link" text="跳转到uview-plus文档" href="https://www.uviewui.com" ></up-text>

price 显示金额

在显示金额的模式中，会给text保留2位小数，同时在该数字前加上金钱的符号

<up-text mode="price" text="520.1314"></up-text>

显示效果：

prefixIcon，suffixIcon 前后图标

prefixIcon参数，在文本前添加指定图标

<up-text prefixIcon="phone" iconStyle="font-size: 19px" text="拨打电话"></up-text>

显示效果：

suffixIcon参数，在文本后添加指定图标

<up-text suffixIcon="arrow-leftward" iconStyle="font-size: 18px" text="查看更多"></up-text>

显示效果：

:lines 文本超出隐藏：

通过:lines 参数指定最长显示文本行，不显示的部分使用 ... 显示

<up-text :lines="3" text="uView-plus 3.0 是一款基于 Vue 3 的 UI 框架，专为 uni-app 生态设计，以实现跨平台应用的高效开发。这个框架继承并优化了 uView 2.x 版本的优点，如丰富的组件库、强大的自定义能力和优秀的性能表现。uView-plus 3.0 强调其灵活性和可扩展性，适用于构建从复杂的管理系统到轻量级的移动应用等多种应用场景。此外，它还提供了多种主题样式选择，以增强用户体验。"></up-text>

显示效果：