Location

​

1. Location Component

​

1.1 What Is the Location Component

​

1.2 Use Cases

• The Location component supports positioning on mobile devices, letting you quickly fill in address information while still allowing further edits.
• If the address you want to select is your current location, tap the positioning icon on the mobile device (with location permission enabled). The address is filled in automatically and remains editable.
• Commonly used for address selection scenarios such as shipping addresses and administrative region addresses.
• The component comes preloaded with the latest Province / City / District (County) / Street (Township) data of China. Simply add the Location component to start using it.

​

2. Attributes

​

2.1 Placeholder Tips

• Similar to the gray placeholder text in a standard input box, used to provide guidance.
• If no default address is set, the placeholder tips are displayed. Otherwise, the default address content takes priority.

​

2.2 Type

• Sets the level of address detail.
• If Detailed address is selected, the component displays two rows.
• If Detailed address is not selected, only one row is displayed, as shown below:

​

2.3 Sub-Title and Prompt Content of the Component

​

2.4 Allow Clear

​

2.5 Default Address for the Component

• Initialize a default address on the right side of the designer.
• The level of detail of the default value is automatically linked to the option selected in Type.

​

2.6 Quick Positioning

• Mobile devices support positioning to quickly fill in address information.

​

2.6.1 Use Cases

• When the address you want to select is your current location.
• Tap the positioning icon on the mobile device (with location permission enabled). The address is filled in automatically and remains editable.

​

3. Premium

​

3.1 Action Settings

​

4. FAQ

// Reference code (bound to the Location component)
export function onChange({ value }, extra) {
  if (value.regionText) {
    let allAddress = '';
    value.regionText.map(el => {
      allAddress += el.zh_CN
    })
    allAddress += value.address
    this.$('textField_kr49k4ug').setValue(allAddress)
  }
}