Press Plus

# ActInputAddressDialog 填写地址弹窗

# 引入

import PressActInputAddressDialog from 'press-plus/press-act-input-address-dialog/press-act-input-address-dialog';

export default {
  components: {
    PressActInputAddressDialog,
  }
}

# 代码演示

# 基础用法

<PressActInputAddressDialog
  :show.sync="show"
  :props-data.sync="propsData"
  :area-list="AREA_LIST"
  @clickButton="clickButton"
/>

const PROPS_DATA = {
  name: '名字',
  mobile: '123456789',
  zipcode: '888888',
  district: '地区1',
  detail_addr: '详细地址:',
  province: '',
  city: '',
};

const AREA_LIST = {
  province_list: {
    110000: '北京市',
    120000: '天津市',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    120101: '和平区',
    120102: '河东区',
  },
};


export default {
  data() {
    return {
      show: true,
      propsData: PROPS_DATA,
      AREA_LIST,
    };
  },
  methods: {
    clickButton() {
      this.show = false;
    },
  },
}

# API

# Props

参数 说明 类型 默认值
show 是否显示 boolean false
cancel-text 取消按钮文字 string 取消
confirm-text 确认按钮文字 string 确定
area-list 省市区数据，格式见 area 组件 object {}
props-data 弹窗数据，包含地址信息 object {}
game-name 游戏名称，用于提示信息 string -
type 类型，可选值为 e-sport string -
use-tip-class 是否使用 tip-comp 为前缀的类名 boolean false
hide-tip-style 是否隐藏 @TIP_STYLE_NAME 关键词编译时加的样式 boolean false
has-zip-code 是否显示邮编输入框 boolean true
has-area 是否显示地区选择 boolean true
show-mail 是否显示邮箱输入框 boolean false
show-idd-code 是否显示国际区号选择 boolean false
show-protocol 是否显示隐私协议勾选 boolean false
columns-idd-code 国际区号选项数据 array []

# Events

事件名 说明 回调参数
clickButton 点击确认按钮 -
clickCloseButton 点击取消按钮 -
clickProtocol 点击隐私协议链接 -
update:show 更新显示状态 show
update:propsData 更新地址数据 data

# Inject

参数 说明 类型 默认值
globalHideTipStyle 是否隐藏关键词编译的样式，对应 hide-tip-style 属性 boolean false

# 类型说明

type IPropsData = {
  name: string; // 姓名
  mobile: string; // 手机号
  zipcode: string; // 邮编
  mail?: string; // 邮箱（可选）
  iddCode?: string; // 国际区号（可选）
  
  province: string; // 省份
  city: string; // 城市
  district: string; // 区县
  detail_addr: string; // 详细地址
  
  isCheckProtocol?: boolean; // 是否勾选隐私协议（可选）
}

# 自定义样式

外链地址：
样式内容：

← ActInputPhoneDialog →