地址组件

本组件基于yarn构建, 包含了react和vue 2个技术版本, 但是React请使用该组件, Vue使用: tf-vue-addr(进行了2次封装)

安装

npm i tf-react-addr

React版引入

import TfReactAddr from 'tf-react-addr'
import 'tf-react-addr/dist/index.css'

使用

let params = {
  dog_ak: '2021596y0Tb790O0',
  dog_sk: 'K77MFVhwk348J4h72nHi',
  sourcecode: '01020307',
}
let val = [
  {val: "120000", label: "天津市"}, 
  {val: "120100", label: "市辖区"},
  {val: "120102", label: "河东区"},
  {val: "120102003000", label: "中山门街道"}
]

function handleSelect(v, values) {
  console.log(v) // 一般只会使用到val和label字段, 其他字段都是后端返回的
  console.log(values) // 当前选中的所有层级信息
}

function handleChange(v, values, tag) {
   console.log(values) // 当前的所有层级信息
}

<TfReactAddr 
  placeholder="请输入..."  
  wrapStyle={{width: '251px'}} // 自定义外层的style
  wrapClassName="aaaa" // 自定义外层的class
  onSelect={handleSelect} // select下拉选中时的回调 (values, v) => {}
  onChange={handleChange} // 值改变的回调 (values, v) => {}
  onBlur={handleBlur} // 失去焦点的回调 (values, v) => {}
  params={params} // 需要传入给后端的参数
  sep='-'  // 分隔符
  ref={(addr) => {this.addr = addr}} 
  isNotSelectEmpty={false} // 如果不是选中, 而是自己胡乱填写的, 失焦的时候是否为空
  value={val} // 值, 支持数组和字符串格式
  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.addr.setDetail(val)
// 方法, 获取值
this.addr.getDetail(isOnlyLabel)
// 方法, 获焦
this.addr.focus() 
// 方法, 失焦
this.addr.blur() 

转化为vue

1. 使用工具: react-to-vue
  https://github.com/vicwang163/react-to-vue

2. 写react组件时, 有几点需要注意:
  a. 必须在constructor里面 this.state = { xxx }
  b. react组件必须要有propTypes验证

3. 转换为vue后还要手动去撸一遍代码, 主要有:
  a. props类型和默认值
  b. this.onSelect需要改为this.$emit('select')方式
  c. this.onChange需要改为this.$emit('change')方式
  d. this.onBlur需要改为this.$emit('blur')方式

4. 转化命令: npm run rtv

5. 引入vue组件: 
  import TfAddr from 'tf-react-addr/dist/index.vue.min.js'
  import 'tf-react-addr/dist/index.vue.min.css'

6. 使用
  <TfAddr 
    placeholder="请输入..." 
    :params="params" 
    @change="handleChange" 
    :autoFocus="true" 
    :isNotSelectEmpty="true"
    ref="addr"
    :value="val"
    ... // 和react参数基本一致
  />

  this.$refs.addr.setDetail('杭州市')
  this.$refs.addr.getDetail()

Vue版2次封装

因为vue版本是用工具转换过来的, 不好改动里面的逻辑, 所以做了2次封装, 请查看组件: tf-vue-addr

命令

react转vue: npm run rtv

react组件构建: npm run react-build
vue组件构建: npm run vue-build
统一构建命令: npm run build

测试react组件: npm run react-start
测试vue组件: npm run vue-start

更新日志

1.0.1: 
  变更写法, 生命周期getDerivedStateFromProps改为componentWillMount, 尝试把react组件转换为vue组件

1.0.2: 
  未压缩版本方便调试, webpack配置更新

1.0.3: 
  添加转化为vue组件

1.0.4:
  bug修复

1.0.6
 添加vue版本支持

1.0.8
 更改defaultValue为vale

1.0.9
  更新readme, 更新vue组件

1.1.0
  更新readme

1.1.1
  添加isShowTag和mode参数支持

1.1.2
  解决contains报错问题, 组件卸载时移除body click事件

1.1.3, 1.1.4
  更新文档, 添加Vue版2次封装细节

1.1.5
  更新文档, 分离vue版本

2.0.0
  添加onBlur回调, 与1.x.x版本相比, 2.0.0版本开始, onSelect, onChange, onBlur回调的第1和2个参数, 顺序做了交换

3.0.0
  加签