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组件才能正常使用。

相关推荐
铁蛋Q4 分钟前
进程的状态
linux·服务器·ubuntu
sunxunyong21 分钟前
Linux 删除文件不释放空间问题处理
大数据·linux·运维·服务器
一只特立独行的猪6111 小时前
Java面试——集合篇
java·开发语言·面试
让开，我要吃人了2 小时前
HarmonyOS开发实战（5.0）实现二楼上划进入首页效果详解
前端·华为·程序员·移动开发·harmonyos·鸿蒙·鸿蒙系统
讓丄帝愛伱2 小时前
spring boot启动报错：so that it conforms to the canonical names requirements
java·spring boot·后端
weixin_586062022 小时前
Spring Boot 入门指南
java·spring boot·后端
DC_BLOG3 小时前
IPv6(四)
运维·服务器·网络·ip
shelby_loo3 小时前
通过 Docker 部署 MySQL 服务器
服务器·mysql·docker
everyStudy3 小时前
前端五种排序
前端·算法·排序算法
ZBzibing3 小时前
[游戏技术]L4D服务器报错解决
服务器·游戏
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04【halcon】halcon字符识别——OCR05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提072024年网络安全比赛--系统渗透测试（超详细）08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10分享几个惊艳的 Three.js 个人站点