Browse Source

表单组件

zhaoxiaohai 2 years ago
parent
commit
a3f81ecbd8
3 changed files with 45 additions and 5 deletions
  1. 25 0
      components/My_form/index.js
  2. 10 4
      components/My_form/index.scss
  3. 10 1
      components/My_form/index.wxml

+ 25 - 0
components/My_form/index.js

@@ -21,6 +21,12 @@ Component({
     data: {
         endTime: "", //结束时间
         selectTime: "", //选择时间
+        sexActions: [{
+            name: '男'
+        }, {
+            name: '女'
+        }],
+        seleteSexShow: false
     },
 
     lifetimes: {
@@ -35,6 +41,25 @@ Component({
      * 组件的方法列表
      */
     methods: {
+        /* 性别选择器 */
+        seleteSex(e) {
+            this.setData({
+                seleteSexShow: true
+            })
+        },
+        handleSex(e) {
+            let index = this.data.fromList.findIndex(v => v.type == 'sex');
+            if (index) this.setData({
+                ['fromList[' + index + '].value']: e.detail.name,
+                seleteSexShow: false
+            })
+            console.log(this.data.fromList[index])
+        },
+        cancel() {
+            this.setData({
+                seleteSexShow: false
+            })
+        },
         /* 输入 */
         inputChange(e) {
             let {

+ 10 - 4
components/My_form/index.scss

@@ -1,6 +1,12 @@
 /* components/My_form/index.wxss */
-.picker {
-    position: absolute;
-    right: 0;
-    top: 0;
+.section {
+    width: 100%;
+    height: 100%;
+
+    .picker {
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: rgba($color: #000000, $alpha: .3);
+    }
 }

+ 10 - 1
components/My_form/index.wxml

@@ -8,9 +8,18 @@
                 </view>
             </picker>
         </view>
+        <!-- 性别选择器 -->
+        <view class="section" wx:if="{{item.type=='sex'}}" slot='input' catchtap="seleteSex">
+            <view class="picker">
+                <text wx:if="{{item.value}}" style="color:rgba(0, 0, 0, 1) ;">{{item.value}}</text>
+                <text wx:else>请选择</text>
+            </view>
+        </view>
+        <slot name='slot' wx:if="{{item.type=='slot'}}" slot='input' />
         <slot name='slot1' wx:if="{{item.type=='custom'}}" slot='input' />
         <slot name='slot2' wx:if="{{item.type=='custom'}}" slot='input' />
         <slot name='slot3' wx:if="{{item.type=='custom'}}" slot='input' />
         <slot name='slot4' wx:if="{{item.type=='custom'}}" slot='input' />
     </van-field>
-</van-cell-group>
+</van-cell-group>
+<van-action-sheet show="{{ seleteSexShow }}" actions="{{ sexActions }}" bind:cancel='cancel' bind:select='handleSex' cancel-text="取消" />