Merge pull request #269 from vusion/bugfix/240118

Bugfix/240118
vusion · Jan 22, 2024 · 1b7c144 · 1b7c144
2 parents fe364bf + 9017e94
commit 1b7c144
Showing 20 changed files with 270 additions and 364 deletions.
diff --git a/src-vusion/styles/theme.css b/src-vusion/styles/theme.css
@@ -638,6 +638,7 @@
     --van-tabs-default-color
   ); /* @type color */ /* @desc 滑动条背景色 */ /* @excludeTags van-tab */
   --van-tabs-bottom-bar-border-radius: 3px; /* @desc 滑动条圆角 */ /* @excludeTags van-tab */
+  --van-tabs-card-nav-margin: 0 24px; /* @desc card模式 导航外边距 */ /* @excludeTags van-tab */
 
   /* @component van-uploader */
   --van-uploader-size: 80px; /* @desc 组件大小 */

diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
@@ -217,6 +217,17 @@
         >
       </div>
     </demo-block>
+
+    <demo-block title="点击防抖">
+      <van-button
+        size="normal"
+        type="info"
+        class="u-code-example_demo_"
+        squareroud="round"
+        @click="onClick"
+        >{{ t('info') }}</van-button
+      >
+    </demo-block>
   </demo-section>
 </template>
 
@@ -286,6 +297,11 @@ export default {
       gradient: 'Gradient',
       blockElement: 'Block Element'
     }
+  },
+  methods: {
+    onClick() {
+      console.log('click');
+    }
   }
 };
 </script>

diff --git a/src/button/index.tsx b/src/button/index.tsx
@@ -1,3 +1,4 @@
+import _debounce from 'lodash/debounce';
 // Utils
 import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
@@ -98,17 +99,14 @@ function Button(
     }
   }
 
-  async function onClick(event: Event) {
+  const onClick = _debounce(async (event: Event) => {
     if (props.loading) {
       event.preventDefault();
     }
+
     if (!loading && !disabled) {
-      // console.log(ctx, 'button ctx');
-      // console.log(ctx.parent.$router);
-      // console.log(ctx.parent.$route);
       emit(ctx, 'click', event);
       const hrefR = currentHref();
-      // console.log(hrefR, ctx.props)
       if (!ctx.props.nativeType && !hrefR && !ctx.listeners.click) {
         event.preventDefault();
       }
@@ -136,9 +134,6 @@ function Button(
         linkpao();
         return;
       }
-      // @ts-ignore：没办法
-      // if (props.target !== '_self')
-      //   return;
 
       if (hrefR === undefined) {
         let to;
@@ -190,10 +185,8 @@ function Button(
         }
         downloadClick();
       }
-
-      // functionalRoute(ctx);
     }
-  }
+  }, 300, { leading: true, trailing: false });
 
   function onTouchstart(event: TouchEvent) {
     emit(ctx, 'touchstart', event);

diff --git a/src/button/test/__snapshots__/demo.spec.js.snap b/src/button/test/__snapshots__/demo.spec.js.snap
@@ -60,5 +60,8 @@ exports[`renders demo correctly 1`] = `
       <div class="van-button__content"><span class="van-button__text">确定</span></div>
     </button></div>
 </div>
+<div><button class="u-code-example_demo_ van-button van-button--info van-button--normal van-button--round">
+    <div class="van-button__content"><span class="van-button__text">确定</span></div>
+  </button></div>
 </div>
 `;
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
@@ -1,222 +1,60 @@
 <template>
   <demo-section>
-    <demo-block>
-      <div>date: {{ date }}</div>
-      <div>start: {{ start }}</div>
-      <div>end: {{ end }}</div>
-      <van-calendar
-        label-field="日历选择"
-        :value.sync="start"
-        :min-date="min"
-        :max-date="end"
-        title="选择日期"
-      ></van-calendar>
-      <van-calendar
-        label-field="日历选择"
-        :value.sync="end"
-        :min-date="start"
-        :max-date="max"
-        title="选择日期"
-      ></van-calendar>
-      <button @click="clear">clear</button>
+    <demo-block title="基础用法--单日期">
+      <van-cell>
+        <template #title>
+          <span>日期选择</span>
+        </template>
+        <van-calendar
+          :value.sync="date1"
+          :min-date="min"
+          :max-date="end"
+          title="选择日期"
+          @confirm="onConfirm1"
+          @select="onSelect1"
+        ></van-calendar>
+      </van-cell>
     </demo-block>
 
     <demo-block title="全量渲染节点">
-      <van-calendar
-        label-field="日历选择"
-        :value.sync="start"
-        :min-date="min"
-        :max-date="end"
-        title="选择日期"
-        :lazyRender="false"
-      ></van-calendar>
-    </demo-block>
-
-    <demo-block card title="临时测试">
+      <van-cell>
+        <template #title>
+          <span>日期选择</span>
+        </template>
         <van-calendar
-          label-field="日历选择"
+          :min-date="min"
+          :max-date="end"
           title="选择日期"
-          :lazyRender="true"
-          :close-on-click-overlay="true"
+          :lazyRender="false"
         ></van-calendar>
+      </van-cell>
     </demo-block>
   </demo-section>
 </template>
 
 <script>
 export default {
-  i18n: {
-    'zh-CN': {
-      in: '入店',
-      out: '离店',
-      today: '今天',
-      laborDay: '劳动节',
-      youthDay: '青年节',
-      calendar: '日历',
-      maxRange: '日期区间最大范围',
-      selectCount: (count) => `选择了 ${count} 个日期`,
-      selectSingle: '选择单个日期',
-      selectMultiple: '选择多个日期',
-      selectRange: '选择日期区间',
-      quickSelect: '快捷选择',
-      confirmText: '完成',
-      customColor: '自定义颜色',
-      customRange: '自定义日期范围',
-      customConfirm: '自定义按钮文字',
-      customDayText: '自定义日期文案',
-      customPosition: '自定义弹出位置',
-      customCalendar: '自定义日历',
-      confirmDisabledText: '请选择结束时间',
-      firstDayOfWeek: '自定义周起始日',
-      tiledDisplay: '平铺展示',
-    },
-    'en-US': {
-      in: 'In',
-      out: 'Out',
-      today: 'Today',
-      laborDay: 'Labor day',
-      youthDay: 'Youth Day',
-      calendar: 'Calendar',
-      maxRange: 'Max Range',
-      selectCount: (count) => `${count} dates selected`,
-      selectSingle: 'Select Single Date',
-      selectMultiple: 'Select Multiple Date',
-      selectRange: 'Select Date Range',
-      quickSelect: 'Quick Select',
-      confirmText: 'OK',
-      customColor: 'Custom Color',
-      customRange: 'Custom Date Range',
-      customConfirm: 'Custom Confirm Text',
-      customDayText: 'Custom Day Text',
-      customPosition: 'Custom Position',
-      customCalendar: 'Custom Calendar',
-      firstDayOfWeek: 'Custom First Day Of Week',
-      confirmDisabledText: 'Select End Time',
-      tiledDisplay: 'Tiled display',
-    },
-  },
-
   data() {
     return {
-      date: '2023-10-11',
-      start: null,
-      end: null,
       min: '1900-01-01',
       max: '2050-12-31',
-    };
-  },
-
-  methods: {
-    resetSettings() {
-      this.round = true;
-      this.color = undefined;
-      this.minDate = undefined;
-      this.maxDate = undefined;
-      this.maxRange = undefined;
-      this.position = undefined;
-      this.formatter = undefined;
-      this.showConfirm = true;
-      this.confirmText = undefined;
-      this.confirmDisabledText = undefined;
-      this.firstDayOfWeek = 0;
-    },
-
-    show(type, id) {
-      this.resetSettings();
-      this.id = id;
-      this.type = type;
-      this.showCalendar = true;
 
-      switch (id) {
-        case 'quickSelect1':
-        case 'quickSelect2':
-          this.showConfirm = false;
-          break;
-        case 'customColor':
-          this.color = '#1989fa';
-          break;
-        case 'customConfirm':
-          this.confirmText = this.t('confirmText');
-          this.confirmDisabledText = this.t('confirmDisabledText');
-          break;
-        case 'customRange':
-          this.minDate = new Date(2010, 0, 1);
-          this.maxDate = new Date(2010, 0, 31);
-          break;
-        case 'customDayText':
-          this.minDate = new Date(2010, 4, 1);
-          this.maxDate = new Date(2010, 4, 31);
-          this.formatter = this.dayFormatter;
-          break;
-        case 'customPosition':
-          this.round = false;
-          this.position = 'right';
-          break;
-        case 'maxRange':
-          this.maxRange = 3;
-          break;
-        case 'firstDayOfWeek':
-          this.firstDayOfWeek = 1;
-          break;
-      }
-    },
-
-    dayFormatter(day) {
-      const month = day.date.getMonth() + 1;
-      const date = day.date.getDate();
-
-      if (month === 5) {
-        if (date === 1) {
-          day.topInfo = this.t('laborDay');
-        } else if (date === 4) {
-          day.topInfo = this.t('youthDay');
-        } else if (date === 11) {
-          day.text = this.t('today');
-        }
-      }
+      date1: '2023-10-11',
 
-      if (day.type === 'start') {
-        day.bottomInfo = this.t('in');
-      } else if (day.type === 'end') {
-        day.bottomInfo = this.t('out');
-      }
-
-      return day;
-    },
-
-    formatDate(date) {
-      if (date) {
-        return `${date.getMonth() + 1}/${date.getDate()}`;
-      }
-    },
-
-    formatFullDate(date) {
-      if (date) {
-        return `${date.getFullYear()}/${this.formatDate(date)}`;
-      }
-    },
-
-    formatMultiple(dates) {
-      if (dates.length) {
-        return this.t('selectCount', dates.length);
-      }
-    },
+      start: null,
+      end: null,
 
-    formatRange(dateRange) {
-      if (dateRange.length) {
-        const [start, end] = dateRange;
-        return `${this.formatDate(start)} - ${this.formatDate(end)}`;
-      }
-    },
+    };
+  },
 
-    onConfirm(date) {
-      this.showCalendar = false;
-      this.date[this.id] = date;
+  methods: {
+    onSelect1(date) {
+      console.log('onSelect1 date: ', date);
+      console.log('date1: ', this.date1);
     },
-    clear() {
-      this.date = null
-      this.start = null
-      this.end = null
+    onConfirm1(date) {
+      console.log('onConfirm1 date: ', date);
+      console.log('date1: ', this.date1);
     }
   },
 };

diff --git a/src/calendar/index.js b/src/calendar/index.js
@@ -200,16 +200,6 @@ export default createComponent({
     },
     currentValue(val) {
       this.tempValue = val;
-
-      const date = dayjs(val);
-      this.$emit(
-        'update:value',
-        date.isValid() ? date.format('YYYY-MM-DD') : val
-      );
-      this.$emit(
-        'update:default-date',
-        date.isValid() ? date.format('YYYY-MM-DD') : val
-      );
     },
     defaultDate: {
       handler(val) {
@@ -292,8 +282,13 @@ export default createComponent({
 
       return '';
     },
-    setCurrentDate(date) {
-      this.currentValue = date;
+    setCurrentDate(val) {
+      this.currentValue = val;
+
+      const date = dayjs(this.currentValue);
+      const value = date.isValid() ? date.format('YYYY-MM-DD') : this.currentValue;
+      this.$emit('update:value', value);
+      this.$emit('update:default-date', value);
     },
     ifDesigner() {
       return this.$env && this.$env.VUE_APP_DESIGNER;
@@ -308,8 +303,13 @@ export default createComponent({
       }
     },
     // @exposed-api
-    reset(date = this.getInitialDate()) {
-      this.currentValue = date;
+    reset(val = this.getInitialDate()) {
+      this.currentValue = val;
+
+      const date = dayjs(this.currentValue);
+      const value = date.isValid() ? date.format('YYYY-MM-DD') : this.currentValue;
+      this.$emit('update:value', value);
+      this.$emit('update:default-date', value);
       this.scrollIntoView();
     },
 
@@ -453,7 +453,13 @@ export default createComponent({
 
     onConfirm() {
       this.currentValue = this.currentDate;
-      this.$emit('confirm', dayjs(this.currentValue).format('YYYY-MM-DD'));
+
+      const date = dayjs(this.currentValue);
+      const value = date.isValid() ? date.format('YYYY-MM-DD') : this.currentValue;
+      this.$emit('update:value', value);
+      this.$emit('update:default-date', value);
+
+      this.$emit('confirm', value);
 
       this.togglePopup();
     },

diff --git a/src/calendar/test/__snapshots__/demo.spec.js.snap b/src/calendar/test/__snapshots__/demo.spec.js.snap
@@ -3,44 +3,33 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div>date: 2023-10-11</div>
-    <div>start: </div>
-    <div>end: </div>
-    <div vusion-click-enabled="true" class="van-calendar__wrapppcalendar">
-      <div label-layout="inline" noallow="" class="van-cellson van-cellson--center van-cellson--insel van-field">
-        <div class="van-cellson__title van-field__label"><span>日历选择</span></div>
-        <div class="van-cellson__value van-field__value">
-          <div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control van-field__control--right"></div>
-        </div>
-      </div>
-    </div>
-    <div vusion-click-enabled="true" class="van-calendar__wrapppcalendar">
-      <div label-layout="inline" noallow="" class="van-cellson van-cellson--center van-cellson--insel van-field">
-        <div class="van-cellson__title van-field__label"><span>日历选择</span></div>
-        <div class="van-cellson__value van-field__value">
-          <div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control van-field__control--right"></div>
-        </div>
-      </div>
-    </div> <button>clear</button>
-  </div>
-  <div>
-    <div vusion-click-enabled="true" class="van-calendar__wrapppcalendar">
-      <div label-layout="inline" noallow="" class="van-cellson van-cellson--center van-cellson--insel van-field">
-        <div class="van-cellson__title van-field__label"><span>日历选择</span></div>
-        <div class="van-cellson__value van-field__value">
-          <div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control van-field__control--right"></div>
+    <div noallow="" role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center">
+      <div vusion-slot-name="title" vusion-slot-name-edit="title" class="van-cell__title"><span>日期选择</span></div>
+      <div class="van-cell__value">
+        <div vusion-click-enabled="true" class="van-calendar__wrapppcalendar">
+          <div label-layout="inline" noallow="" class="van-cellson van-cellson--center van-cellson--insel van-field">
+            <div class="van-cellson__value van-field__value">
+              <div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control van-field__control--right"></div>
+            </div>
+          </div>
         </div>
       </div>
+      <van-icon name="arrow" class="van-cell__right-icon"></van-icon>
     </div>
   </div>
   <div>
-    <div vusion-click-enabled="true" class="van-calendar__wrapppcalendar">
-      <div label-layout="inline" noallow="" class="van-cellson van-cellson--center van-cellson--insel van-field">
-        <div class="van-cellson__title van-field__label"><span>日历选择</span></div>
-        <div class="van-cellson__value van-field__value">
-          <div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control van-field__control--right"></div>
+    <div noallow="" role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center">
+      <div vusion-slot-name="title" vusion-slot-name-edit="title" class="van-cell__title"><span>日期选择</span></div>
+      <div class="van-cell__value">
+        <div vusion-click-enabled="true" class="van-calendar__wrapppcalendar">
+          <div label-layout="inline" noallow="" class="van-cellson van-cellson--center van-cellson--insel van-field">
+            <div class="van-cellson__value van-field__value">
+              <div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control van-field__control--right"></div>
+            </div>
+          </div>
         </div>
       </div>
+      <van-icon name="arrow" class="van-cell__right-icon"></van-icon>
     </div>
   </div>
 </div>

diff --git a/src/calendar/test/index.spec.js b/src/calendar/test/index.spec.js
@@ -0,0 +1,26 @@
+import Calendar from '..';
+import { mount, later } from '../../../test';
+import {
+  minDate,
+  maxDate,
+} from './utils';
+
+
+test('confirm event', async () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      minDate,
+      maxDate,
+      poppable: false,
+      value: '2010-01-11',
+    },
+  });
+
+  await later();
+
+  wrapper.findAll('.van-calendar__day').at(15).trigger('click');
+  expect(wrapper.emitted('confirm')).toBeFalsy();
+
+  wrapper.find('.van-calendar__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual('2010-01-16');
+});
diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js
@@ -66,6 +66,14 @@ export default createComponent({
       }
 
     },
+
+    hasLinkSibling() {
+      if (this.parent) {
+        return this.parent.hasLinkChild;
+      }
+
+      return false;
+    }
   },
 
   created() {
@@ -156,12 +164,17 @@ export default createComponent({
         <Cell
           novalue={true}
           role="button"
-          class={bem('title', { disabled, expanded, borderless: !border })}
+          class={bem('title', {
+            disabled,
+            expanded,
+            borderless: !border,
+            hideLink: !this.isLink,
+          })}
           onClick={this.onClick}
           scopedSlots={titleSlots}
           tabindex={disabled ? -1 : 0}
           aria-expanded={String(expanded)}
-          {...{ props: this.$props }}
+          {...{ props: { ...this.$props, isLink: this.hasLinkSibling } }}
         />
       );
     },

diff --git a/src/collapse-item/index.less b/src/collapse-item/index.less
@@ -11,6 +11,12 @@
   }
 
   &__title {
+    &--hideLink {
+      .van-cell__right-icon {
+        opacity: 0;
+      }
+    }
+
     .van-cell__right-icon::before {
       // using translateZ to fix safari rendering issues
       // see: https://github.com/youzan/vant/issues/8608

diff --git a/src/collapse/demo/index.vue b/src/collapse/demo/index.vue
@@ -1,114 +1,73 @@
 <template>
   <demo-section>
-  <demo-block :title="t('')">
-    <van-collapse :ref="`collapse1`" :value.sync="variable1" :accordion="true">
-          <van-collapse-item name="ssss">
-              <template #title>
-                  <van-text :ref="`text8`" text="标题1"></van-text>
-            </template>
-              <van-text :ref="`text9`" text="代码是写出来给人看的，附带能在机器上运行"></van-text>
-        </van-collapse-item>
-          <van-collapse-item :ref="`collapse_item2`" :name="`bbbbbbbbbbbbbbb`">
-              <template #title>
-                  <van-text :ref="`text10`" text="标题2"></van-text>
-            </template>
-              <van-text :ref="`text11`" text="代码是写出来给人看的，附带能在机器上运行"></van-text>
-        </van-collapse-item>
-          <van-collapse-item :ref="`collapse_item3`">
-              <template #title>
-                  <van-text :ref="`text12`" text="标题3"></van-text>
-            </template>
-              <van-text :ref="`text13`" text="代码是写出来给人看的，附带能在机器上运行"></van-text>
-        </van-collapse-item>
-    </van-collapse>
-  </demo-block>
+    <demo-block title="基础用法">
+      <van-cell :is-link="false">
+        <template #title>
+          <van-text text="值"></van-text>
+        </template>
+        {{ value }}
+      </van-cell>
 
-  <div>{{ variable1 }}</div>
-
-    <!-- <demo-block :title="t('basicUsage')">
-      <van-collapse v-model="active1">
-        <van-collapse-item :title="t('title') + 1">
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 2">
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 3">
-          {{ t('text') }}
-        </van-collapse-item>
-      </van-collapse>
-    </demo-block>
-
-    <demo-block :title="t('accordion')">
-      <van-collapse v-model="active2" accordion>
-        <van-collapse-item :title="t('title') + 1">
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 2">
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 3">
-          {{ t('text') }}
-        </van-collapse-item>
-      </van-collapse>
-    </demo-block>
-
-    <demo-block :title="t('disabled')">
-      <van-collapse v-model="active3">
-        <van-collapse-item :title="t('title') + 1">
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 2" disabled>
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 3" disabled>
-          {{ t('text') }}
-        </van-collapse-item>
+      <van-collapse :value.sync="value" :accordion="true">
+            <van-collapse-item name="a" :is-link="false">
+                <template #title>
+                    <van-row :gutter="`0`" style="text-align: center;">
+                        <van-col :span="`8`">
+                              <van-text :text="`普通文本`"></van-text>
+                        </van-col>
+                          <van-col :span="`8`">
+                              <van-text :text="`普通文本`"></van-text>
+                        </van-col>
+                          <van-col :span="`8`">
+                              <van-text :text="`普通文本`"></van-text>
+                        </van-col>
+                    </van-row>
+                </template>
+                <van-text text="代码是写出来给人看的，附带能在机器上运行"></van-text>
+            </van-collapse-item>
+            <van-collapse-item  :name="`b`" :is-link="false">
+                <template #title>
+                    <van-row :gutter="`0`" style="text-align: center;">
+                        <van-col :span="`8`">
+                              <van-text :text="`普通文本`"></van-text>
+                        </van-col>
+                          <van-col :span="`8`">
+                              <van-text :text="`普通文本`"></van-text>
+                        </van-col>
+                          <van-col :span="`8`">
+                              <van-text :text="`普通文本`"></van-text>
+                        </van-col>
+                    </van-row>
+                </template>
+                <van-text text="代码是写出来给人看的，附带能在机器上运行"></van-text>
+            </van-collapse-item>
+            <van-collapse-item>
+                <template #title>
+                    <van-row :gutter="`0`" style="text-align: center;">
+                        <van-col :span="`8`">
+                              <van-text :text="`普通文本`"></van-text>
+                        </van-col>
+                          <van-col :span="`8`">
+                              <van-text :text="`普通文本`"></van-text>
+                        </van-col>
+                          <van-col :span="`8`">
+                              <van-text :text="`普通文本`"></van-text>
+                        </van-col>
+                    </van-row>
+                </template>
+                <van-text  text="代码是写出来给人看的，附带能在机器上运行"></van-text>
+          </van-collapse-item>
       </van-collapse>
     </demo-block>
 
-    <demo-block :title="t('titleSlot')">
-      <van-collapse v-model="active4">
-        <van-collapse-item>
-          <template #title>
-            {{ t('title') + 1 }}<van-icon name="question-o" />
-          </template>
-          {{ t('text') }}
-        </van-collapse-item>
-        <van-collapse-item
-          :title="t('title') + 2"
-          :value="t('content')"
-          icon="shop-o"
-        >
-          {{ t('text') }}
-        </van-collapse-item>
-      </van-collapse>
-    </demo-block> -->
   </demo-section>
 </template>
 
 <script>
 export default {
-  i18n: {
-    'zh-CN': {
-      accordion: '手风琴',
-      titleSlot: '自定义标题内容',
-      text: '代码是写出来给人看的，附带能在机器上运行',
-    },
-    'en-US': {
-      accordion: 'Accordion',
-      titleSlot: 'Custom title',
-      text: 'Content',
-    },
-  },
-
   data() {
     return {
-      variable1: 'asfsa',
-      active1: [0],
-      active2: 0,
-      active3: [],
-      active4: [],
+      value: '',
     };
   },
 };

diff --git a/src/collapse/index.js b/src/collapse/index.js
@@ -34,6 +34,11 @@ export default createComponent({
       }
     },
   },
+  computed: {
+    hasLinkChild() {
+      return this.children.some((child) => child.isLink);
+    }
+  },
   methods: {
     fromValue(value) {
       try {

diff --git a/src/collapse/test/__snapshots__/demo.spec.js.snap b/src/collapse/test/__snapshots__/demo.spec.js.snap
@@ -3,27 +3,50 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
+    <div noallow="" class="van-cell van-cell--center">
+      <div vusion-slot-name="title" vusion-slot-name-edit="title" class="van-cell__title"><span vusion-slot-name-edit="text" class="root">值</span></div>
+      <div class="van-cell__value">
+
+      </div>
+    </div>
     <div class="van-collapse van-hairline--top-bottom">
       <div class="van-collapse-item">
-        <div role="button" tabindex="0" aria-expanded="false" noallow="" class="van-cell van-cell--clickable van-cell--center van-collapse-item__title">
-          <div vusion-slot-name="title" vusion-slot-name-edit="title" class="van-cell__title"><span vusion-slot-name-edit="text" class="root">标题1</span></div>
+        <div aria-expanded="false" noallow="" class="van-cell van-cell--clickable van-cell--center van-collapse-item__title van-collapse-item__title--hideLink" role="button" tabindex="0">
+          <div vusion-slot-name="title" vusion-slot-name-edit="title" class="van-cell__title">
+            <div class="van-row van-row--flex" style="text-align: center;">
+              <div vusion-slot-name="default" allowchild="true" class="van-col van-col--8"><span vusion-slot-name-edit="text" class="root">普通文本</span></div>
+              <div vusion-slot-name="default" allowchild="true" class="van-col van-col--8"><span vusion-slot-name-edit="text" class="root">普通文本</span></div>
+              <div vusion-slot-name="default" allowchild="true" class="van-col van-col--8"><span vusion-slot-name-edit="text" class="root">普通文本</span></div>
+            </div>
+          </div>
           <van-icon name="arrow" class="van-cell__right-icon"></van-icon>
         </div>
       </div>
       <div class="van-collapse-item van-collapse-item--border">
-        <div role="button" tabindex="0" aria-expanded="false" noallow="" class="van-cell van-cell--clickable van-cell--center van-collapse-item__title">
-          <div vusion-slot-name="title" vusion-slot-name-edit="title" class="van-cell__title"><span vusion-slot-name-edit="text" class="root">标题2</span></div>
+        <div aria-expanded="false" noallow="" class="van-cell van-cell--clickable van-cell--center van-collapse-item__title van-collapse-item__title--hideLink" role="button" tabindex="0">
+          <div vusion-slot-name="title" vusion-slot-name-edit="title" class="van-cell__title">
+            <div class="van-row van-row--flex" style="text-align: center;">
+              <div vusion-slot-name="default" allowchild="true" class="van-col van-col--8"><span vusion-slot-name-edit="text" class="root">普通文本</span></div>
+              <div vusion-slot-name="default" allowchild="true" class="van-col van-col--8"><span vusion-slot-name-edit="text" class="root">普通文本</span></div>
+              <div vusion-slot-name="default" allowchild="true" class="van-col van-col--8"><span vusion-slot-name-edit="text" class="root">普通文本</span></div>
+            </div>
+          </div>
           <van-icon name="arrow" class="van-cell__right-icon"></van-icon>
         </div>
       </div>
       <div class="van-collapse-item van-collapse-item--border">
         <div role="button" tabindex="0" aria-expanded="false" noallow="" class="van-cell van-cell--clickable van-cell--center van-collapse-item__title">
-          <div vusion-slot-name="title" vusion-slot-name-edit="title" class="van-cell__title"><span vusion-slot-name-edit="text" class="root">标题3</span></div>
+          <div vusion-slot-name="title" vusion-slot-name-edit="title" class="van-cell__title">
+            <div class="van-row van-row--flex" style="text-align: center;">
+              <div vusion-slot-name="default" allowchild="true" class="van-col van-col--8"><span vusion-slot-name-edit="text" class="root">普通文本</span></div>
+              <div vusion-slot-name="default" allowchild="true" class="van-col van-col--8"><span vusion-slot-name-edit="text" class="root">普通文本</span></div>
+              <div vusion-slot-name="default" allowchild="true" class="van-col van-col--8"><span vusion-slot-name-edit="text" class="root">普通文本</span></div>
+            </div>
+          </div>
           <van-icon name="arrow" class="van-cell__right-icon"></van-icon>
         </div>
       </div>
     </div>
   </div>
-  <div>asfsa</div>
 </div>
 `;
diff --git a/src/dialog/index.less b/src/dialog/index.less
@@ -49,7 +49,7 @@
       line-height: @dialog-message-line-height;
 
       // allow newline charactor
-      white-space: pre-wrap;
+      // white-space: pre-wrap;
       text-align: center;
       word-wrap: break-word;
       -webkit-overflow-scrolling: touch;

diff --git a/src/slider/index.less b/src/slider/index.less
@@ -1,7 +1,7 @@
 @import '../style/var';
 
 .van-slider-room {
-  box-sizing: content-box;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/src/slider/test/__snapshots__/index.spec.js.snap b/src/slider/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`slider-width style 1`] = `
+<div class="van-slider-room " style="width: 100px; height: 50px; padding: 10px;">
+  <div class="van-slider">
+    <div class="van-slider__bar" style="width: 0%;">
+      <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+        <div class="van-slider__button"></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/slider/test/index.spec.js b/src/slider/test/index.spec.js
@@ -0,0 +1,15 @@
+import Slider from '..';
+import {
+  mount,
+} from '../../../test';
+
+
+test('slider-width style', () => {
+  const wrapper = mount(Slider, {
+    propsData: {
+      style: "width: 100px; height: 50px; padding: 10px;",
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue
@@ -65,7 +65,7 @@
     </demo-block>
 
     <demo-block :title="t('title4')">
-      <van-tabs type="card" class="u-code-example_demo_">
+      <van-tabs type="card" class="u-code-example_demo_" style="--van-tabs-card-nav-margin: 0;">
         <van-tab v-for="index in 3" :title="t('tab') + index" :key="index">
           {{ t('content') }} {{ index }}
         </van-tab>

diff --git a/src/tab/test/__snapshots__/demo.spec.js.snap b/src/tab/test/__snapshots__/demo.spec.js.snap
@@ -184,7 +184,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="u-code-example_demo_ van-tabs van-tabs--card">
+    <div class="u-code-example_demo_ van-tabs van-tabs--card" style="--van-tabs-card-nav-margin: 0;">
       <div class="van-tabs__wrap">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--card">
           <div role="tab" aria-selected="true" class="van-tab van-tab--active" undefined="" vusion-slot-name="title"><span vusion-slot-name-edit="title" class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>

diff --git a/src/tabs/index.less b/src/tabs/index.less
@@ -90,7 +90,7 @@
     &--card {
       box-sizing: border-box;
       height: @tabs-card-height;
-      margin: 0 @padding-md;
+      margin: var(--van-tabs-card-nav-margin);
       border: @border-width-base solid @tabs-default-color;
       border-radius: @border-radius-sm;