uniApp怎样使用uView写一个时间选择器

目录

效果展示

安装uView

HX插件安装运行

npm安装

配置uView

组件中正式使用

不想跳页面是吧，帮你整点u-picker的API

---

效果展示

uView制作时间选择器效果图

安装uView

首先需要安装scss

• 项目是由HBuilder X创建的，在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装
• 项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持

//项目中没有package.json需要先初始化
npm init -y
//安装node-sass
npm i node-scss -D
//安装sass-loader
npm i sass-loader -D

HX插件安装运行

首先项目中引入View UI,安装方法如下（HBuilder X 导入插件）：

• 途径一：uView示例项目已内置到HBuilder X中，在文件 -> 新建 -> 项目 -> uni-app中，找到uView UI下载运行即可。
• 途径二：在uni-app插件市场右上角选择使用 HBuilderX 导入示例项目或者下载示例项目ZIP，然后在HBuilder X中运行即可。
• uni-app插件市场地址：uView - DCloud 插件市场

npm安装

另外，项目使用vue-cli创建的，使用npm安装

//安装：
npm install uview-ui@1.8.8
更新
npm update uview-ui

配置uView

1.  引入uView主JS库

        在main.js引入并使用uView的js库，此两行要在import Vue之后

// main.js
import uView from "uview-ui";
Vue.use(uView);

 2. 引入uView的全局SCSS主题文件

        在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

3. 引入uView基础样式

        在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

4. 配置easycom组件模式

        此配置需要在项目根目录的pages.json中。

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

要注意的是：

• uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
• 请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

组件中正式使用

此处选择的时组件picker选择器。

        使用u-picker：

1. mode选择为time,
2. :params：需要显示的参数，mode=region或mode=time时有效
3. v-model:设置为boolean值，控制选择器打开/关闭；
4. @confrim：回调事件，用于返回组件内部选择好的值，回调的参数为一个对象，属性和传递给picker组件的params对象的属性值为true的属性。

<template>
<view> 
<-- 组件中调用选择器 -->
<u-picker mode="time" v-model="show" :params="params" @confirm="confirmtime"
cancel="canceltime"></u-picker>
<--使用u-input组件控制选择器展开或收起，同时接收返回的选择值-->
<u-input v-model="time" border="true" border-color="#dcdfe6" 
@click="show = true" placeholder="选择时间"/>
</view>
</template>

组件数据响应部分：

<script>
export default {
    data(){
        return {
            //u-picker组件选择器mode设置mode=time，params用于控制选择器中的选项，年月日，时分秒，Boolean为true，在选择器中，就会有对应选项，在调用回调函数时就有对应属性的返回值。
            params: {
						year: true,
						month: true,
						day: true,
					    hour: true,
						minute: true,
						second: true
					},
        //用于动态获取选择的时间
			time:'',
        }
    },
    methods: {
    //用于返回选择器选择的数据。
        confirmtime(e){
			console.log(e);
            //此处实现选择器值的接收
			this.time = e.year +'-'+ e.month + '-'+
             e.day+' '+ e.hour + ':'+ e.minute+ ':'+ e.second
		},
    }
}
</script>

不想跳页面是吧，帮你整点u-picker的API

参数	说明	类型	默认值	可选值
params	需要显示的参数，见上方说明，mode=region或mode=time时有效	Object	-	-
mode	模式选择，region-地区模式，time-时间模式，selector-单列模式，multiSelector-多列模式	String	time	region / selector / multiSelector
start-year	可选的开始年份，mode=time时有效	String | Number	1950	-
end-year	可选的结束年份，mode=time时有效	String | Number	2050	-
safe-area-inset-bottom	是否开启底部安全区适配	Boolean	false	true
cancel-color	取消按钮的颜色	String	#606266	-
confirm-color	确认按钮的颜色	String	#2979ff	-
default-time	默认选中的时间，mode=time时有效，需在onReady生命周期赋值，见顶部说明	String	-	-
default-region	默认选中的地区，中文形式，mode=region时有效，需在onReady生命周期赋值，见顶部说明	Array	-	-
area-code	默认选中的地区，编号形式，mode=region时有效	Array	-	-
default-selector	数组形式，其中每一项表示选择了range对应项中的第几个(下标从0开始)，见上方说明	Array	[]	-
mask-close-able	是否允许通过点击遮罩关闭Picker	Boolean	true	false
show-time-tag	时间模式时，是否显示后面的年月日中文提示	Boolean	true	false
z-index	弹出时的z-index值	String | Number	10075	-
range	自定义选择的数据，mode=selector或mode=multiSelector时有效	Array	[]	-
range-key	当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容，见上方说明	String	-	-

Events

事件名	说明	回调参数	版本
confirm	点击确定按钮，返回当前选择的值	Object: 见上方"回调参数"部分说明	-
cancel	点击取消按钮，返回当前选择的值	Object: 见上方"回调参数"部分说明	-
columnchange	列发生改变时触发，只对mode = multiSelector时有效	{column: column, index: index}: 见上方"回调参数"部分说明