feat: migrate AddressEdit component

components.js

@@ -80,4 +80,5 @@ module.exports = [
   'goods-action',
   'goods-action-icon',
   'goods-action-button',
+  'address-edit',
 ];

src/address-edit/Detail.js

@@ -20,6 +20,8 @@ export default createComponent({
     showSearchResult: Boolean,
   },
 
+  emits: ['blur', 'focus', 'input', 'select-search'],
+
   computed: {
     shouldShowSearchResult() {
       return this.focused && this.searchResult && this.showSearchResult;
@@ -39,6 +41,14 @@ export default createComponent({
       this.$refs.field.blur();
     },
 
+    onFocus(event) {
+      this.$emit('focus', event);
+    },
+
+    onBlur(event) {
+      this.$emit('blur', event);
+    },
+
     genFinish() {
       const show = this.value && this.focused && android;
       if (show) {
@@ -55,16 +65,7 @@ export default createComponent({
       if (shouldShowSearchResult) {
         return searchResult.map((express) => (
           <Cell
-            key={express.name + express.address}
-            clickable
-            border={false}
-            icon="location-o"
-            label={express.address}
-            class={bem('search-item')}
-            onClick={() => {
-              this.onSelect(express);
-            }}
-            scopedSlots={{
+            v-slots={{
               title: () => {
                 if (express.name) {
                   const text = express.name.replace(
@@ -76,6 +77,15 @@ export default createComponent({
                 }
               },
             }}
+            key={express.name + express.address}
+            clickable
+            border={false}
+            icon="location-o"
+            label={express.address}
+            class={bem('search-item')}
+            onClick={() => {
+              this.onSelect(express);
+            }}
           />
         ));
       }
@@ -86,19 +96,25 @@ export default createComponent({
     return (
       <Cell class={bem()}>
         <Field
+          v-slots={{ icon: this.genFinish }}
           autosize
           ref="field"
           rows={this.detailRows}
           clearable={!android}
           type="textarea"
-          value={this.value}
-          errorMessage={this.errorMessage}
-          border={!this.shouldShowSearchResult}
           label={t('label')}
+          border={!this.shouldShowSearchResult}
           maxlength={this.detailMaxlength}
+          modelValue={this.value}
           placeholder={t('placeholder')}
-          scopedSlots={{ icon: this.genFinish }}
-          {...{ on: this.$listeners }}
+          errorMessage={this.errorMessage}
+          onBlur={this.onBlur}
+          onFocus={this.onFocus}
+          {...{
+            'onUpdate:modelValue': (val) => {
+              this.$emit('input', val);
+            },
+          }}
         />
         {this.genSearchResult()}
       </Cell>

src/address-edit/index.js

@@ -282,11 +282,11 @@ export default createComponent({
 
         return (
           <Cell
+            v-slots={slots}
             vShow={!this.hideBottomFields}
             center
             title={t('defaultAddress')}
             class={bem('default')}
-            scopedSlots={slots}
           />
         );
       }
@@ -328,7 +328,7 @@ export default createComponent({
             placeholder={this.areaPlaceholder || t('areaPlaceholder')}
             errorMessage={errorInfo.areaCode}
             rightIcon={!disableArea ? 'arrow' : null}
-            value={this.areaText}
+            modelValue={this.areaText}
             onFocus={onFocus('areaCode')}
             onClick={() => {
               this.$emit('click-area');
@@ -337,15 +337,15 @@ export default createComponent({
           />
           <Detail
             vShow={this.showDetail}
-            focused={this.detailFocused}
             value={data.addressDetail}
+            focused={this.detailFocused}
             errorMessage={errorInfo.addressDetail}
             detailRows={this.detailRows}
             detailMaxlength={this.detailMaxlength}
             searchResult={this.searchResult}
             showSearchResult={this.showSearchResult}
-            onFocus={onFocus('addressDetail')}
             onBlur={this.onDetailBlur}
+            onFocus={onFocus('addressDetail')}
             onInput={this.onChangeDetail}
             onSelect-search={(event) => {
               this.$emit('select-search', event);
@@ -363,7 +363,7 @@ export default createComponent({
               onFocus={onFocus('postalCode')}
             />
           )}
-          {this.slots()}
+          {this.$slots.default?.()}
         </div>
         {this.genSetDefaultCell(h)}
         <div vShow={!hideBottomFields} class={bem('buttons')}>
@@ -386,11 +386,16 @@ export default createComponent({
           )}
         </div>
         <Popup
-          vModel={this.showAreaPopup}
+          show={this.showAreaPopup}
           round
           position="bottom"
           lazyRender={false}
           getContainer="body"
+          {...{
+            'onUpdate:modelValue': (value) => {
+              this.showAreaPopup = value;
+            },
+          }}
         >
           <Area
             ref="area"

vant.config.js

@@ -323,10 +323,10 @@ module.exports = {
           {
             title: '业务组件',
             items: [
-              // {
-              //   path: 'address-edit',
-              //   title: 'AddressEdit 地址编辑',
-              // },
+              {
+                path: 'address-edit',
+                title: 'AddressEdit 地址编辑',
+              },
               {
                 path: 'address-list',
                 title: 'AddressList 地址列表',
@@ -657,10 +657,10 @@ module.exports = {
           {
             title: 'Business Components',
             items: [
-              // {
-              //   path: 'address-edit',
-              //   title: 'AddressEdit',
-              // },
+              {
+                path: 'address-edit',
+                title: 'AddressEdit',
+              },
               {
                 path: 'address-list',
                 title: 'AddressList',