表单 - x-address - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

import { XAddress } from 'vux'
export default {
  components: {
    XAddress
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { XAddress } from 'vux'
Vue.component('x-address', XAddress)

  <group>
    <x-address title="title" v-model="value"></x-address>
  </group>

import { XAddress } from 'vux'
// 如果你需要引入数据，如果你的版本低于 v2.2.0，请使用 ChinaAddressData
import { XAddress, ChinaAddressV4Data } from 'vux'
// 如果需要引入旧版数据
import { XAddress, ChinaAddressV2Data } from 'vux'

如果你需要单独引入地址数据，可以在源码src/datas找到。

设计上 x-address 只能在 Group 中使用。但是你依然可以不在 Group 中使用，使用 display:none 隐藏然后用 :show.sync 来控制组件显示状态。

<x-address style="display:none;" title="title" v-model="value" :list="addressData" placeholder="请选择地址" :show.sync="showAddress"></x-address>

v4 和 v3 的区别是在 v4 里重庆多了县列表。从 2.1.1-rc.12 开始，直辖区做了简化，原来是北京市-北京市市辖区-东城区，现在是北京市-市辖区-东城区。组件内部做了兼容，你以raw-value方式传入两种写法表现和旧版本一致，不会出错。从 2.1.1-rc.15 开始，数据必须指定版本，原来的 ChinaAddressData 废弃并停留在 v2 版本不再更新。不同版本数据差异可以从这里找到。

API

属性

名字	类型	默认值	说明	版本要求
raw-value	boolean	false	指定初始化时绑定的数据是否为文本(即省市名，而不是id)类型，即对于非id值组件内部会转换为id。如果是异步设置value，只能使用id赋值。	—
title	string		表单标题	—
value	array		表单值, 使用`v-model`绑定	—
list	array		地址列表, 可以引入内置地址数据或者用自己的数据，但是需要按照一致的数据结构。	—
inline-desc	string		标题下的描述	—
placeholder	string		没有值时的提示文字	—
hide-district	boolean	false	是否隐藏区，即只显示省份和城市	—
value-text-align	string	right	value 对齐方式(text-align), `v2.1.0-rc.49`开始支持	—
popup-style	object		弹窗样式，可以用于强制指定 z-index	v2.5.2
show	boolean		显示 (支持.sync修饰 next)	v2.5.8
disabled	boolean		是否禁用选择	v2.9.0

事件

名字	参数	说明	版本要求
@on-hide	—	关闭后触发，当非确定时，参数为false，反之为true	—
@on-show	—	显示时触发	—
@on-shadow-change	`(Array ids, Array names)`	picker 值变化时触发，即滑动 picker 时触发	v2.5.6

插槽

名字	说明	版本要求
title	title 插槽，可以使用它来添加 icon 等自定义样式，受控于 group 需要从 scope 里继承 class 和样式	v2.3.8

Issues

发布日志

v2.9.0 [feature] 添加属性 disabled 支持禁用 #2641
v2.8.0 [change] 去除空的根节点 #2371
v2.7.0 [fix] 兼容 vue@2.5.0 scope 更名为 slot-scope 的问题 #2076
v2.7.0 [feature] 增加属性 popup-title(使用 popup-header 组件) #1866
v2.6.2 [fix] 更新地址数据 #2000
v2.5.9 [feature] prop:show 支持.sync修饰
v2.5.8 [feature] 新增 prop:show 控制是否显示
v2.5.6 [feature] 支持在滑动 picker 时触发事件 on-shadow-change #1778
v2.5.2 [feature] 支持弹窗样式设置 prop:popup-style #1656
v2.3.8 [feature] 添加 slot:title，方便自定义样式 #1389
v2.2.2 [feature] 支持使用地址文字直接赋值(测试)
v2.2.1-rc.6 [feature] 支持属性 display-format
v2.2.1-rc.3 [feature] 支持设置取消和确定文字. #1233
v2.2.0 [enhance] 更新地区数据 #1101
v2.1.1-rc.12 [enhance] 简化市辖区数据
v2.1.1-rc.7 [enhance] 支持 PC 上鼠标选择 #1039 @michael829
v2.1.0-rc.49 [feature] 支持value-text-align #921 @linhaobin
v2.1.0-rc.49 [fix] 修复label样式不受控于group属性的bug

x-address

XAddress

安装

属性

事件

插槽

相关 issue

贡献者

发布日志