style(Cascader): fix style details (#7779)

* style(Cascader): fix style details

* style(Tabs): use less var

src/cascader/README.md

@@ -15,10 +15,10 @@ Vue.use(Cascader);
 
 ```html
 <van-field
+  v-model="fieldValue"
   is-link
   readonly
   label="Area"
-  :value="fieldValue"
   placeholder="Select Area"
   @click="show = true"
 />
@@ -78,10 +78,10 @@ export default {
 
 ```html
 <van-field
+  v-model="fieldValue"
   is-link
   readonly
   label="Area"
-  :value="fieldValue"
   placeholder="Select Area"
   @click="show = true"
 />

src/cascader/README.zh-CN.md

@@ -21,17 +21,17 @@ Vue.use(Cascader);
 
 ```html
 <van-field
+  v-model="fieldValue"
   is-link
   readonly
   label="地区"
-  :value="fieldValue"
+  placeholder="请选择所在地区"
-  placeholder="请选择地区"
   @click="show = true"
 />
 <van-popup v-model="show" round position="bottom">
   <van-cascader
     v-model="cascaderValue"
-    title="请选择地区"
+    title="请选择所在地区"
     @close="show = false"
     @finish="onFinish"
   />
@@ -77,7 +77,7 @@ export default {
 ```html
 <van-cascader
   v-model="cascaderValue"
-  title="请选择地区"
+  title="请选择所在地区"
   active-color="#1989fa"
   @close="show = false"
   @finish="onFinish"
@@ -90,17 +90,17 @@ export default {
 
 ```html
 <van-field
+  v-model="fieldValue"
   is-link
   readonly
   label="地区"
-  :value="fieldValue"
+  placeholder="请选择所在地区"
-  placeholder="请选择地区"
   @click="show = true"
 />
 <van-popup v-model="show" round position="bottom">
   <van-cascader
     v-model="cascaderValue"
-    title="请选择地区"
+    title="请选择所在地区"
     @close="show = false"
     @change="onChange"
     @finish="onFinish"

src/cascader/demo/index.vue

@@ -2,14 +2,20 @@
   <demo-section>
     <demo-block card :title="t('basicUsage')">
       <van-field
+        v-model="base.result"
         is-link
         readonly
         :label="t('area')"
-        :value="base.result"
         :placeholder="t('selectArea')"
         @click="base.show = true"
       />
-      <van-popup v-model="base.show" round position="bottom">
+      <van-popup
+        v-model="base.show"
+        round
+        position="bottom"
+        get-container="body"
+        safe-area-inset-bottom
+      >
         <van-cascader
           v-model="base.value"
           :title="t('selectArea')"
@@ -22,14 +28,20 @@
 
     <demo-block card :title="t('customColor')">
       <van-field
+        v-model="customColor.result"
         is-link
         readonly
         :label="t('area')"
-        :value="customColor.result"
         :placeholder="t('selectArea')"
         @click="customColor.show = true"
       />
-      <van-popup v-model="customColor.show" round position="bottom">
+      <van-popup
+        v-model="customColor.show"
+        round
+        position="bottom"
+        get-container="body"
+        safe-area-inset-bottom
+      >
         <van-cascader
           v-model="customColor.value"
           :title="t('selectArea')"
@@ -43,14 +55,20 @@
 
     <demo-block card :title="t('asyncOptions')">
       <van-field
+        v-model="async.result"
         is-link
         readonly
         :label="t('area')"
-        :value="async.result"
         :placeholder="t('selectArea')"
         @click="async.show = true"
       />
-      <van-popup v-model="async.show" round position="bottom">
+      <van-popup
+        v-model="async.show"
+        round
+        position="bottom"
+        get-container="body"
+        safe-area-inset-bottom
+      >
         <van-cascader
           v-model="async.value"
           :title="t('selectArea')"
@@ -73,7 +91,7 @@ export default {
     'zh-CN': {
       area: '地区',
       options: zhCNOptions,
-      selectArea: '请选择地区',
+      selectArea: '请选择所在地区',
       customColor: '自定义颜色',
       asyncOptions: '异步加载选项',
       asyncOptions1: [
@@ -145,6 +163,7 @@ export default {
     onFinish(type, { value, selectedOptions }) {
       const result = selectedOptions.map((option) => option.text).join('/');
       this[type] = {
+        ...this[type],
         show: false,
         value,
         result,

src/cascader/index.less

@@ -17,7 +17,7 @@
 
   &__close-icon {
     color: @cascader-close-icon-color;
-    font-size: @cascader-close-icon-color;
+    font-size: @cascader-close-icon-size;
 
     &:active {
       color: @cascader-close-icon-active-color;
@@ -32,7 +32,11 @@
 
     &.van-tabs--line .van-tabs__wrap {
       height: @cascader-tabs-height;
-      padding: 0 6px;
+    }
+
+    .van-tabs__nav--complete {
+      padding-right: 6px;
+      padding-left: 6px;
     }
   }
 
@@ -42,6 +46,7 @@
 
     &--unselected {
       color: @cascader-unselected-tab-color;
+      font-weight: normal;
     }
   }
 
@@ -59,6 +64,7 @@
 
     &--selected {
       color: @cascader-active-color;
+      font-weight: @font-weight-bold;
     }
   }
 

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

@@ -6,31 +6,28 @@ exports[`renders demo correctly 1`] = `
     <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择地区" class="van-field__control"></div>
+        <div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择所在地区" class="van-field__control"></div>
       </div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <!---->
   </div>
   <div>
     <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择地区" class="van-field__control"></div>
+        <div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择所在地区" class="van-field__control"></div>
       </div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <!---->
   </div>
   <div>
     <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择地区" class="van-field__control"></div>
+        <div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择所在地区" class="van-field__control"></div>
       </div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <!---->
   </div>
 </div>
 `;

src/tabs/index.less

@@ -66,11 +66,6 @@
         &::-webkit-scrollbar {
           display: none;
         }
-
-        &--complete {
-          padding-right: 8px;
-          padding-left: 8px;
-        }
       }
     }
   }
@@ -87,6 +82,11 @@
       padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
     }
 
+    &--complete {
+      padding-right: @padding-xs;
+      padding-left: @padding-xs;
+    }
+
     &--card {
       box-sizing: border-box;
       height: @tabs-card-height;