点我扫二维码，查看demo

# AddressInput 地址编辑

# 介绍

填写实物奖品收货地址

# 引入

import Vue from 'Vue'
import { mxAddressPicker, mxAddressInput } from 'mui-event'
import 'mui-event/lib/index/index.css'
Vue.use(mxAddressPicker)
Vue.use(mxAddressInput)

1
2
3
4
5

# 代码演示

# 基础用法

<mx-address-input
  :secondary-confirmation="true"
  @confirm="inputFinish"
></mx-address-input>

1
2
3
4

export default {
  methods: {
    inputFinish(data) {
      console.log('返回列表信息: ', data)
    },
  }
}

1
2
3
4
5
6
7

# 表单项自定义宽度和文本对齐方式

labelWidth 设置表单项宽度
labelAlign 设置表单项文本对齐方式

<mx-address-input
  :labelWidth="'5em'"
  :labelAlign="'center'"
  :secondary-confirmation="true"
  @confirm="inputFinish"
></mx-address-input>

1
2
3
4
5
6

# 输入框自定义文本对齐方式

inputAlign 设置输入框文本对齐方式

<mx-address-input
  :inputAlign="'center'"
  :secondary-confirmation="true"
  @confirm="inputFinish"
></mx-address-input>

1
2
3
4
5

# 提交按钮自定义宽度、背景颜色和文案

submitWidth 设置提交按钮的宽度
submitColor 设置提交按钮的背景颜色
submitText 设置提交按钮的文案

<mx-address-input
  :submitWidth="'20em'"
  :submitColor="'#00CBB8'"
  :submitText="'确认'"
  :secondary-confirmation="true"
  @confirm="inputFinish"
></mx-address-input>

1
2
3
4
5
6
7

# 二次确认弹窗

secondary-confirmation 点击提交按钮后，是否展示二次确认弹窗

<mx-address-input
  :secondary-confirmation="isShow"
  @confirm="inputFinish"
></mx-address-input>

1
2
3
4

export default {
  data() {
    return {
      isShow: true, // true: 展示 | false: 取消
    }
  },
  methods: {
    inputFinish(data) {
      console.log('返回列表信息: ', data)
    },
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

# 可增加列表信息

extraneousInformation 设置新增选项，详细结构可参考extraneous-information 数据结构

<mx-address-input
  :extraneousInformation="extraneousInformation"
  :secondary-confirmation="false"
  @confirm="inputFinish"
></mx-address-input>

1
2
3
4
5

export default {
  data() {
    return {
      extraneousInformation: [
        {
          key: 'postalCode',
          label: '邮政编码',
          maxlength: 6,
          placeholder: '输入邮政编码',
        },
        {
          key: 'prizeName',
          label: '奖品名称',
          maxlength: 15,
          placeholder: '输入奖品名称',
        },
      ]
    }
  },
  methods: {
    inputFinish(data) {
      console.log('返回列表信息: ', data)
    },
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 事件回调参数

export default {
  methods: {
    inputFinish(data) {
      console.log('返回列表信息: ', data)
    },
  }
}

1
2
3
4
5
6
7

data参数返回

{
  area: '长兴县',
  city: '湖州市',
  detail: '美的总部b座',
  name: '111',
  phone: '15019872020',
  province: '浙江省',
  region: '浙江省长兴县槐坎乡',
  street: '槐坎乡',
}

1
2
3
4
5
6
7
8
9
10

# API

# Props

参数名	说明	类型	默认值	必填
label-width	表单项 label 宽度	number	6.2em	否
label-align	表单项 label 对齐方式，可选值为 left center right	string	left	否
input-align	输入框对齐方式，可选值为 left center right	string	left	否
submit-width	提交按钮宽度	number	25em	否
submit-text	提交按钮文案	string	提交	否
submit-color	提交按钮颜色	string	-	否
secondary-confirmation	二次确认弹窗	boolean	false	否
extraneous-information	额外信息条目列表	object[]	-	否

# extraneous-information 数据结构

参数名	说明	类型	默认值	必填
key	表单提交时所属 key	string	-	是
label	表单 label	string	[key]	否
placeholder	表单 placeholder	string	-	否
maxlength	表单最大长度	number	20	否

# Events

事件名	说明	回调参数
confirm	secondary-confirmation 为 false 时，点击提交按钮触发； secondary-confirmation 为 true 时，点击二次确认弹窗的确认按钮触发	object

← 快速上手 addressPicker 全国城市级联弹窗 →