init

xhs-mini-demos/component-case/label/label.css

@@ -0,0 +1,11 @@
+.label-1, .label-2{
+  margin: 15px 0;
+}
+.label-3-text{
+  color: #576B95;
+  font-size: 14px;
+}
+.checkbox-3{
+  display: block;
+  margin: 15px 0;
+}

xhs-mini-demos/component-case/label/label.js

@@ -0,0 +1,56 @@
+const __templateJs = require("./templates.js");
+const __mergePageOptions = require("../../util/mergePageOptions.js");
+Page(__mergePageOptions({
+  onShareAppMessage() {
+    return {
+      title: 'label',
+      path: 'page/component/pages/label/label'
+    };
+  },
+  data: {
+    checkboxItems: [{
+      name: 'USA',
+      value: '美国'
+    }, {
+      name: 'CHN',
+      value: '中国',
+      checked: 'true'
+    }],
+    radioItems: [{
+      name: 'USA',
+      value: '美国'
+    }, {
+      name: 'CHN',
+      value: '中国',
+      checked: 'true'
+    }],
+    hidden: false
+  },
+  checkboxChange(e) {
+    const checked = e.detail.value;
+    const changed = {};
+    for (let i = 0; i < this.data.checkboxItems.length; i++) {
+      if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
+        changed[`checkboxItems[${i}].checked`] = true;
+      } else {
+        changed[`checkboxItems[${i}].checked`] = false;
+      }
+    }
+    this.setData(changed);
+  },
+  radioChange(e) {
+    const checked = e.detail.value;
+    const changed = {};
+    for (let i = 0; i < this.data.radioItems.length; i++) {
+      if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
+        changed[`radioItems[${i}].checked`] = true;
+      } else {
+        changed[`radioItems[${i}].checked`] = false;
+      }
+    }
+    this.setData(changed);
+  },
+  tapEvent() {
+    console.log('按钮被点击');
+  }
+}, __templateJs));

xhs-mini-demos/component-case/label/label.json

@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "label",
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index"
+    }
+}

xhs-mini-demos/component-case/label/label.xhsml

@@ -0,0 +1,48 @@
+<view class="container">
+  <showbox title="表单组件在label内">
+    <box>
+      <checkbox-group class="group" bindchange="checkboxChange">
+        <view class="label-1" xhs:for="{{checkboxItems}}">
+          <label class="red">
+            <checkbox value="{{item.name}}" checked="{{item.checked}}" color="red"></checkbox>
+            <text class="label-1-text">{{item.value}}</text>
+          </label>
+        </view>
+      </checkbox-group>
+    </box>
+  </showbox>
+
+  <showbox title="label用for标识表单组件">
+    <box>
+      <radio-group class="group" bindchange="radioChange" data-for="forLabel">
+        <view class="label-2" xhs:for="{{radioItems}}">
+          <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}" color="red"></radio>
+          <label class="label-2-text" for="{{item.name}}"><text>{{item.name}}</text></label>
+        </view>
+      </radio-group>
+    </box>
+  </showbox>
+
+  <showbox title="label内有多个时选中第一个">
+    <box>
+      <label class="label-3">
+        <checkbox class="checkbox-3" color="red">选项一</checkbox>
+        <checkbox class="checkbox-3" color="red">选项二</checkbox>
+        <view class="label-3-text">点击该label下的文字默认选中第一个checkbox</view>
+      </label>
+    </box>
+  </showbox>
+
+  <showbox title="分享">
+    <box>
+      <view class="page-section page-section-gap">
+        <button id="share" open-type="share" style="display:none"></button>
+        <label class="label-3" for="share">
+          分享
+        </label>
+      </view>
+    </box>
+  </showbox>
+</view>
+
+<include src="templates.xhsml" />

xhs-mini-demos/component-case/label/templates.js

@@ -0,0 +1,11 @@
+/** 以下内容为自动生成，请勿手动修改 */
+
+module.exports = {
+  data: {
+    page_data_0: ``,
+  },
+
+  page_fun_0(e) {
+    this.setData("page_data_0", e.detail.value);
+  },
+};

xhs-mini-demos/component-case/label/templates.xhsml

@@ -0,0 +1,29 @@
+<!-- 以下内容为自动生成，请勿手动修改 -->
+
+<view class="container">
+  <showbox title="label演示">
+    <box>
+      <view class="_ui-space">
+        <view>
+          <label for="{{page_data_0}}">
+            <switch type="checkbox" color="red"></switch>
+          </label>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>for</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_0}}"
+              placeholder="for"
+              type="text"
+              bindinput="page_fun_0"
+            />
+          </view>
+        </view>
+      </view>
+    </box>
+  </showbox>
+</view>