关于javascript:vue中使用Vant的组件area

37次阅读

共计 1200 个字符，预计需要花费 3 分钟才能阅读完成。

1、下载官网 area 数据的文档，
area.js
area.ts
如果 area.js 不存在，则下载 area.ts，再转成 js 文件
把.ts文件名改成 .js，再把export const areaList = {} 改成export default {}

2、再用到 area 组件的 vue 组件中引入
import areaList from '../../assets/js/area.js'

3、根本应用

<van-area title="题目 11" :area-list="areaList" confirm-button-text="的确按钮" cancel-button-text="勾销按钮" columns-num="3" @cancel="onAreaCancle" @change="onAreaChange" @confirm="onAreaConfirm"/>

局部 props 阐明，具体的看官网：
title：顶部栏题目
area-list：省市区数据，格局见 area.js 文件
confirm-button-text：确认按钮文字，默认“确定”
cancel-button-text：勾销按钮文字，默认“勾销”
columns-num：显示列数，3- 省市区，2- 省市，1- 省，默认 3

Events 阐明
confirm：点击右上方实现按钮，一个数组参数，具体格局看 area.js 数据格式
cancel：点击勾销按钮时
change：选项扭转时触发，Picker 实例，所有列选中值，当前列对应的索引

注：如不须要海内数据，能够删除 area.js 中的 province_list 的900000: '海内'

4、弹窗中应用

<van-field type="text" readonly required placeholder="请抉择地区" clickable label="地址"  :value="areaValue"  @click="openPopup" />
<van-popup v-model="showArea" position="bottom" :style="{height:'50%'}">
    <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="onAreaCancle" />
</van-popup>

onAreaConfirm(val) {
    this.showArea = false
    var addrInfo = val[0].name + '-' + val[1].name + '-' + val[2].name
    this.areaValue = addrInfo
}

组件 field 的局部 Props 阐明
type：输入框类型, 可选值为 tel digit`number textarea password 等，默认text`
readonly：是否只读
required：是否显示表单必填星号
clickable：是否开启点击反馈
label：输入框左侧文本

正文完