tf-vue-addr

安装和使用

npm i tf-vue-addr

使用

import TfAddr from 'tf-vue-addr'
import 'tf-vue-addr/dist/tf-vue-addr.css'

<TfAddr 
  placeholder="请输入..." 
  :isNotSelectEmpty="true"  // 如果不是选中, 而是自己胡乱填写的, 失焦的时候是否为空
  ref="addr" 
  v-model="value" //值, 支持数组和字符串格式

  :wrapStyle="{width: '251px'}" // 自定义外层的style
  fieldName="val" // v-model要取值的字段名称, 默认为val, 还可以设置为label
  wrapClassName="aaaa" // 自定义外层的class
  @change="handleChange" // change改变时的回调 (vals, items, item) => {}
  :params="{a: 'aa'}" // 需要传入给后端的参数, 注意需要传入doggy相关参数
  sep='-'  // 分隔符
  :autoFocus="false" // 初始时是否自动获焦
  prefix='//partyopenapitest.tf56.com' // 请求前缀
  keywordsUrl="" // 搜索请求的地址, 如果不带前缀会通过prefix补全
  :urls="[xxx, xxx]" // 省市区街道请求地址, 如果不带前缀会通过prefix补全
  dropdownWidth="0px" // 下拉列表的宽度, 一般不需要设置, 会自己计算
  :isShowDropdownTitle="false" // 鼠标放到下拉列表上去是否显示title
  :delay="300" // 函数节流
  :isShowTag="true" // 是否显示tag那部分内容
  mode="" // 模式, 目前只支持传入search
/>

// 方法, 设置值
this.$refs.addr.setDetail(val)
// 方法, 获取值
this.$refs.addr.getDetail(isOnlyLabel)
// 方法, 获焦
this.$refs.addr.focus() 
// 方法, 失焦
this.$refs.addr.blur() 

命令

yarn install
yarn run start
yarn run bundle

版本更新

1.0.0, 1.0.1:
  保持和tf-react-addr 2.x.x的同步
  与0.x.x版本相比, handleChange的第2,3个参数做了调换