docs(DatetimePicker): update demo (#6215)

* docs(DatetimePicker): update demo

* chore: revert

* test: update snapshot

src/area/README.md

@@ -20,7 +20,7 @@ Vue.use(Area);
 To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
 
 ```html
-<van-area :area-list="areaList" />
+<van-area title="Title" :area-list="areaList" />
 ```
 
 ### Initial Value
@@ -28,7 +28,7 @@ To initailize `Area` component, `area-list` property is required. Data structure
 To have a selected value，simply pass the `code` of target area to `value` property.
 
 ```html
-<van-area :area-list="areaList" value="110101" />
+<van-area title="Title" :area-list="areaList" value="110101" />
 ```
 
 ### Columns Number
@@ -36,7 +36,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
 `columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. Set `columns-num` with 2, you'll have a 2 level picker.
 
 ```html
-<van-area :area-list="areaList" :columns-num="2" title="Title" />
+<van-area title="Title" :area-list="areaList" :columns-num="2" />
 ```
 
 ### Columns Placeholder
@@ -45,9 +45,9 @@ To have a selected value，simply pass the `code` of target area to `value` prop
 
 ```html
 <van-area
+  title="Title"
   :area-list="areaList"
   :columns-placeholder="['Choose', 'Choose', 'Choose']"
-  title="Title"
 />
 ```
 

src/area/README.zh-CN.md

@@ -20,7 +20,7 @@ Vue.use(Area);
 要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节
 
 ```html
-<van-area :area-list="areaList" />
+<van-area title="标题" :area-list="areaList" />
 ```
 
 ### 选中省市区
@@ -28,7 +28,7 @@ Vue.use(Area);
 如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`
 
 ```html
-<van-area :area-list="areaList" value="110101" />
+<van-area title="标题" :area-list="areaList" value="110101" />
 ```
 
 ### 配置显示列
@@ -36,7 +36,7 @@ Vue.use(Area);
 可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择
 
 ```html
-<van-area :area-list="areaList" :columns-num="2" title="标题" />
+<van-area title="标题" :area-list="areaList" :columns-num="2" />
 ```
 
 ### 配置列占位提示文字
@@ -45,9 +45,9 @@ Vue.use(Area);
 
 ```html
 <van-area
+  title="标题"
   :area-list="areaList"
   :columns-placeholder="['请选择', '请选择', '请选择']"
-  title="标题"
 />
 ```
 

src/area/demo/index.vue

@@ -1,26 +1,26 @@
 <template>
   <demo-section>
     <demo-block :title="t('basicUsage')">
-      <van-area :area-list="t('areaList')" />
+      <van-area :title="t('title')" :area-list="t('areaList')" />
     </demo-block>
 
     <demo-block :title="t('title2')">
-      <van-area :area-list="t('areaList')" :value="value" />
+      <van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
     </demo-block>
 
     <demo-block :title="t('title3')">
       <van-area
+        :title="t('title')"
         :area-list="t('areaList')"
         :columns-num="2"
-        :title="t('title')"
       />
     </demo-block>
 
     <demo-block :title="t('title4')">
       <van-area
+        :title="t('title')"
         :area-list="t('areaList')"
         :columns-placeholder="t('columnsPlaceholder')"
-        :title="t('title')"
       />
     </demo-block>
   </demo-section>

src/area/test/__snapshots__/demo.spec.js.snap

@@ -4,7 +4,9 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -183,7 +185,9 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">

src/area/test/__snapshots__/index.spec.js.snap

@@ -286,13 +286,34 @@ exports[`watch areaList & code 1`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+          <div class="van-ellipsis">北京市</div>
+        </li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+          <div class="van-ellipsis">天津市</div>
+        </li>
+      </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+          <div class="van-ellipsis">北京市</div>
+        </li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+          <div class="van-ellipsis">县</div>
+        </li>
+      </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+          <div class="van-ellipsis">东城区</div>
+        </li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+          <div class="van-ellipsis">西城区</div>
+        </li>
+      </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
     <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>