feat(AddressEdit): add click feedback of area cell (#5120)

src/address-edit/Detail.js

@@ -53,24 +53,25 @@ export default createComponent({
         return searchResult.map(express => (
           <Cell
             key={express.name + express.address}
-            class={bem('search-item')}
+            clickable
-            label={express.address}
             border={false}
             icon="location-o"
-            clickable
+            label={express.address}
+            class={bem('search-item')}
             onClick={() => {
               this.onSelect(express);
             }}
             scopedSlots={{
-              title: () =>
+              title: () => {
-                express.name && (
+                if (express.name) {
-                  <div
+                  const text = express.name.replace(
-                    domPropsInnerHTML={express.name.replace(
+                    value,
-                      value,
+                    `<span class=${bem('keyword')}>${value}</span>`
-                      `<span class=${bem('keyword')}>${value}</span>`
+                  );
-                    )}
+
-                  />
+                  return <div domPropsInnerHTML={text} />;
-                )
+                }
+              }
             }}
           />
         ));

src/address-edit/index.js

@@ -272,6 +272,7 @@ export default createComponent({
           <Field
             vShow={this.showArea}
             readonly
+            clickable
             label={t('area')}
             placeholder={t('areaPlaceholder')}
             rightIcon="arrow"

src/address-edit/index.less

@@ -26,7 +26,7 @@
     padding: 0;
 
     &__search-item {
-      background-color: #f2f3f5;
+      background-color: @gray-2;
     }
 
     &__keyword {

src/address-edit/test/__snapshots__/demo.spec.js.snap

@@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
             <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
           </div>
         </div>
-        <div class="van-cell van-field">
+        <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">
             <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">

src/address-edit/test/__snapshots__/index.spec.js.snap

@@ -15,7 +15,7 @@ exports[`create a AddressEdit 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <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">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@@ -54,7 +54,7 @@ exports[`create a AddressEdit with props 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <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">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@@ -107,7 +107,7 @@ exports[`set-default 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <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">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@@ -160,7 +160,7 @@ exports[`show area component 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <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">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@@ -213,7 +213,7 @@ exports[`show area component 2`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <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">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@@ -266,7 +266,7 @@ exports[`valid area placeholder confirm 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <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">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">

src/contact-list/index.less

@@ -42,7 +42,7 @@
     left: 0;
     z-index: @contact-list-add-button-z-index;
     padding: 5px 16px;
-    background-color: #fff;
+    background-color: @white;
   }
 
   &__add {

src/contact-list/index.tsx

@@ -9,7 +9,7 @@ import Radio from '../radio';
 import RadioGroup from '../radio-group';
 
 // Types
-import { CreateElement, RenderContext } from 'vue/types';
+import { CreateElement, RenderContext, VNode } from 'vue/types';
 import { DefaultSlots } from '../utils/types';
 
 export type ContactListItem = {
@@ -67,14 +67,17 @@ function ContactList(
       }
 
       function Content() {
-        return [
+        const nodes = ([`${item.name}，${item.tel}`] as unknown[]) as VNode[];
-          `${item.name}，${item.tel}`,
+
-          item.isDefault && props.defaultTagText && (
+        if (item.isDefault && props.defaultTagText) {
+          nodes.push(
             <Tag type="danger" round class={bem('item-tag')}>
               {props.defaultTagText}
             </Tag>
-          )
+          );
-        ];
+        }
+
+        return nodes;
       }
 
       return (
@@ -84,11 +87,10 @@ function ContactList(
           center
           class={bem('item')}
           valueClass={bem('item-value')}
-          // @ts-ignore
           scopedSlots={{
+            icon: LeftIcon,
             default: Content,
             'right-icon': RightIcon,
-            icon: LeftIcon
           }}
           onClick={onClick}
         />