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 (express.name) {
-      if (shouldShowSearchResult) {
+        const text = express.name.replace(
-        return searchResult.map((express) => (
+          props.value,
-          <Cell
+          `<span class=${bem('keyword')}>${props.value}</span>`
-            v-slots={{
+        );
-              title: () => {
-                if (express.name) {
-                  const text = express.name.replace(
-                    value,
-                    `<span class=${bem('keyword')}>${value}</span>`
-                  );
 
-                  return <div innerHTML={text} />;
+        return <div innerHTML={text} />;
-                }
-              },
-            }}
-            key={express.name + express.address}
-            clickable
-            border={false}
-            icon="location-o"
-            label={express.address}
-            class={bem('search-item')}
-            onClick={() => {
-              this.onSelect(express);
-            }}
-          />
-        ));
       }
-    },
+    };
-  },
 
-  render() {
+    const renderSearchResult = () => {
-    return (
+      if (!showSearchResult()) {
-      <Cell class={bem()}>
+        return;
-        <Field
+      }
-          v-slots={{ icon: this.genFinish }}
+
-          autosize
+      const { searchResult } = props;
-          ref="field"
+      return searchResult.map((express) => (
-          rows={this.detailRows}
+        <Cell
-          clearable={!android}
+          v-slots={{
-          type="textarea"
+            title: () => renderSearchTitle(express),
-          label={t('label')}
+          }}
-          border={!this.shouldShowSearchResult}
+          clickable
-          maxlength={this.detailMaxlength}
+          key={express.name + express.address}
-          modelValue={this.value}
+          icon="location-o"
-          placeholder={t('placeholder')}
+          label={express.address}
-          errorMessage={this.errorMessage}
+          class={bem('search-item')}
-          onBlur={this.onBlur}
+          border={false}
-          onFocus={this.onFocus}
+          onClick={() => {
-          {...{
+            onSelect(express);
-            'onUpdate:modelValue': (val) => {
-              this.$emit('input', val);
-            },
           }}
         />
-        {this.genSearchResult()}
+      ));
-      </Cell>
+    };
+
+    const onFocus = (event) => {
+      emit('focus', event);
+    };
+
+    const onBlur = (event) => {
+      emit('blur', event);
+    };
+
+    const onInput = (value) => {
+      emit('input', value);
+    };
+
+    return () => (
+      <>
+        <Field
+          v-slots={{ icon: renderFinish }}
+          autosize
+          ref={field}
+          class={bem()}
+          rows={props.detailRows}
+          type="textarea"
+          label={t('label')}
+          border={!showSearchResult()}
+          clearable={!android}
+          maxlength={props.detailMaxlength}
+          modelValue={props.value}
+          placeholder={t('placeholder')}
+          errorMessage={props.errorMessage}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          {...{ 'onUpdate:modelValue': onInput }}
+        />
+        {renderSearchResult()}
+      </>
     );
   },
 });

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;
     }