[Doc] update demo

2025-04-06 03:58:05 +08:00 · 2018-07-31 14:57:45 +08:00 · 2018-07-31 14:57:45 +08:00 · 3f0b3dd289
commit 3f0b3dd289
parent ef279ded3a
12 changed files with 31 additions and 109 deletions
--- a/example/components/demo-block/index.js
+++ b/example/components/demo-block/index.js
@ -1,6 +1,7 @@
 Component({
  properties: {
-    title: String
+    title: String,
+    padding: Boolean
  },

  externalClasses: ['custom-class']
--- a/example/components/demo-block/index.wxml
+++ b/example/components/demo-block/index.wxml
@ -1,4 +1,4 @@
-<view class="custom-class demo-block">
+<view class="custom-class demo-block {{ padding ? 'demo-block--padding' : '' }}">
  <view wx:if="{{ title }}" class="demo-block__title">{{ title }}</view>
  <slot />
 </view>
--- a/example/components/demo-block/index.wxss
+++ b/example/components/demo-block/index.wxss
@ -1,11 +1,15 @@
-.demo-block {
-  padding: 0 15px;
-}
-
 .demo-block__title {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  color: rgba(69,90,100,.6);
-  padding: 20px 0 15px;
+  padding: 20px 15px 15px;
+}
+
+.demo-block--padding {
+  padding: 0 15px;
+}
+
+.demo-block--padding .demo-block__title {
+  padding-left: 0;
 }
--- a/example/pages/button/index.wxml
+++ b/example/pages/button/index.wxml
@ -1,5 +1,5 @@
 <demo-section>
-  <demo-block title="按钮类型">
+  <demo-block title="按钮类型" padding>
    <view class="row">
      <van-button type="default" custom-class="demo-margin-right">默认按钮</van-button>
      <van-button type="primary">主要按钮</van-button>
@ -8,7 +8,7 @@
    <van-button type="danger">危险按钮</van-button>
  </demo-block>

-  <demo-block title="朴素按钮">
+  <demo-block title="朴素按钮" padding>
    <view class="row">
      <van-button type="default" plain custom-class="demo-margin-right">默认按钮</van-button>
      <van-button type="primary" plain>主要按钮</van-button>
@ -17,18 +17,18 @@
    <van-button type="danger" plain>危险按钮</van-button>
  </demo-block>

-  <demo-block title="按钮尺寸">
+  <demo-block title="按钮尺寸" padding>
    <van-button size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
    <van-button size="normal" class="demo-margin-right">普通按钮</van-button>
    <van-button size="small" class="demo-margin-right">小型按钮</van-button>
    <van-button size="mini">迷你按钮</van-button>
  </demo-block>

-  <demo-block title="禁用状态">
+  <demo-block title="禁用状态" padding>
    <van-button disabled>禁用状态</van-button>
  </demo-block>

-  <demo-block title="加载状态">
+  <demo-block title="加载状态" padding>
    <van-button loading custom-class="demo-margin-right" loading-class="loading" />
    <van-button loading type="primary" loading-class="loading" />
  </demo-block>
--- a/example/pages/card/index.wxml
+++ b/example/pages/card/index.wxml
@ -6,7 +6,6 @@
      num="2"
      price="2.00"
      thumb="{{ imageURL }}"
-      custom-class="card"
    />
  </demo-block>

@ -17,7 +16,6 @@
      num="2"
      price="2.00"
      thumb="{{ imageURL }}"
-      custom-class="card"
      use-footer-slot="{{ true }}"
    >
      <div slot="footer">
--- a/example/pages/card/index.wxss
+++ b/example/pages/card/index.wxss
@ -3,10 +3,6 @@
  background-color: #fff;
 }

-.card {
-  margin: 0 -15px;
-}
-
 .button {
  margin-right: 5px;
 }
--- a/example/pages/loading/index.wxml
+++ b/example/pages/loading/index.wxml
@ -1,9 +1,9 @@
-<demo-block title="Circular">
+<demo-block title="Circular" padding>
  <van-loading custom-class="loading" />
  <van-loading custom-class="loading shadow" color="#fff" />
 </demo-block>

-<demo-block title="Spinner">
+<demo-block title="Spinner" padding>
  <van-loading custom-class="loading" type="spinner" />
  <van-loading custom-class="loading shadow" type="spinner" color="#fff" />
 </demo-block>
--- a/example/pages/stepper/index.wxml
+++ b/example/pages/stepper/index.wxml
@ -1,12 +1,12 @@
-<demo-block title="基础用法">
+<demo-block title="基础用法" padding>
  <van-stepper value="{{ value1 }}" />
 </demo-block>

-<demo-block title="禁用状态">
+<demo-block title="禁用状态" padding>
  <van-stepper value="{{ value1 }}" disabled />
 </demo-block>

-<demo-block title="高级用法">
+<demo-block title="高级用法" padding>
  <van-stepper
    value="{{ value2 }}"
    integer
--- a/example/pages/switch/index.wxml
+++ b/example/pages/switch/index.wxml
@ -1,11 +1,11 @@
-<demo-block title="基础用法">
+<demo-block title="基础用法" padding>
  <van-switch
    checked="{{ checked }}"
    bind:change="onChange"
  />
 </demo-block>

-<demo-block title="禁用状态">
+<demo-block title="禁用状态" padding>
  <van-switch
    checked="{{ checked }}"
    disabled
@ -13,7 +13,7 @@
  />
 </demo-block>

-<demo-block title="加载状态">
+<demo-block title="加载状态" padding>
  <van-switch
    checked="{{ checked }}"
    loading
@ -21,7 +21,7 @@
  />
 </demo-block>

-<demo-block title="高级用法">
+<demo-block title="高级用法" padding>
  <van-switch
    checked="{{ checked2 }}"
    size="36px"
--- a/packages/cell-group/index.js
+++ b/packages/cell-group/index.js
@ -1,71 +1,8 @@
-const CELL_PATH = '../cell/index';
-const FIELD_PATH = '../field/index';
-
 Component({
-  properties: {
-    titleWidth: {
-      type: Number,
-      value: null
-    },
+  props: {
    border: {
      type: Boolean,
-      value: false
-    }
-  },
-  relations: {
-    [CELL_PATH]: {
-      type: 'child',
-      linked() {
-        this._updateIsLastElement(CELL_PATH);
-      },
-      linkChanged() {
-        this._updateIsLastElement(CELL_PATH);
-      },
-      unlinked() {
-        this._updateIsLastElement(CELL_PATH);
-      }
-    },
-    [FIELD_PATH]: {
-      type: 'child',
-      linked() {
-        this._updateIsLastElement(FIELD_PATH);
-      },
-      linkChanged() {
-        this._updateIsLastElement(FIELD_PATH);
-      },
-      unlinked() {
-        this._updateIsLastElement(FIELD_PATH);
-      }
-    }
-  },
-
-  data: {
-    elementUpdateTimeout: 0
-  },
-
-  methods: {
-    _updateIsLastElement(childPath) {
-      // 用 setTimeout 减少计算次数
-      if (this.data.elementUpdateTimeout > 0) {
-        return;
-      }
-
-      const elementUpdateTimeout = setTimeout(() => {
-        this.setData({ elementUpdateTimeout: 0 });
-        let elements = this.getRelationNodes(childPath);
-        const { titleWidth } = this.properties;
-
-        if (elements.length > 0) {
-          let lastIndex = elements.length - 1;
-
-          elements.forEach((cell, index) => {
-            titleWidth && cell.setTitleWidth(titleWidth)
-            cell.updateIsLastElement(index === lastIndex);
-          });
-        }
-      });
-
-      this.setData({ elementUpdateTimeout });
+      value: true
    }
  }
 });
--- a/packages/cell-group/index.pcss
+++ b/packages/cell-group/index.pcss
@ -1,14 +0,0 @@
-@import "../common/_mixins";
-
-.cell-group {
-  position: relative;
-  background-color: #fff;
-  overflow: hidden;
-}
-
-.cell-group--with-border::after {
-  @mixin hairline;
-
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-}
--- a/packages/cell-group/index.wxml
+++ b/packages/cell-group/index.wxml
@ -1,3 +1,3 @@
-<view class="cell-group {{ border ? 'cell-group--with-border' : '' }}">
-  <slot></slot>
-</view>
+<div class="van-cell-group {{ border ? 'van-hairline--top-bottom' : '' }}">
+  <slot />
+</div>