fix: 修改rules组件的example。 (#700)

Author: dpp050700

examples/pages/components/form/pages/rules/index.js

@@ -41,7 +41,8 @@ Component({
       type: "number",
       required: true,
       message: '请重新输入数字'
-    }
+    },
+    likes: ['读书']
 
   },
   methods: {
@@ -53,6 +54,22 @@ Component({
       console.log('linvalidate', e)
     },
 
+    changeCheckbox(e){
+      const key = e.detail.key
+      const checked = e.detail.checked
+      let likes = this.data.likes
+      if (checked) {
+        likes.push(key)
+      } else {
+        likes = likes.filter(item => {
+          return item !== key
+        })
+      }
+      this.setData({
+        likes: likes
+      });
+    },
+
     /**
      * Lifecycle function--Called when page load
      */
@@ -107,4 +124,4 @@ Component({
 
     }
   }
-})
+})

examples/pages/components/form/pages/rules/index.wxml

@@ -10,18 +10,18 @@
           <l-input label="手机号" label-width="170" placeholder="请输入密码" name="phone" rules="{{phoneRules}}" tipType="toast"/>
           <view class="group-label">
             <text>爱好</text>
-            <l-checkbox-group l-class="l-radio-group" rules="{{sexRules}}" name="habbit" tipType="text">
-              <l-checkbox l-class="l-radio" l-title-class="l-title-class" placement="left" value="读书" />
-              <l-checkbox l-class="l-radio" l-title-class="l-title-class" placement="left" value="写字" />
-              <l-checkbox l-class="l-radio" l-title-class="l-title-class" placement="left" value="摄影" />
+            <l-checkbox-group l-class="l-radio-group" rules="{{sexRules}}" name="habbit" tipType="text" bind:linchange="changeCheckbox">
+              <l-checkbox l-class="l-radio" l-title-class="l-title-class" placement="left" key="读书" checked="{{util.isChecked('读书',likes)}}">读书</l-checkbox>
+              <l-checkbox l-class="l-radio" l-title-class="l-title-class" placement="left" key="写字" checked="{{util.isChecked('写字',likes)}}">写字</l-checkbox>
+              <l-checkbox l-class="l-radio" l-title-class="l-title-class" placement="left" key="摄影" checked="{{util.isChecked('摄影',likes)}}">摄影</l-checkbox>
             </l-checkbox-group>
           </view>
 
           <view class="group-label">
             <text>性别</text>
             <l-radio-group l-class="l-radio-group" rules="{{sexRules}}" name="sex" tipType="text">
-              <l-radio l-class="l-radio" l-title-class="l-title-class" placement="left" value="男" />
-              <l-radio l-class="l-radio" l-title-class="l-title-class" placement="left" value="女" />
+              <l-radio l-class="l-radio" l-title-class="l-title-class" placement="left" key="男" >男</l-radio>
+              <l-radio l-class="l-radio" l-title-class="l-title-class" placement="left" key="女" >女</l-radio>
             </l-radio-group>
           </view>
           <text class="text-desc">* 输入你的自我介绍吧~~</text>
@@ -33,4 +33,13 @@
 </view>
 
 <l-toast/>
-<l-message/>
+<l-message/>
+
+<wxs module="util">
+  var isChecked = function(item,likes) {
+    return likes.indexOf(item) > -1
+  }
+  module.exports = {
+    isChecked: isChecked
+  }
+</wxs>

examples/pages/components/form/pages/rules/index.wxss

@@ -42,12 +42,12 @@
 }
 
 .textarea-class {
-  width:auto !important;
+  /*width:auto !important;*/
 }
 
 .error-text {
   background: red;
   color: #fff !important;
   border-radius: 8rpx;
   padding: 0 10rpx;
-}
+}