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