uview组件使用笔记

王家视频教程图书馆2023-10-20 20:13

图标样式

修改图标的样式

  • 通过color参数修改图标的颜色
  • 通过size参数修改图标的大小，单位为rpx

效果图

<u-icon name="photo" color="#2979ff" size="28"></u-icon>

图片图标 1.3.0

这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为png格式的正方形图标。

上面说到，给组件的name参数传入一个图片的名称即可显示字体图标，这些名称中不能带有/斜杠符号，否则会被认为是传入了图片图标，同时，size参数 也被设置为这个图片图标的宽度，由于是图片，诸如颜色color等参数都会失效。

<u-icon label="uView" size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>

效果图

<u-image width="100%" height="300rpx" :src="src"></u-image>

设置按钮为半圆形

shape默认值为square(按钮为圆角矩形)，设置为circle，则按钮两边为半圆形

<u-button shape="square">乌啼</u-button>

设置尺寸

button组件的size（可选值为default(默认)，mini(小尺寸)和medium(中等尺寸)）

<u-button size="default">江湖</u-button>
<u-button size="medium">夜雨</u-button>
<u-button size="mini">十年灯</u-button>

设置点击按钮的水波纹效果

该效果通过给按钮绝对定位形式覆盖一个view，点击时改变view的scale，opacity样式属性，形成扩散再消失的水波纹效果。

<u-button :ripple="true">十年</u-button>

<!-- 通过rippleBgColor设置水波纹的背景颜色 -->
<u-button :ripple="true" ripple-bg-color="#909399">之约</u-button>

Tag 标签

该组件一般用于标记和选择，有如下特点：

  • mode参数可以设置3种模式，dark(深色背景)、light(浅色背景)、plain(白色背景)
  • shape参数可以设置多种形状，circle（两边半圆形）, square（方形，带圆角），circleLeft（左边半圆），circleRight（右边半圆）
  • type参数可以设置5种主题，primary，success，warning，error，info

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ √ √ √ √

基本使用

  • 通过type参数设置主题类型，默认为primary

  • text设置标签内容

    <u-tag text="雪月夜" type="success" />

设置标签的类型

  • 通过设置mode参数，可以设置标签的类型，dark(深色背景)、light(浅色背景)、plain(白色背景)

    <u-tag text="一丘之貉" mode="dark" /> <u-tag text="沆瀣一气" mode="light" /> <u-tag text="狼狈为奸" mode="plain" />

设置标签的形状

通过shape参数，可以设置标签的形状，默认是square（方形，带圆角），可选：circle（两边半圆形）, circleLeft（左边半圆），circleRight（右边半圆）

<u-tag text="主谓宾" shape="circle" />
<u-tag text="定状补" shape="circleLeft" />

设置标签是否可以关闭

效果图

设置closeable参数为true，会在标签上自动添加一个关闭图标

设置可关闭后，点击关闭按钮，会发出close事件，回调中手动设置show参数为false，可以隐藏Tag

<template>
	<u-tag text="要清楚" closeable :show="show" @close="tagClick" />
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			tagClick(index) {
				this.show = false;
			}
		}
	}
</script>

Input 输入框 1.3.0

效果图

此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。

注意： 当您仅是需要一个输入框的话，可以考虑使用u-field组件，而如果是一个表单组，比如有多个输入框一起，且需要验证功能的时候， 应该在u-form中嵌套u-form-item，再嵌套u-input去实现。

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ √ √ √ √

基本使用

  • 通过v-model绑定输入框的值

  • 通过type设置输入框的类型

  • 通过border配置是否显示输入框的边框

    <template> <u-input v-model="value" :type="type" :border="border" /> </template> <script> export default { data() { return { value: '', type: 'text', border: true } } } </script>

日历模式

  • mode为date只能选择单个日期
  • mode为range可以选择日期范围

单个日期模式

选择日期后，需要点击底部的确定按钮才能触发回调事件，回调参数为一个对象，有如下属性：

{
	day: 4, // 选择了哪一天
	days: 30, // 这个月份有多少天
	isToday: true, // 选择的日期是否今天
	month: 6, // 选择的月份
	result: "2020-06-04", // 选择的日期整体值
	week: "星期四", // 选择日期所属的星期数
	year: 2020 , // 选择的年份
}

示例代码：

<template>
	<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}
	}
</script>

效果图

自定义内容

效果图

组件有一个默认插槽，名为tooltip，传入的内容将会显示在键盘的顶部位置，如使用，需要为传入的内容自定义样式。

<template>
	<u-calendar 
	month-arrow-color="#FF55FF"
	year-arrow-color="#FF55FF"
	color="#FF55FF"
	active-bg-color="#FF55FF"
	active-color="#FF22FF"
	range-bg-color="#FF22FF"
	range-color="#FF22FF"
	 v-model="show" :mode="mode" @change="change">
		<view slot="tooltip">
			<view class="title">
				请选择住店/离店时间
			</view>
		</view>
	</u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-type-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

API

Props

参数 说明 类型 默认值 可选值
mode 选择日期的模式，date-为单个日期，range-为选择日期范围 String date range
v-model 布尔值变量，用于控制日历的弹出与收起 Boolean false true
safe-area-inset-bottom 是否开启底部安全区适配 Boolean false true
change-year 是否显示顶部的切换年份方向的按钮 Boolean true false
change-month 是否显示顶部的切换月份方向的按钮 Boolean true false
max-year 可切换的最大年份 Number | String 2050 -
min-year 可切换的最小年份 Number | String 1950 -
min-date 最小可选日期 Number | String 1950-01-01 -
max-date 最大可选日期 Number | String 当前日期 -
border-radius 弹窗顶部左右两边的圆角值，单位rpx Number | String 20 -
mask-close-able 是否允许通过点击遮罩关闭日历 Boolean true false
month-arrow-color 月份切换按钮箭头颜色 String #606266 -
year-arrow-color 年份切换按钮箭头颜色 String #909399 -
color 日期字体的默认颜色 String #303133 -
active-bg-color 起始/结束日期按钮的背景色 String #2979ff -
z-index 弹出时的z-index值 String | Number 10075 -
active-color 起始/结束日期按钮的字体颜色 String #ffffff -
range-bg-color 起始/结束日期之间的区域的背景颜色 String rgba(41,121,255,0.13) -
range-color 选择范围内字体颜色 String #2979ff -
start-text 起始日期底部的提示文字 String 开始 -
end-text 结束日期底部的提示文字 String 结束 -
btn-type 底部确定按钮的主题 String primary default / success / info/ warning / error
toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效 String 选择日期 -
closeable 是否显示右上角的关闭图标 Boolean true false

select列选择器

效果图

单列模式

此方式使用较为简单，需要传入一个一维数组，数组的元素为对象，要求必须有value和label属性，这两个值也将会在回调中被返回。

<template>
	<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				list: [
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
			}
		},
		methods: {
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

Keyboard 键盘

效果图

此为uView自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ √ √ √ √

基本使用

通过mode参数定义键盘的类型，v-model绑定一个值为布尔值的变量控制键盘的弹出与收起：

  • mode = number (默认值)为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"

  • mode = car 为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"

  • mode = card 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"

    <template> <view> <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false } } } </script>

Rate 评分

该组件一般用于满意度调查，星型评分的场景。

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ √ √ √ √

基本使用

  • 通过count参数设置总共有多少颗星星可选择

  • 通过v-model双向绑定初始化时默认选中的星星数量 1.4.5新增

  • 通过current设置初始化时默认选中的星星数量(1.4.5后建议使用v-model的方式，此参数为了向前兼容依然有效，但优先级低于v-model)

    <template> <u-rate :count="count" v-model="value"></u-rate> </template> <script> export default { data() { return { count: 4, value: 2 } } } </script>

自定义样式

  • 通过active-color设置选中的星星的颜色

  • 通过inactive-color设置未选中时星星的颜色

  • 通过gutter设置星星的间距，左右内边距各占gutter的一半

    <u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>

自定义图标

  • 通过active-icon设置激活的图标
  • 通过inactive-icon设置未激活的图标
  • 通过custom-prefix设置自定义图标，详见：扩展自定义图标库

下方示例为使用心形图标替代默认的星星图标：

<u-rate active-icon="heart-fill" inactive-icon="heart"></u-rate>

评分分级分层 1.7.2

  • 通过colors设置不同颜色区分评分层级

  • 通过icons设置不同类型图标区分评分层级

    <template> <view> <u-rate v-model="value" :colors="colors" :icons="icons" inactive-icon="thumb-up"></u-rate> </view> </template> <script> export default { data() { return { value: 2, colors: ['#ffc454', '#ffb409', '#ff9500'], icons: ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'] } } } </script>

最少选中的数量

<u-rate :min-count="5"></u-rate>

禁用状态

禁用下，无法点击或者滑动选择，但是可以通过current设置默认选中的数量，禁用状态下用来展示分数，允许出现半星

<u-rate :current="3.7" :disabled="true"></u-rate>

API

Props

参数 说明 类型 默认值 可选值
v-model 1.4.5 双向绑定选择星星的数量 String | Number 0 -
count 最多可选的星星数量 String | Number 5 -
current 默认选中的星星数量，1.4.5起建议使用v-model方式 String | Number 0 -
disabled 是否禁止用户操作 Boolean false true
size 星星的大小，单位rpx String | Number 32 -
inactive-color 未选中星星的颜色 String #b2b2b2 -
active-color 选中的星星颜色 String #FA3534 -
gutter 星星之间的距离 String | Number 10 -
min-count 最少选中星星的个数 String | Number 0 -
active-icon 选中时的图标名，只能为uView的内置图标 String star-fill -
inactive-icon 未选中时的图标名，只能为uView的内置图标 String star -
custom-prefix 1.7.2 自定义字体图标库时，需要写上此值，详见：扩展自定义图标库

|------------------------------------------------------------------------------------------|---------------------------|-------|---|---|
| (opens new window) | String | uicon | - |
| colors 1.7.2 | 颜色分级显示，可以用不同颜色区分评分层级 | Array | - | - |
| icons 1.7.2 | 图标分级显示，可以用不同类型的icon区分评分层级 | Array | - | - |

实际应用效果图：

<template>

<view>

<u-keyboard ref="uKeyboard" mode="number" v-model="show"></u-keyboard>

<u-button @click="show = true">打开</u-button>

<u-rate @change="change" active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>

</view>

</template>

<script>

export default {

data() {

return {

show: false,

num:''

}

},

methods:{

change(e){

console.log(e)

}

}

}

</script>

Events

事件名 说明 回调参数
change 选中的星星发生变化时触发 value：当前选中的星星的数量，如果使用v-model双向绑定方式，无需监听此事件

<template>

<view>

<u-keyboard ref="uKeyboard" mode="number" v-model="show"></u-keyboard>

<u-button @click="show = true">打开</u-button>

<u-rate @change="change_rate" active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>

<u-search @change="change_search"

:show-action="true" action-text="搜索"

:animation="true"

bg-color="#ffff7f"

color

></u-search>

</view>

</template>

<script>

export default {

data() {

return {

show: false,

num:''

}

},

methods:{

change_rate(e){

console.log(e)

},

change_search(e){

console.log(e)

},

}

}

</script>

<template>

<view>

<u-keyboard ref="uKeyboard" mode="number" v-model="show"></u-keyboard>

<u-button @click="show = true">打开</u-button>

<u-rate @change="change_rate" active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>

<u-search @change="change_search"

:show-action="true" action-text="搜索"

:animation="true"

bg-color="#ffff7f"

color

></u-search>

</view>

</template>

<script>

export default {

data() {

return {

show: false,

num:''

}

},

methods:{

change_rate(e){

console.log(e)

},

change_search(e){

console.log(e)

},

}

}

</script>

NumberBox 步进器

<template>

<u-number-box v-model="value" @change="valChange"></u-number-box>

</template>

<script>

export default {

data() {

return {

value: 0

}

},

methods: {

valChange(e) {

console.log('当前值为: ' + e.value)

}

}

}

</script>

Upload 上传

该组件用于上传图片场景

<template>

<view>

<u-upload ref="uUpload" :action="action" :auto-upload="false" ></u-upload>

<u-button @click="submit">提交</u-button>

</view>

</template>

<script>

export default {

data() {

return {

// 非真实地址

action: 'http://www.example.com/upload',

}

},

methods: {

submit() {

this.$refs.uUpload.upload();

},

}

}

</script>

VerificationCode 验证码倒计时

<template>

<view class="wrap">

<u-toast ref="uToast"></u-toast>

<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"

@change="codeChange"></u-verification-code>

<u-button @tap="getCode">{{tips}}</u-button>

</view>

</template>

<script>

export default {

data() {

return {

tips: '',

// refCode: null,

seconds: 10,

}

},

onReady() {

// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会

// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量

// this.refCode = this.$refs.uCode;

},

methods: {

codeChange(text) {

this.tips = text;

},

getCode() {

if(this.$refs.uCode.canGetCode) {

// 模拟向后端请求验证码

uni.showLoading({

title: '正在获取验证码'

})

setTimeout(() => {

uni.hideLoading();

// 这里此提示会被this.start()方法中的提示覆盖

this.$u.toast('验证码已发送');

// 通知验证码组件内部开始倒计时

this.$refs.uCode.start();

}, 2000);

} else {

this.$u.toast('倒计时结束后再发送');

}

},

end() {

this.$u.toast('倒计时结束');

},

start() {

this.$u.toast('倒计时开始');

}

}

}

</script>

<style lang="scss" scoped>

.wrap {

padding: 24rpx;

}

</style>

手机验证码需要用到阿里云的短信服务搭配以下两个组件使用：

Checkbox 复选框

复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ √ √ √ √

基本使用

  • 该组件无需强制搭配checkboxGroup组件使用(视情况而定)，可以单个独立使用u-checkbox组件

  • 通过v-model给checkbox绑定一个变量，这个绑定的变量是双向的(初始值只能是true或者false)，也就是说，您可以无需监听checkbox或者checkboxGroup组件的change事件，也能知道哪个复选框 被勾选了

    <template> <view class=""> <u-checkbox-group @change="checkboxGroupChange"> <u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name" >{{item.name}}</u-checkbox> </u-checkbox-group> <u-button @click="checkedAll">全选</u-button> </view> </template> <script> export default { data() { return { list: [ { name: 'apple', checked: false, disabled: false }, { name: 'banner', checked: false, disabled: false }, { name: 'orange', checked: false, disabled: false } ] }; }, methods: { // 选中某个复选框时，由checkbox时触发 checkboxChange(e) { //console.log(e); }, // 选中任一checkbox时，由checkbox-group触发 checkboxGroupChange(e) { // console.log(e); }, // 全选 checkedAll() { this.list.map(val => { val.checked = true; }) } } }; </script>

Radio 单选框

单选框用于有一个选择，用户只能选择其中一个的场景。

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ √ √ √ √

基本使用

  • 该组件需要搭配radioGroup组件使用，以便用户进行操作时，获得当前单选框组的选中情况，当然，您也可以单独对某个radio进行事件监听
  • 通过v-model给radioGroup组件绑定一个变量，这个绑定的变量是双向的(初始值只能是true或者false)，也就是说，您可以无需监听radio或者radioGroup组件的change事件，也能知道哪个 被勾选了

注意： 由于radio组件需要由radioGroup组件提供参数值，这些父子组件间通过Vue的"provide/inject"特性注入依赖， 所以您必须使用radioGroup包裹radio组件才能正常使用。

相关推荐
camellias_5 分钟前
SpringBoot（二十三）SpringBoot集成JWT
java·spring boot·后端
tebukaopu1487 分钟前
springboot如何获取控制层get和Post入参
java·spring boot·后端
昔我往昔7 分钟前
SpringBoot 创建对象常见的几种方式
java·spring boot·后端
q567315238 分钟前
用 PHP或Python加密字符串，用iOS解密
java·python·ios·缓存·php·命令模式
DC_BLOG12 分钟前
Mysql-DDL语句
服务器·数据库·mysql
灭掉c与java13 分钟前
第三章springboot数据访问
java·spring boot·后端
啊松同学42 分钟前
【Java】设计模式——工厂模式
java·后端·设计模式
枫叶_v1 小时前
【SpringBoot】20 同步调用、异步调用、异步回调
java·spring boot·后端
raysync8881 小时前
镭速大文件传输软件向金融银行的文档管理提供高效的解决方案
服务器·网络·金融
鸣弦artha1 小时前
蓝桥杯——杨辉三角
java·算法·蓝桥杯·eclipse
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04智能车联网安全发展形势、挑战05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07Python数据分析案例31——中国A股的月份效应研究(方差分析，虚拟变量回归)08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10怎样让音频速度变慢？请跟随以下方法进行操作