Skip to content

Commit

Permalink
add: uni-form-group component and form-group page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fasttian
Fasttian committed Sep 10, 2020
1 parent e51ee0b commit 66cd3bf
Show file tree
Hide file tree
Showing 4 changed files with 366 additions and 12 deletions.
70 changes: 70 additions & 0 deletions src/components/uni-form-group/uni-form-group.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<template>
<view class="uni-form-group" :style="{marginTop: `${marginTop}px` }">
<view v-if="title" class="uni-form-group__content">
<text class="uni-form-group__content-title">{{ title }}</text>
</view>
<slot />
</view>
</template>

<script>
/**
* uni-form-group 分组
* @description 表单字段分组
* @property {String} title 主标题
* @property {Number} margin 分组间隔
*/
export default {
name: 'UniFormGroup',
props: {
title: {
type: String,
default: ''
},
marginTop: {
type: [Number, String],
default: 10
}
},
data() {
return {}
},
watch: {
title(newVal) {
if (uni.report && newVal !== '') {
uni.report('title', newVal)
}
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
.uni-form-group {
background: #fff;
margin-top: 10px;
}
.uni-form-group__content {
padding: 10px 10px;
background-color: $uni-bg-color-grey;
font-weight: normal;
color: $uni-text-color;
}
.uni-form-group__content-title {
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.distraction {
flex-direction: row;
align-items: center;
}
</style>
142 changes: 142 additions & 0 deletions src/pages/nvue/form-group/form-group.nvue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<template>
<view class="uni-wrap">
<scroll-view class="scroll" scroll-y>
<view class="example-info">
<text class="example-info-text"> uni-form-group 组件主要用于表单分组 </text>
</view>
<uni-form-group title="field group" margin-top="20">
<uni-field
v-model="name"
label="姓名"
placeholder="请填写姓名"
:error-message="errorMessage"
></uni-field>
<uni-field
v-model="mobile"
label="手机号"
label-position="left"
placeholder="请填写手机号"
:error-message="errorMessage"
type="text"
:clearable="true"
>
</uni-field>
</uni-form-group>


<uni-form-group title="field group">
<uni-field
v-model="name"
label="姓名"
placeholder="请填写姓名"
:error-message="errorMessage"
></uni-field>
<uni-field
v-model="mobile"
label="手机号"
iconColor="#999"
label-position="left"
placeholder="请填写手机号"
:error-message="errorMessage"
type="text"
:clearable="true"
>
<button v-if="true" type="primary" slot="right" size="mini">发送验证码</button>
</uni-field>
</uni-form-group>

<uni-form-group title="field group">
<uni-field
v-model="name"
label="姓名"
placeholder="请填写姓名"
:error-message="errorMessage"
></uni-field>
<uni-field
v-model="mobile"
label="手机号"
left-icon="camera"
iconColor="#999"
label-position="left"
placeholder="请填写手机号"
:error-message="errorMessage"
type="text"
:clearable="true"
>
<button v-if="true" type="primary" slot="right" size="mini">发送验证码</button>
</uni-field>
<uni-field
v-model="weixin"
label="微信号"
left-icon="camera"
label-position="left"
placeholder="请填写微信号"
:required="false"
:focus="true"
type="text"
:clearable="true"
:password="false"
:disabled="false"
confirmType="good"
:error-message="errorMessage"
/>
<uni-field
v-model="message"
type="textarea"
label="家庭地址"
placeholder="请填写详细住址"
:error-message="errorMessage"
/>
</uni-form-group>
</scroll-view>
</view>
</template>

<script>
export default {
components: {},
data() {
return {
appear: false,
name: '',
mobile: '139 9999 9999',
weixin: 'sskd',
message: '',
errorMessage: ''
}
},
onReady() {

},
methods: {

}
}
</script>

<style lang="scss">
@import '@/common/uni-nvue.scss';

.uni-wrap {
flex-direction: column;
/* #ifdef H5 */
height: calc(100vh - 44px);
/* #endif */
/* #ifndef H5 */
height: 100vh;
/* #endif */
flex: 1;
}

.scroll {
flex-direction: column;
flex: 1;
}

.example-body {
padding: 0;
/* #ifndef APP-NVUE */
display: block;
/* #endif */
}
</style>
24 changes: 12 additions & 12 deletions src/pages/vue/field/field.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
type="text"
:clearable="true"
>
<button v-if="true" slot="right" size="mini" type="success">发送验证码</button>
<button v-if="true" type="primary" slot="right" size="mini">发送验证码</button>
</uni-field>
<uni-field
v-model="weixin"
Expand Down Expand Up @@ -47,21 +47,21 @@

<script>
export default {
data() {
return {
name: '',
mobile: '139 9999 9999',
weixin: 'sskd',
message: '',
errorMessage: ''
}
},
data() {
return {
name: '',
mobile: '139 9999 9999',
weixin: 'sskd',
message: '',
errorMessage: ''
}
},
methods: {
methods: {
changeError () {
this.errorMessage = this.errorMessage ? '' : '6666666666'
}
}
}
}
</script>
Expand Down
142 changes: 142 additions & 0 deletions src/pages/vue/form-group/form-group.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<template>
<view class="uni-wrap">
<scroll-view class="scroll" scroll-y>
<view class="example-info">
<text class="example-info-text"> uni-form-group 组件主要用于表单分组 </text>
</view>
<uni-form-group title="field group" margin-top="20">
<uni-field
v-model="name"
label="姓名"
placeholder="请填写姓名"
:error-message="errorMessage"
></uni-field>
<uni-field
v-model="mobile"
label="手机号"
label-position="left"
placeholder="请填写手机号"
:error-message="errorMessage"
type="text"
:clearable="true"
>
</uni-field>
</uni-form-group>


<uni-form-group title="field group">
<uni-field
v-model="name"
label="姓名"
placeholder="请填写姓名"
:error-message="errorMessage"
></uni-field>
<uni-field
v-model="mobile"
label="手机号"
iconColor="#999"
label-position="left"
placeholder="请填写手机号"
:error-message="errorMessage"
type="text"
:clearable="true"
>
<button v-if="true" type="primary" slot="right" size="mini">发送验证码</button>
</uni-field>
</uni-form-group>

<uni-form-group title="field group">
<uni-field
v-model="name"
label="姓名"
placeholder="请填写姓名"
:error-message="errorMessage"
></uni-field>
<uni-field
v-model="mobile"
label="手机号"
left-icon="camera"
iconColor="#999"
label-position="left"
placeholder="请填写手机号"
:error-message="errorMessage"
type="text"
:clearable="true"
>
<button v-if="true" type="primary" slot="right" size="mini">发送验证码</button>
</uni-field>
<uni-field
v-model="weixin"
label="微信号"
left-icon="camera"
label-position="left"
placeholder="请填写微信号"
:required="false"
:focus="true"
type="text"
:clearable="true"
:password="false"
:disabled="false"
confirmType="good"
:error-message="errorMessage"
/>
<uni-field
v-model="message"
type="textarea"
label="家庭地址"
placeholder="请填写详细住址"
:error-message="errorMessage"
/>
</uni-form-group>
</scroll-view>
</view>
</template>

<script>
export default {
components: {},
data() {
return {
appear: false,
name: '',
mobile: '139 9999 9999',
weixin: 'sskd',
message: '',
errorMessage: ''
}
},
onReady() {
},
methods: {
}
}
</script>

<style lang="scss">
@import '@/common/uni-nvue.scss';
.uni-wrap {
flex-direction: column;
/* #ifdef H5 */
height: calc(100vh - 44px);
/* #endif */
/* #ifndef H5 */
height: 100vh;
/* #endif */
flex: 1;
}
.scroll {
flex-direction: column;
flex: 1;
}
.example-body {
padding: 0;
/* #ifndef APP-NVUE */
display: block;
/* #endif */
}
</style>

0 comments on commit 66cd3bf

Please sign in to comment.