chore(AddressEditDetail): refactor with composition api

src/address-edit/Detail.js

@@ -1,3 +1,5 @@
+import { ref } from 'vue';
+
 // Utils
 import { createNamespace } from '../utils';
 import { isAndroid } from '../utils/validate/system';
@@ -22,102 +24,100 @@ export default createComponent({
 
   emits: ['blur', 'focus', 'input', 'select-search'],
 
-  computed: {
+  setup(props, { emit }) {
-    shouldShowSearchResult() {
+    const field = ref();
-      return this.focused && this.searchResult && this.showSearchResult;
-    },
-  },
 
-  methods: {
+    const showSearchResult = () =>
-    onSelect(express) {
+      props.focused && props.searchResult && props.showSearchResult;
-      this.$emit('select-search', express);
-      this.$emit(
-        'input',
-        `${express.address || ''} ${express.name || ''}`.trim()
-      );
-    },
 
-    onFinish() {
+    const onSelect = (express) => {
-      this.$refs.field.blur();
+      emit('select-search', express);
-    },
+      emit('input', `${express.address || ''} ${express.name || ''}`.trim());
+    };
 
-    onFocus(event) {
+    const onFinish = () => {
-      this.$emit('focus', event);
+      field.value.blur();
-    },
+    };
 
-    onBlur(event) {
+    const renderFinish = () => {
-      this.$emit('blur', event);
+      if (props.value && props.focused && android) {
-    },
-
-    genFinish() {
-      const show = this.value && this.focused && android;
-      if (show) {
         return (
-          <div class={bem('finish')} onClick={this.onFinish}>
+          <div class={bem('finish')} onClick={onFinish}>
             {t('complete')}
           </div>
         );
       }
-    },
+    };
 
-    genSearchResult() {
+    const renderSearchTitle = (express) => {
-      const { value, shouldShowSearchResult, searchResult } = this;
-      if (shouldShowSearchResult) {
-        return searchResult.map((express) => (
-          <Cell
-            v-slots={{
-              title: () => {
       if (express.name) {
         const text = express.name.replace(
-                    value,
+          props.value,
-                    `<span class=${bem('keyword')}>${value}</span>`
+          `<span class=${bem('keyword')}>${props.value}</span>`
         );
 
         return <div innerHTML={text} />;
       }
-              },
+    };
+
+    const renderSearchResult = () => {
+      if (!showSearchResult()) {
+        return;
+      }
+
+      const { searchResult } = props;
+      return searchResult.map((express) => (
+        <Cell
+          v-slots={{
+            title: () => renderSearchTitle(express),
           }}
-            key={express.name + express.address}
           clickable
-            border={false}
+          key={express.name + express.address}
           icon="location-o"
           label={express.address}
           class={bem('search-item')}
+          border={false}
           onClick={() => {
-              this.onSelect(express);
+            onSelect(express);
           }}
         />
       ));
-      }
+    };
-    },
-  },
 
-  render() {
+    const onFocus = (event) => {
-    return (
+      emit('focus', event);
-      <Cell class={bem()}>
+    };
+
+    const onBlur = (event) => {
+      emit('blur', event);
+    };
+
+    const onInput = (value) => {
+      emit('input', value);
+    };
+
+    return () => (
+      <>
         <Field
-          v-slots={{ icon: this.genFinish }}
+          v-slots={{ icon: renderFinish }}
           autosize
-          ref="field"
+          ref={field}
-          rows={this.detailRows}
+          class={bem()}
-          clearable={!android}
+          rows={props.detailRows}
           type="textarea"
           label={t('label')}
-          border={!this.shouldShowSearchResult}
+          border={!showSearchResult()}
-          maxlength={this.detailMaxlength}
+          clearable={!android}
-          modelValue={this.value}
+          maxlength={props.detailMaxlength}
+          modelValue={props.value}
           placeholder={t('placeholder')}
-          errorMessage={this.errorMessage}
+          errorMessage={props.errorMessage}
-          onBlur={this.onBlur}
+          onBlur={onBlur}
-          onFocus={this.onFocus}
+          onFocus={onFocus}
-          {...{
+          {...{ 'onUpdate:modelValue': onInput }}
-            'onUpdate:modelValue': (val) => {
-              this.$emit('input', val);
-            },
-          }}
         />
-        {this.genSearchResult()}
+        {renderSearchResult()}
-      </Cell>
+      </>
     );
   },
 });

src/address-edit/index.js

@@ -40,6 +40,7 @@ export default createComponent({
     validator: Function,
     showDelete: Boolean,
     showPostal: Boolean,
+    disableArea: Boolean,
     searchResult: Array,
     telMaxlength: [Number, String],
     showSetDefault: Boolean,
@@ -55,7 +56,6 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
-    disableArea: Boolean,
     detailRows: {
       type: [Number, String],
       default: 1,

src/address-edit/index.less

@@ -27,8 +27,6 @@
   }
 
   &-detail {
-    padding: 0;
-
     &__search-item {
       background-color: @gray-2;
     }