Press Plus

# ActInputAddressDialog

A dialog component for collecting shipping address information.

# Import

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

export default {
  components: {
    PressActInputAddressDialog,
  }
}

# Usage

# Basic Usage

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

const PROPS_DATA = {
  name: 'Name',
  mobile: '123456789',
  zipcode: '888888',
  district: 'District',
  detail_addr: 'Detail Address',
  province: '',
  city: '',
};

const AREA_LIST = {
  province_list: {
    110000: 'Beijing',
    120000: 'Tianjin',
  },
  city_list: {
    110100: 'Beijing City',
    120100: 'Tianjin City',
  },
  county_list: {
    110101: 'Dongcheng District',
    110102: 'Xicheng District',
    120101: 'Heping District',
    120102: 'Hedong District',
  },
};

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

# API

# Props

Property Description Type Default
show Whether to show the dialog boolean false
cancel-text Cancel button text string 取消
confirm-text Confirm button text string 确定
area-list Province/city/district data, format same as area component object {}
props-data Dialog data containing address information object {}
game-name Game name, used in tip message string -
type Type, optional value: e-sport string -
use-tip-class Whether to use class name with tip-comp prefix boolean false
hide-tip-style Whether to hide styles compiled by @TIP_STYLE_NAME boolean false
has-zip-code Whether to show zipcode input boolean true
has-area Whether to show area selection boolean true
show-mail Whether to show email input boolean false
show-idd-code Whether to show international dialing code selection boolean false
show-protocol Whether to show privacy protocol checkbox boolean false
columns-idd-code International dialing code options data array []

# Events

Event Name Description Callback Parameters
clickButton Triggered when confirm button is clicked -
clickCloseButton Triggered when cancel button is clicked -
clickProtocol Triggered when protocol link is clicked -
update:show Update show status show
update:propsData Update address data data

# Inject

Property Description Type Default
globalHideTipStyle Whether to hide keyword compiled styles, corresponding to hide-tip-style prop boolean false

# Type Definitions

type IPropsData = {
  name: string; // Name
  mobile: string; // Mobile phone number
  zipcode: string; // Zipcode
  mail?: string; // Email (optional)
  iddCode?: string; // International dialing code (optional)
  
  province: string; // Province
  city: string; // City
  district: string; // District
  detail_addr: string; // Detail address
  
  isCheckProtocol?: boolean; // Whether protocol is checked (optional)
}

# Custom Styles

外链地址：
样式内容：

← ActInputPhoneDialog →