uView学习（持续更新中）
uView1.x版本组件
一.uView页面基础布局
<template>
<view>
<u-navbar :is-back="true" title="自定义标题" :background="bgColor" title-color="#000" :title-bold="true">
u-navbar>
<u-form :model="form" ref="uForm" :rules="rules">
u-form>
view>
template>
<script>
export default {
data() {
return {
bgColor: {
backgroundImage: '#fff'
},
form: {},
rules: {}
}
},
onLoad() {
},
methods: {}
}
script>
<style lang="scss">
style>
二、Form表单
1、input输入框
<u-form-item label="姓名：" label-width="150" prop="nameCn">
<u-input v-model="form.nameCn" placeholder="请输入姓名"/>
u-form-item>
2.文本框
<u-form-item label="备注：" label-width="100" prop="remark">
<u-input v-model="form.remark" type="textarea" placeholder="请输入备注"/>
u-form-item>
3.Radio 单选框
<u-form-item label="是否有家属：" label-width="150" prop="familyOr">
<u-radio-group v-model="form.familyOr">
<u-radio
v-for="(item, index) in list"
:key="index"
:name="item.value">
{{item.label}}
u-radio>
u-radio-group>
u-form-item>
<script>
export default {
data() {
return {
list: [],
form: {
familyOr: ''
},
rules: {}
}
},
onLoad() {
this.$u.api.dictData({dictType: 'sys_yes_no'}).then(res => {
res.data.forEach(item => {
this.list.push({label: item.dictLabel, value: item.dictValue})
})
})
}
}
script>
4.Checkbox 复选框
<u-form-item class="form-label" label-width="40%" label="申请事由：">
<u-checkbox-group @change="checkboxGroupChange" :wrap="true" size="28">
<u-checkbox
v-model="item.checked"
v-for="(item, index) in reasonList" :key="index"
:name="item.label"
shape="circle"
active-color="red"
>{{item.label}}
u-checkbox>
u-checkbox-group>
u-form-item>
<script>
export default {
data() {
return {
reasonList: [],
form: {
applyReason: ''
}
}
},
onLoad() {
this.$u.api.dictData({dictType: 'biz_apply_rea'}).then(res => {
res.data.forEach(item => {
this.reasonList.push({label: item.dictLabel, value: item.dictValue})
})
})
},
methods: {
// 选中任一checkbox时，由checkbox-group触发
checkboxGroupChange(e) {
this.form.applyReason = e.join(',');
console.log(this.form.applyReason);
}
}
}
script>
5.Select 列选择器（下拉框）
第一种写法
<u-form-item label-width="150" label="性别：" prop="gender">
<u-input type="select" v-model="form.gender" placeholder="请选择性别"
@click="showGender = true">u-input>
u-form-item>
<u-select v-model="showGender" :list="genderList" @confirm="confirmGender">u-select>
<script>
export default {
data() {
return {
gender: '',
showGender: false,
genderList: [],
form: {
gender: ''
}
}
},
onLoad() {
this.$u.api.dictData({dictType: 'sys_user_sex'}).then(res => {
res.data.forEach(item => {
this.genderList.push({label: item.dictLabel, value: item.dictValue})
})
})
},
methods: {
confirmGender(e) {
this.form.gender = e[0].label;
this.gender = e[0].value
}
}
}
script>
第二种写法
<u-form-item label-width="150" label="性别：" prop="gender">
<u-input type="select" v-model="form.gender" placeholder="请选择性别"
@click="showGender = true">u-input>
u-form-item>
<u-action-sheet v-model="showGender" :list="genderList" @click="confirmGender">u-action-sheet>
<script>
export default {
data() {
return {
gender: '',
showGender: false,
genderList: [],
form: {
gender: ''
},
}
},
onLoad() {
this.$u.api.dictData({dictType: 'sys_user_sex'}).then(res => {
res.data.forEach(item => {
this.genderList.push({text: item.dictLabel, value: item.dictValue})
})
})
},
methods: {
confirmGender(index) {
this.form.gender = this.genderList[index].text;
this.gender = this.genderList[index].value;
}
}
}
script>
6.Picker 选择器，时间模式
<u-form-item label="出生日期：" label-width="150" prop="birthTime">
<u-input type="select" v-model="form.birthTime" placeholder="请选择出生日期" @click="pickerTime = true"/>
u-form-item>
<u-picker mode="time" v-model="pickerTime" @confirm="timeConfirm">u-picker>
<script>
export default {
data() {
return {
pickerTime: false,//控制日期显示
form: {
birthTime: ''
}
}
},
methods: {
//日期数据回调
timeConfirm(e) {
this.form.birthTime = e.year + '-' + e.month + '-' + e.day;
}
}
}
script>
7.Picker 选择器，地区模式，eg：行政区划
<u-form-item label="行政区划：" label-width="150" prop="area">
<u-input type="select" v-model="form.area" placeholder="请选择行政区划" @click="show = true"/>
u-form-item>
<u-picker mode="region" v-model="show" @confirm="confirm">u-picker>
<script>
export default {
data() {
return {
show: false,
form: {
area: ''
}
}
},
methods: {
// 选择地区回调
confirm(e) {
this.form.area = e.province.label + '-' + e.city.label + '-' + e.area.label
}
}
}
script>
8.Upload 上传图片
<u-form-item label="头像：" label-width="180">
<u-upload :before-remove="beforeRemove" ref="uUpload"
:custom-btn="customBtn"
:show-upload-list="showUploadList"
:action="action"
:auto-upload="autoUpload"
:file-list="fileList"
:show-progress="showProgress"
:deletable="deletable"
:max-count="maxCount"
@on-list-change="onListChange">
u-upload>
u-form-item>
<script>
export default {
data() {
return {
// 是否通过slot自定义传入选择图标的按钮
customBtn: false,
//是否显示图片预览功能
showUploadList: true,
// 是否自动上传
autoUpload: false,
// 是否显示进度条
showProgress: true,
// 是否显示删除图片按钮
deletable: true,
// 最大上传数量
maxCount: 1,
// 预置上传列表
fileList: [],
action: 'http://127.0.0.1:7001/upload'
}
},
methods: {
// 移除文件前的钩子
beforeRemove(index, lists) {
return true;
},
onListChange(lists) {
this.form.image= lists[0].url
}
}
}
script>
提交功能
<u-button @click="submitForm" class="submit-btn">提交u-button>
<script>
export default {
methods: {
submitForm() {
this.$refs.uForm.validate(valid => {
if (valid) {
this.$u.api.addRegister({
xxx: this.form.xxx,
})
.then(res => {
if (res.msg) {
this.$u.toast('提交成功');
}
if (res.code == '200') {
uni.reLaunch({
url: '/pages/sys/workbench/index'
});
}
});
} else {
this.$u.toast('信息有误，请根据提示填入信息');
}
});
}
},
onReady() {
this.$refs.uForm.setRules(this.rules);
}
}
script>
uView2.x版本组件
1.下拉框
<u-form-item label="办证厅：" label-width="70" prop="handleCert" @click="show = true;">
<u--input v-model="form.handleCert" placeholder="请选择办证厅" border="none" fontSize="13px"/>
<u-icon slot="right" name="arrow-right"/>
u-form-item>
<u-picker :show="show" :columns="columns" @cancel="show=false" title="请选择办证厅" @confirm="confirm">u-picker>
<script>
export default {
data() {
return {
show: false,
columns: [
['甘肃', '陕西', '四川']
],
form: {
handleCert: ''
}
}
},
methods: {
confirm(e) {
this.form.handleCert = e.value.join(',')
console.log('confirm', this.form.handleCert);
this.show = false
}
}
}
script>
第二种写法
<u-form-item label="性别：" label-width="70" prop="gender" @click="showGender = true;">
<u--input v-model="form.gender" placeholder="请选择性别" border="none" fontSize="12px"/>
<u-icon slot="right" name="arrow-right"/>
u-form-item>
<u-action-sheet :show="showGender" :actions="actions" title="请选择性别" @close="showGender = false" @select="genderSelect">u-action-sheet>
<script>
export default {
data() {
return {
showGender: false,
actions: [
{
name: '男',
},
{
name: '女',
}
],
form: {
gender: ''
}
}
},
methods: {
genderSelect(e) {
this.form.gender = e.name
}
}
}
script>
2.日历
<u-form-item label="出生日期：" label-width="90" prop="birthTime" @click="show = true;">
<u--input v-model="form.birthTime" placeholder="请选择出生日期" border="none" fontSize="13px"/>
<u-icon slot="right" name="arrow-right"/>
u-form-item>
<u-calendar :show="show" @close="show=false" title="请选择出生日期" @confirm="confirm">u-calendar>
<script>
export default {
data() {
return {
show: false,
form: {
birthTime: ''
}
}
},
methods: {
confirm(e) {
this.form.birthTime = e.join(',')
this.show = false
console.log(this.form.birthTime);
}
}
}
script>
3.日期
<u-form-item label="出生日期：" label-width="90" prop="birthTime" @click="show = true;">
<u--input v-model="form.birthTime" placeholder="请选择出生日期" border="none" fontSize="13px"/>
<u-icon slot="right" name="arrow-right"/>
u-form-item>
<u-datetime-picker :show="show" v-model="value" mode="date" closeOnClickOverlay @confirm="confirm" @cancel="show=false" @close="show=false" title="请选择出生日期">u-datetime-picker>
<script>
export default {
data() {
return {
show: false,
value: Number(new Date()),
form: {
birthTime: ''
}
}
},
methods: {
confirm(e) {
this.show = false
this.form.birthTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
console.log(this.form.birthTime)
}
}
}
script>
年月日时分
mode为datetime，格式转换timeFormat(e.value, ‘yyyy-mm-dd hh:MM’)
toast弹出框引用
toast = uni.$u.toast
return toast(....)