推拿小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

105 lines
3.2 KiB

3 months ago
  1. ## 1.0.7(2023-09-15)
  2. 改为uni_modules规范
  3. ### cityPicker 省市区选择器(兼容vue3)
  4. **使用方法:**
  5. ```
  6. <template>
  7. <view>
  8. <button @tap="open">打开</button>
  9. <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
  10. <view>{{str}}</view>
  11. </view>
  12. </template>
  13. <script>
  14. import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
  15. export default {
  16. data() {
  17. return {
  18. visible: false,
  19. maskCloseAble: true,
  20. str: '',
  21. defaultValue: '420103',
  22. // defaultValue: ['河北省','唐山市','丰南区'],
  23. column: 3
  24. }
  25. },
  26. components: {
  27. cityPicker
  28. },
  29. methods: {
  30. open () {
  31. this.visible = true
  32. },
  33. confirm (val) {
  34. console.log(val)
  35. this.str = JSON.stringify(val)
  36. this.visible = false
  37. },
  38. cancel () {
  39. this.visible = false
  40. }
  41. },
  42. onShareAppMessage(res) {
  43. if (res.from === 'button') { // 来自页面内分享按钮
  44. console.log(res.target)
  45. }
  46. return {
  47. title: 'data-cityPicker省市区地址选择器!',
  48. path: '/pages/cityPicker/cityPicker'
  49. }
  50. },
  51. onShareTimeline(res) {
  52. if (res.from === 'button') { // 来自页面内分享按钮
  53. console.log(res.target)
  54. }
  55. return {
  56. title: 'data-cityPicker省市区地址选择器!'
  57. }
  58. }
  59. }
  60. </script>
  61. <style lang="scss">
  62. </style>
  63. ```
  64. ### 注:近期收到使用用户反馈,存在以下一个问题(如有好的建议,期待私信,谢谢)
  65. 1、之前只支持默认值传入地区编码,已更新可以支持传入中文省市区数组
  66. defaultValue可以传入defaultValue:['河北省','唐山市','丰南区']数组类型以及defaultValue: '420103'地区编码字符串类型
  67. 可以使用const reg =/([\u4e00-\u9fa5]+省|自治区|[\u4e00-\u9fa5]+市|[\u4e00-\u9fa5]+区)/g;将自己的省市区数据进行处理为数组再传入
  68. 2、有些用户反馈vue3下watch监听有问题
  69. 我自己创建一个vue项目,导入插件后,按照示例原封不动进行测试,没有发现问题; 发现有问题的朋友可以提供一下可以复现的demo给我,我这边看看具体什么情况
  70. 3、有些用户返回无法关闭弹框
  71. 不要把插件放到scroll-view里面,请务必放到最外层进行使用
  72. #### 事件说明
  73. | 事件名 | 返回值 | 描述 |
  74. | :---------: | :----: | :------------: |
  75. | @confirm | 对象(code,完整地区名称) | 点击确定的回调 |
  76. | @cancel | 无 | 点击取消的回调 |
  77. #### Prop
  78. | 参数名称 | 描述 |
  79. | -------- | ------------------------------ |
  80. | visible | 控制选择器显示和隐藏 |
  81. | column | 可选值2和3,2是省市两列选择;3是省市区三列选择 |
  82. | maskCloseAble | 点击模态框是否关闭弹框 |
  83. | defaultValue | 初始地区编码(例:420102或者['河北省','唐山市','丰南区']) |
  84. ### 数据来源:[点击查看省市区数据来源](https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/pca-code.json)
  85. ### 可接定制化组件开发
  86. ### 右侧有本人代表作小程序二维码,可以扫码体验
  87. ### 如使用过程中有问题或有一些好的建议,欢迎加QQ群互相学习交流:120594820