parent
44a40dd2d6
commit
4138ce6628
10 changed files with 634 additions and 162 deletions
@ -1,135 +0,0 @@ |
|||||||
<template> |
|
||||||
<view class="container"> |
|
||||||
<uni-section title="基本信息" type="line"> |
|
||||||
<view class="form"> |
|
||||||
<uni-forms ref="baseForm" :modelValue="form" label-width="100"> |
|
||||||
<uni-forms-item label="客户名称" name="name" required> |
|
||||||
<uni-combox :candidates="candidates" placeholder="请选择客户名称" v-model="form.name"></uni-combox> |
|
||||||
</uni-forms-item> |
|
||||||
<uni-forms-item label="省份"> |
|
||||||
<uni-easyinput v-model="form.provience" disabled /> |
|
||||||
</uni-forms-item> |
|
||||||
<uni-forms-item label="城市"> |
|
||||||
<uni-easyinput v-model="form.city" disabled /> |
|
||||||
</uni-forms-item> |
|
||||||
<uni-forms-item label="行业" required> |
|
||||||
<uni-data-picker placeholder="请选择班级" popup-title="请选择行业" :localdata="dataTree" v-model="form.industryId" |
|
||||||
@change="onchange"> |
|
||||||
</uni-data-picker> |
|
||||||
</uni-forms-item> |
|
||||||
<uni-forms-item label="联系人姓名" name="contact" required> |
|
||||||
<uni-easyinput v-model="form.contact" placeholder="请输入联系人姓名" /> |
|
||||||
</uni-forms-item> |
|
||||||
<uni-forms-item label="手机" name="contact"> |
|
||||||
<uni-easyinput v-model="form.contact" placeholder="请输入手机" /> |
|
||||||
</uni-forms-item> |
|
||||||
<uni-forms-item label="账号" name="contact" required> |
|
||||||
<uni-easyinput v-model="form.contact" placeholder="请以院校首字母+admin的格式来设置" /> |
|
||||||
</uni-forms-item> |
|
||||||
<uni-forms-item label="职务" name="contact"> |
|
||||||
<uni-easyinput v-model="form.contact" placeholder="请输入职务" /> |
|
||||||
</uni-forms-item> |
|
||||||
<uni-forms-item label="邮箱" name="contact"> |
|
||||||
<uni-easyinput v-model="form.contact" placeholder="请输入邮箱" /> |
|
||||||
</uni-forms-item> |
|
||||||
<uni-forms-item label="产品到期时间"> |
|
||||||
<uni-datetime-picker type="datetime" return-type="timestamp" |
|
||||||
v-model="form.datetimesingle" /> |
|
||||||
</uni-forms-item> |
|
||||||
<uni-forms-item label="客户类型"> |
|
||||||
<uni-easyinput v-model="form.city" disabled /> |
|
||||||
</uni-forms-item> |
|
||||||
</uni-forms> |
|
||||||
<button type="primary" @click="submit('valiForm')">提交</button> |
|
||||||
</view> |
|
||||||
</uni-section> |
|
||||||
</view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
candidates: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口'], |
|
||||||
dataTree: [{ |
|
||||||
text: "一年级", |
|
||||||
value: "1-0", |
|
||||||
children: [{ |
|
||||||
text: "1.1班", |
|
||||||
value: "1-1" |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: "1.2班", |
|
||||||
value: "1-2" |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: "二年级", |
|
||||||
value: "2-0", |
|
||||||
children: [{ |
|
||||||
text: "2.1班", |
|
||||||
value: "2-1" |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: "2.2班", |
|
||||||
value: "2-2" |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
text: "三年级", |
|
||||||
value: "3-0", |
|
||||||
disable: true |
|
||||||
} |
|
||||||
], |
|
||||||
form: { |
|
||||||
name: '', |
|
||||||
provience: '', |
|
||||||
city: '', |
|
||||||
industryId: '', |
|
||||||
age: '', |
|
||||||
introduction: '', |
|
||||||
sex: 2, |
|
||||||
hobby: [5], |
|
||||||
datetimesingle: 1627529992399 |
|
||||||
}, |
|
||||||
sexs: [{ |
|
||||||
text: '男', |
|
||||||
value: 0 |
|
||||||
}, { |
|
||||||
text: '女', |
|
||||||
value: 1 |
|
||||||
}, { |
|
||||||
text: '保密', |
|
||||||
value: 2 |
|
||||||
}], |
|
||||||
} |
|
||||||
}, |
|
||||||
onLoad() { |
|
||||||
|
|
||||||
}, |
|
||||||
methods: { |
|
||||||
onchange(e) { |
|
||||||
console.log('---------onchange:', e); |
|
||||||
}, |
|
||||||
submit(ref) { |
|
||||||
this.$refs[ref].validate().then(res => { |
|
||||||
console.log('success', res); |
|
||||||
uni.showToast({ |
|
||||||
title: `校验通过` |
|
||||||
}) |
|
||||||
}).catch(err => { |
|
||||||
console.log('err', err); |
|
||||||
}) |
|
||||||
}, |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="scss"> |
|
||||||
.form { |
|
||||||
padding: 15px; |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,2 @@ |
|||||||
|
## 0.0.10（2022-04-26） |
||||||
|
- 适配uni-forms校验 |
||||||
@ -0,0 +1,255 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<picker :mode="mode" @change="chagne" :value="selectValue" |
||||||
|
:range="range" :range-key="text" :start="start" :end="end" :fields="fields" :custom-item="customItem" :disabled="disabled"> |
||||||
|
<block v-if="islot"> |
||||||
|
<slot /> |
||||||
|
</block> |
||||||
|
<block v-else> |
||||||
|
<view class="select-picker" :class="hideBorder?'':'select-picker-border'"> |
||||||
|
<text class="placeholder" :class="selectValue === ''?'default':''">{{selectText}}</text> |
||||||
|
<view class="select-picker-arrow-area" v-if="!hideArrow"> |
||||||
|
<view class="select-picker-arrow"></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</block> |
||||||
|
</picker> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name:"hpy-form-select", |
||||||
|
props:{ |
||||||
|
// 是否使用插槽 |
||||||
|
islot:{ |
||||||
|
type: [Boolean, String], |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// 默认标题 |
||||||
|
title:{ |
||||||
|
type: String, |
||||||
|
default:'请选择' |
||||||
|
}, |
||||||
|
// selector 或 multiSelector |
||||||
|
mode:{ |
||||||
|
type: String, |
||||||
|
default: 'selector' |
||||||
|
}, |
||||||
|
// 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" |
||||||
|
start:{ |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" |
||||||
|
end:{ |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI |
||||||
|
fields:{ |
||||||
|
type: String, |
||||||
|
default: 'day' |
||||||
|
}, |
||||||
|
// 可为每一列的顶部添加一个自定义的项 |
||||||
|
customItem:{ |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 下拉选择的数据 |
||||||
|
dataList:{ |
||||||
|
type:Array, |
||||||
|
default:function(){ |
||||||
|
return [] |
||||||
|
} |
||||||
|
}, |
||||||
|
// 指定显示值的key |
||||||
|
text:{ |
||||||
|
type:String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 实际值的key |
||||||
|
name:{ |
||||||
|
type:String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 保存值 |
||||||
|
value: { |
||||||
|
type: [String, Number], |
||||||
|
default () { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
}, |
||||||
|
// TODO vue3 |
||||||
|
modelValue: { |
||||||
|
type: [String, Number], |
||||||
|
default() { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 是否禁用 |
||||||
|
disabled:{ |
||||||
|
type: [Boolean, String], |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// 是否隐藏边框 |
||||||
|
hideBorder: { |
||||||
|
type: [Boolean, String], |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// 是否隐藏箭头 |
||||||
|
hideArrow:{ |
||||||
|
type: [Boolean, String], |
||||||
|
default: false |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
range: [], |
||||||
|
selectValue:'' |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
if (this.dataList && this.dataList.length !== 0) { |
||||||
|
this.range = this.getDataList(this.dataList); |
||||||
|
} |
||||||
|
this.form = this.getForm('uniForms') |
||||||
|
this.formItem = this.getForm('uniFormsItem') |
||||||
|
if (this.formItem) { |
||||||
|
if (this.formItem.name) { |
||||||
|
this.rename = this.formItem.name |
||||||
|
this.form.inputChildrens.push(this) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
dataList: { |
||||||
|
handler(newVal) { |
||||||
|
this.range = this.getDataList(newVal); |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
}, |
||||||
|
value:{ |
||||||
|
handler(newVal) { |
||||||
|
this.initSelected(newVal); |
||||||
|
}, |
||||||
|
immediate: true |
||||||
|
}, |
||||||
|
modelValue(newVal) { |
||||||
|
this.initSelected(newVal); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed:{ |
||||||
|
dataValue(){ |
||||||
|
if(this.value === '')return this.modelValue |
||||||
|
if(this.modelValue === '') return this.value |
||||||
|
return this.value |
||||||
|
}, |
||||||
|
selectText(){ |
||||||
|
if(this.selectValue === ''){ |
||||||
|
return this.title; |
||||||
|
} |
||||||
|
if('date' == this.mode || 'time' == this.mode){ |
||||||
|
return this.selectValue; |
||||||
|
}else{ |
||||||
|
if(!this.dataList || this.dataList.length == 0){ |
||||||
|
return this.title; |
||||||
|
} |
||||||
|
if(this.text){ |
||||||
|
return this.dataList[this.selectValue][this.text]; |
||||||
|
} |
||||||
|
return this.dataList[this.selectValue]; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
getForm(name = 'uniForms') { |
||||||
|
let parent = this.$parent; |
||||||
|
let parentName = parent.$options.name; |
||||||
|
while (parentName !== name) { |
||||||
|
parent = parent.$parent; |
||||||
|
if (!parent) return false; |
||||||
|
parentName = parent.$options.name; |
||||||
|
} |
||||||
|
return parent; |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 获取渲染的新数组 |
||||||
|
*/ |
||||||
|
getDataList(value) { |
||||||
|
// 解除引用关系，破坏原引用关系，避免污染源数据 |
||||||
|
let dataList = JSON.parse(JSON.stringify(value)); |
||||||
|
this.initSelected(this.dataValue); |
||||||
|
return dataList; |
||||||
|
}, |
||||||
|
// 初始化选中值 |
||||||
|
initSelected(value){ |
||||||
|
if(!value){ |
||||||
|
this.selectValue = ''; |
||||||
|
return false; |
||||||
|
} |
||||||
|
if('date' == this.mode || 'time' == this.mode){ |
||||||
|
this.selectValue = value; |
||||||
|
}else{ |
||||||
|
if(this.dataList.length > 0){ |
||||||
|
if(this.name){ |
||||||
|
this.dataList.some((item, index) => { |
||||||
|
if(item[this.name] == value){ |
||||||
|
this.selectValue = index; |
||||||
|
return true; |
||||||
|
} |
||||||
|
}); |
||||||
|
}else{ |
||||||
|
this.dataList.some((item, index) => { |
||||||
|
if(item == value){ |
||||||
|
this.selectValue = index; |
||||||
|
return true; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 选择 |
||||||
|
chagne(e){ |
||||||
|
const val = e.detail.value; |
||||||
|
this.selectValue = val; |
||||||
|
var inputVal = '', changeVal = ''; |
||||||
|
if('date' == this.mode || 'time' == this.mode){ |
||||||
|
inputVal = val; |
||||||
|
changeVal = val; |
||||||
|
}else{ |
||||||
|
if(this.dataList && this.dataList.length > 0){ |
||||||
|
let data = this.dataList[val]; |
||||||
|
if(this.name){ |
||||||
|
inputVal = data[this.name]; |
||||||
|
}else{ |
||||||
|
inputVal = data; |
||||||
|
} |
||||||
|
changeVal = {'index':val, 'value':inputVal, 'data':data}; |
||||||
|
}else{ |
||||||
|
this.selectValue = ''; |
||||||
|
changeVal = {'index':-1, 'value':inputVal, 'data':{}}; |
||||||
|
} |
||||||
|
} |
||||||
|
if (this.formItem) { |
||||||
|
this.formItem.setValue(inputVal); |
||||||
|
} |
||||||
|
// TODO 兼容 vue2 |
||||||
|
this.$emit('input', inputVal); |
||||||
|
// // TOTO 兼容 vue3 |
||||||
|
this.$emit('update:modelValue', inputVal); |
||||||
|
this.$emit('change', changeVal); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.select-picker {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;align-items: center;flex-wrap: nowrap;font-size: 14px;line-height: 38px;padding: 0 5px;overflow: hidden;/* #ifdef APP-NVUE */height: 40px;/* #endif */text-indent:4px;} |
||||||
|
.select-picker-border{border: 1px solid #e5e5e5;border-radius: 5px;} |
||||||
|
.is-input-error-border .select-picker-border{border-color: $uni-color-error;} |
||||||
|
.select-picker-arrow-area {position: relative;width: 20px;/* #ifndef APP-NVUE */margin-left: auto;display: flex;/* #endif */justify-content: center;transform: rotate(-45deg);transform-origin: center;} |
||||||
|
.select-picker-arrow{width:7px;height:7px;border-left:1px solid #999;border-bottom:1px solid #999} |
||||||
|
.placeholder.default{color: grey;text-indent: 0px;} |
||||||
|
</style> |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
{ |
||||||
|
"id": "hpy-form-select", |
||||||
|
"displayName": "picker选择器、下拉框，选择器", |
||||||
|
"version": "0.0.10", |
||||||
|
"description": "下拉选择器 基于 picker 简单封装", |
||||||
|
"keywords": [ |
||||||
|
"picker", |
||||||
|
"选择器", |
||||||
|
"下拉选择" |
||||||
|
], |
||||||
|
"repository": "", |
||||||
|
"engines": { |
||||||
|
"HBuilderX": "" |
||||||
|
}, |
||||||
|
"directories": { |
||||||
|
"example": "" |
||||||
|
}, |
||||||
|
"dcloudext": { |
||||||
|
"category": [ |
||||||
|
"前端组件", |
||||||
|
"通用组件" |
||||||
|
], |
||||||
|
"sale": { |
||||||
|
"regular": { |
||||||
|
"price": "0.00" |
||||||
|
}, |
||||||
|
"sourcecode": { |
||||||
|
"price": "0.00" |
||||||
|
} |
||||||
|
}, |
||||||
|
"contact": { |
||||||
|
"qq": "" |
||||||
|
}, |
||||||
|
"declaration": { |
||||||
|
"ads": "无", |
||||||
|
"data": "无", |
||||||
|
"permissions": "无" |
||||||
|
}, |
||||||
|
"npmurl": "" |
||||||
|
}, |
||||||
|
"uni_modules": { |
||||||
|
"dependencies": [ |
||||||
|
"uni-load-more" |
||||||
|
], |
||||||
|
"encrypt": [], |
||||||
|
"platforms": { |
||||||
|
"cloud": { |
||||||
|
"tcb": "y", |
||||||
|
"aliyun": "y" |
||||||
|
}, |
||||||
|
"client": { |
||||||
|
"App": { |
||||||
|
"app-vue": "y", |
||||||
|
"app-nvue": "y" |
||||||
|
}, |
||||||
|
"H5-mobile": { |
||||||
|
"Safari": "y", |
||||||
|
"Android Browser": "y", |
||||||
|
"微信浏览器(Android)": "y", |
||||||
|
"QQ浏览器(Android)": "y" |
||||||
|
}, |
||||||
|
"H5-pc": { |
||||||
|
"Chrome": "y", |
||||||
|
"IE": "y", |
||||||
|
"Edge": "y", |
||||||
|
"Firefox": "y", |
||||||
|
"Safari": "y" |
||||||
|
}, |
||||||
|
"小程序": { |
||||||
|
"微信": "y", |
||||||
|
"阿里": "u", |
||||||
|
"百度": "y", |
||||||
|
"字节跳动": "y", |
||||||
|
"QQ": "y" |
||||||
|
}, |
||||||
|
"快应用": { |
||||||
|
"华为": "y", |
||||||
|
"联盟": "u" |
||||||
|
}, |
||||||
|
"Vue": { |
||||||
|
"vue2": "y", |
||||||
|
"vue3": "y" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,169 @@ |
|||||||
|
|
||||||
|
## hpy-form-select 下拉选择器 基于 [picker](https://uniapp.dcloud.io/component/picker?id=picker) 简单封装 |
||||||
|
|
||||||
|
> **组件名：hpy-form-select |
||||||
|
|
||||||
|
从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器 |
||||||
|
|
||||||
|
## API |
||||||
|
|
||||||
|
### FilePicker Props |
||||||
|
|
||||||
|
<table> |
||||||
|
<tr> |
||||||
|
<th>属性名</th> |
||||||
|
<th>类型</th> |
||||||
|
<th>默认值</th> |
||||||
|
<th>说明</th> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>islot</td> |
||||||
|
<td>Boolean | String</td> |
||||||
|
<td>false</td> |
||||||
|
<td>是否使用插槽</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>title</td> |
||||||
|
<td>String</td> |
||||||
|
<td>请选择</td> |
||||||
|
<td>默认标题</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>mode</td> |
||||||
|
<td>String</td> |
||||||
|
<td>选择模式</td> |
||||||
|
<td>selector | multiSelector</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>start</td> |
||||||
|
<td>String</td> |
||||||
|
<td></td> |
||||||
|
<td>表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>end</td> |
||||||
|
<td>String</td> |
||||||
|
<td></td> |
||||||
|
<td>表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>fields</td> |
||||||
|
<td>String</td> |
||||||
|
<td>day</td> |
||||||
|
<td>有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>customItem</td> |
||||||
|
<td>String</td> |
||||||
|
<td></td> |
||||||
|
<td>可为每一列的顶部添加一个自定义的项</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>dataList</td> |
||||||
|
<td>Array</td> |
||||||
|
<td></td> |
||||||
|
<td>选择器数据</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>text</td> |
||||||
|
<td>String</td> |
||||||
|
<td></td> |
||||||
|
<td>显示值的key</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>name</td> |
||||||
|
<td>String</td> |
||||||
|
<td></td> |
||||||
|
<td>保存值的key</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>v-model | value</td> |
||||||
|
<td>Array | Object</td> |
||||||
|
<td></td> |
||||||
|
<td>绑定的数据</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>disabled</td> |
||||||
|
<td>Boolean | String</td> |
||||||
|
<td>false</td> |
||||||
|
<td>是否禁用</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>hideBorder</td> |
||||||
|
<td>Boolean | String</td> |
||||||
|
<td>false</td> |
||||||
|
<td>是否隐藏边框</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>hideArrow</td> |
||||||
|
<td>Boolean | String</td> |
||||||
|
<td>false</td> |
||||||
|
<td>是否隐藏箭头</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
|
||||||
|
|
||||||
|
## 使用示例 |
||||||
|
## dataList 为对象数组时，name为实际保存的value值，text为显示的值 |
||||||
|
## dataList 为对象数组[{name:'张三', age:'18'}, {name:'李四', age:'19'}]时，需要设置name、text属性，name为实际保存的value值，text为显示的值 |
||||||
|
## <hpy-form-select :dataList="dataList" text="name" name="age" v-model="formData.age" @change="change" /> |
||||||
|
## ====================================================================================================== |
||||||
|
## dataList 为普通数组['张三', '李四'] name、text可不设置 |
||||||
|
## <hpy-form-select :dataList="dataList" v-model="formData.name" @change="change" /> |
||||||
|
## 类似： |
||||||
|
## <select><option value="name">text</option></select> |
||||||
|
|
||||||
|
|
||||||
|
```html |
||||||
|
<hpy-form-select :dataList="hobbyList" text="text" name="value" v-model="formData.hobbySelect" @change="change" /> |
||||||
|
|
||||||
|
<uni-group title="基础信息" margin-top="0"> |
||||||
|
<uni-forms-item label="姓名" name="name"> |
||||||
|
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" /> |
||||||
|
</uni-forms-item> |
||||||
|
|
||||||
|
<uni-forms-item label="爱好2" name="hobby2"> |
||||||
|
<hpy-form-select :dataList="hobbyList" text="text" name="value" v-model="formData.hobbySelect"/> |
||||||
|
</uni-forms-item> |
||||||
|
|
||||||
|
<uni-forms-item label="爱好3" name="hobby3"> |
||||||
|
<hpy-form-select :dataList="hobbyList" text="text" name="value" v-model="formData.hobbySelect3" islot="true"> |
||||||
|
<view class="my-select">可自定义显示</view> |
||||||
|
</hpy-form-select> |
||||||
|
</uni-forms-item> |
||||||
|
|
||||||
|
<uni-forms-item label="出生时间(年)" name="birthYear" > |
||||||
|
<hpy-form-select mode="date" fields="year" v-model="formData.birthYear" /> |
||||||
|
</uni-forms-item> |
||||||
|
</uni-group> |
||||||
|
``` |
||||||
|
|
||||||
|
```javascript |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
formData:{ |
||||||
|
hobbySelect:'' |
||||||
|
}, |
||||||
|
hobbyList: [{ |
||||||
|
text: '足球', |
||||||
|
value: 1 |
||||||
|
}, { |
||||||
|
text: '篮球', |
||||||
|
value: 2 |
||||||
|
}, { |
||||||
|
text: '游泳', |
||||||
|
value: 3 |
||||||
|
}], |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
change(e){ |
||||||
|
console.log(e.index); |
||||||
|
console.log(e.value); |
||||||
|
console.log(e.data); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
``` |
||||||
Loading…
Reference in new issue