点我扫二维码，查看demo

# AddressPicker 全国城市级联弹窗

# 介绍

用于省市区街道选择

# 引入

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

1
2
3
4

# 代码演示

# 基础用法

isShow 是否展示弹窗
oncancel 关闭弹窗行为触发
getAdd 街道选中后触发，交付完整地址

<mx-address-picker
      :isShow="isShow"
      @oncancel="oncancel"
      @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5

export default {
  data() {
    return {
      isShow: false,
    }
  },
  methods: {
    oncancel() {
      this.isShow = false
    },
    getAdd(data) {
      console.warn('获得用户已选择的完整地址: ', data)
    },
  }
}

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

# 自定义弹窗高度

popupHeight 设置全国城市级联弹窗高度

<mx-address-picker
  :isShow="isShow"
  :popupHeight="popupHeight"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5
6

export default {
  data() {
    return {
      isShow: false,
      popupHeight: '70%', // 弹窗相对屏幕高度
    }
  },
}

1
2
3
4
5
6
7
8

# 自定义弹窗关闭按钮

isShowCloseBtn 是否设置关闭按钮
imgSrc 设置关闭按钮图片路径
imgSrcStyle 设置按钮图片样式

# 隐藏关闭按钮

<mx-address-picker
  :isShow="isShow"
  :isShowCloseBtn="isShowCloseBtn"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5
6

export default {
  data() {
    return {
      isShow: false,
      isShowCloseBtn: false,
    }
  },
}

1
2
3
4
5
6
7
8

# 自定义关闭按钮

<mx-address-picker
  :isShow="isShow"
  :imgSrc="imgSrc"
  :imgSrcStyle="imgSrcStyle"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5
6
7

export default {
  data() {
    return {
      imgSrc: 'xxxxxx',
      imgSrcStyle: {
        width: '30px',
        height: '30px',
        marginTop: '5px',
        marginRight: '15px',
      }, // 对应属性m-popup-header-close
    }
  },
}

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

# 自定义隐藏省份

<mx-address-picker
  :isShow="isShow"
  :noShowPro="noShowPro"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5
6

export default {
  data() {
    return {
      noShowPro: ['西藏自治区', '广西壮族自治区'],
    }
  },
}

1
2
3
4
5
6
7

# 自定义顶部标题文案及文案样式

popupHeaderText 设置标题文案
popupHeaderTextStyle 设置标题样式

<mx-address-picker
  :isShow="isShow"
  :popupHeaderText="popupHeaderText"，
  :popupHeaderTextStyle="popupHeaderTextStyle"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5
6
7

export default {
  data() {
    return {
      popupHeaderText: '请用户选择地区',
      popupHeaderTextStyle: {
        fontSize: '14px',
        color: '#660099',
      }, // 对应属性 m-popup-header-text
    }
  },
}

1
2
3
4
5
6
7
8
9
10
11

# 自定义tab栏及子栏样式

# 自定义tab栏样式

<mx-address-picker
  :isShow="isShow"
  :popupTabStyle="popupTabStyle"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5
6

export default {
  data() {
    return {
      popupTabStyle: {
        paddingLeft: '8px',
        fontSize: '14px',
      }, // 对应属性m-popup-tab
    }
  },
}

1
2
3
4
5
6
7
8
9
10

# 自定义tab栏子项样式

popupTabListStyle tab的子项样式
tabTextActive 设置选中地址后，tab栏子项字体颜色

<mx-address-picker
  :isShow="isShow"
  :popupTabListStyle="popupTabListStyle"
  :tabTextActive="tabTextActive"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5
6
7

export default {
  data() {
    return {
      isShow: false,
      popupTabListStyle: {
        color: '#0099ff',
        padding: '0 12px',
      }, // tab栏子项样式, 对应css属性 m-popup-tab-list
      tabTextActive: '#0000ff',
    }
  },
}

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

# 自定义tab栏文案

<mx-address-picker
  :isShow="isShow"
  :alternateAdd="alternateAdd"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5
6

export default {
  data() {
    return {
      alternateAdd: ['选择省份', '选择城市', '选择区县', '选择街道'],
    }
  },
}

1
2
3
4
5
6
7

# 自定义tab栏省市区街道外盒子样式

<mx-address-picker
  :wrapperStyle="wrapperStyle"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5

export default {
  data() {
    return {
      wrapperStyle: {
        backgroundImage:
          'url(' + require('../assets/image/board_one.png') + ')',
        backgroundSize: '100%',
      }, // 对应属性 m-popup-content-wrapper
    }
  },
}

1
2
3
4
5
6
7
8
9
10
11

# 自定义滑线样式

<mx-address-picker
  :lineStyle="lineStyle"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5

export default {
  data() {
    return {
      lineStyle: {
        width: '30px',
        backgroundColor: '#cc0000',
      }, // 对应属性 m-popup-line
    }
  },
}

1
2
3
4
5
6
7
8
9
10

# 自定义列表单个选项盒子

# 自定义选项盒子样式

<mx-address-picker
  :optionStyle="optionStyle"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5

export default {
  data() {
    return {
      optionStyle: {
        padding: '0 24px',
        paddingTop: '8px',
      }, // 对应属性 m-popup-content-options-item
    }
  },
}

1
2
3
4
5
6
7
8
9
10

# 自定义选项文案样式

<mx-address-picker
  :optionTextStyle="optionTextStyle"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5

export default {
  data() {
    return {
      optionTextStyle: {
        color: '#9999CC',
      },
    }
  },
}

1
2
3
4
5
6
7
8
9

# 自定义选中选项后，字体更换的颜色

<mx-address-picker
  :optionTextActive="optionTextActive"
  @oncancel="oncancel"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5

export default {
  data() {
    return {
      optionTextActive: '#FF0000',
    }
  },
}

1
2
3
4
5
6
7

# 自定义选中选项右侧图标展示状态及样式

# 隐藏右侧图标

<mx-address-picker
  :isShow="isShow"
  :showIcon="showIcon"
  @oncancel="oncancel)"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5
6

export default {
  data() {
    return {
      showIcon: false,
    }
  },
}

1
2
3
4
5
6
7

# 自定义右侧图标样式

<mx-address-picker
  :isShow="isShow"
  :rightIcon="rightIcon"
  @oncancel="oncancel)"
  @getAdd="getAdd"
></mx-address-picker>

1
2
3
4
5
6

export default {
  data() {
    return {
      rightIcon: {
        src: require('../assets/image/selected.png'),
        width: '20px',
        height: '20px',
      }
    }
  },
}

1
2
3
4
5
6
7
8
9
10
11

# API

# Props

参数名	说明	类型	必填	默认值
isShow	是否显示级联弹窗	`Boolean`	是	`false`
isShowCloseBtn	是否显示右上角按钮	`Boolean`	否	`true`
imgSrc	顶部右上角关闭按钮图片	`String`	否	默认本地图片
imgSrcStyle	顶部右上角关闭按钮样式，对应属性 `m-popup-header-close`	`Object`	否	`{}`
noShowPro	自定义不需要展示的省份	`Array`	否	`[]`
popupHeight	级联弹窗占据屏幕的高度大小	`String`	否	`'50%'`
popupHeaderStyle	顶部盒子(包括顶部左上角标题、右上角关闭按钮)样式，支持修改宽度(百分比，相对于整个弹窗)、高度(百分比)，对应属性`m-popup-header`	`Object`	否	`{}`
popupHeaderText	顶部左上角标题文案	`String`	否	`'请选择地区'`
popupHeaderTextStyle	顶部左上角标题文案样式，对应属性`m-popup-header-text`	`String`	否	`{}`
popupTabStyle	`tab`栏样式，对应属性`m-popup-tab`	`Object`	否	`{}`
popupTabListStyle	每一个`tab`样式，默认灰色字体，可修改字体或内间距，对应属性`m-popup-tab-list`	`Object`	否	`{ color: '#969799' }`
tabTextActive	选中选项后，`tab`栏变化的字体颜色，默认为黑色	`String`	否	`'#000000'`
lineStyle	tab下划线样式，对应属性`m-popup-line`	`Object`	否	`{}`
wrapperStyle	选项列表外盒子样式，支持修改背景或高度百分比，对应属性 `m-popup-content-wrapper`	`Object`	否	`{}`
contentStyle	选项列表内盒子样式，支持修改底部内间距，对应属性`m-popup-content`	`Object`	否	`{}`
optionStyle	每个选项盒子的样式，对应属性`m-popup-content-options-item`	`Object`	否	`{}`
optionTextStyle	选项文案的样式，默认为黑色字体	`Object`	否	`{ color: '#000000' }`
showIcon	选中选项时，是否展示最右侧图标	`Boolean`	否	`true`
rightIcon	选项最右侧图标样式，需配合`showIcon`使用，仅支持三个属性，分别是图片地址、宽度和高度	`Object`	否	`{ src: 'xxx.png', width: '15px', height: '15px'}`
optionTextActive	选中选项后，选项变化的字体颜色，默认为紫色	`String`	否	`'#5B00A0'`
alternateAdd	配置`tab`栏初始数据	`Array`	否	`['选择省', '选择市', '选择区/县', '选择街道']`

# Events

事件名	说明	回调参数
getAdd	交付用户已选中的完整地址。触发条件：街道选择后触发	`Array`类型，例如：`['河南省', '安阳市', '北关区', '豆腐营街道']`
oncancel	触发条件有以下：（1）点击右上角关闭按钮时触发；（2）点击蒙层时触发；（3）街道选择完成时触发	无

← addressInput 地址编辑 imageResizer 裁剪图片 →