用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 查看内容

mpvue-手动封装小程序省市区选择器

Rolan 2020-7-10 00:33

之前在mpvue小程序的项目中有遇到手动封装一个省市区选择器组件的需求,但当时因为时间比较紧,做得不是很好,一直挺遗憾。最近抽了一些时间终于重新把这个组件重新封装了一遍。这篇博客主要介绍一下怎么用、默认选 ...

之前在 mpvue 小程序的项目中有遇到手动封装一个省市区选择器组件的需求,但当时因为时间比较紧,做得不是很好,一直挺遗憾。最近抽了一些时间终于重新把这个组件重新封装了一遍。这篇博客主要介绍一下 怎么用 、 默认选中功能 和 一些实现的原理 。

先展示一下做好的效果:

项目地址

项目地址

如何使用

  • 这个选择器组件就是一个.vue文件,所有的样式和逻辑都在里面。所以只需要在需要使用它的父组件中引入 src/components/regionSelector.vue 文件。

  • 那么选择器中全国这么多省市区的信息来自于哪里呢?

    所以我们还需要在 regionSelector.vue 中引入 mapInfo 目录下的 mapInfo.js 文件,它保存并输出了全国所有省市区的信息。

    我已经在 regionSelector.vue 中引入了它。如果需要变更它们的相对路径,可以自行修改。

//regionSelector.vue
  import mapInfo from "../../mapInfo/mapInfo";
复制代码
  • 现在需要准备的文件都已经OK。接下来是 如何控制选择器的弹出和移出 。

    引入选择器后,先为它传入一个名叫 isShow 的Boolean类型的prop,建议与某一个Boolean类型的数据属性绑定,初始值设为false。方便控制。

    如果想让选择器弹出,将绑定的数据属性的值设为 true 即可。

    如果想让选择器移出,比如点击了确定按钮、取消按钮、蒙层时,选择器组件会触发 hideSelector 事件,我们在父组件中监听它,并在它的事件处理函数中将绑定的数据属性的值设为 false 即可。

    示例代码:

<template>
  <div>
    <button @click="showSelector">选择省市区</button>
    <region-selector :isShow="selectorShow"  @hideSelector="hideSelector"></region-selector>
  </div>
</template>

<script>
import regionSelector from '@/components/regionSelector';
export default {
  components: { regionSelector },
  data() {
    return { selectorShow: false }
  },
  methods: {
    showSelector() {  //点击button时,控制选择器弹出
      this.selectorShow = true;
    },
    hideSelector(info) {  //触发hideSelector事件时,控制选择器移出
      console.log(info);
      this.selectorShow = false;
    }
  }
}
</script>
复制代码
  • 另外,你可能会发现 hideSelector 的事件处理函数中有一个参数 info 。当你点击了 确定 按钮时,不光选择器会被移出, info 也会被传入,它是一个对象数组,有三个对象,依次表示点击 确定 按钮时被选中的省、市、区的信息。

    比如开头的动图中我选中了河南省 / 开封市 / 禹王台区,那么 info 的值为:

[
   { id: '410000', name: '河南省', index: 15 },
   { id: '410200', name: '开封市', index: 1 },
   { id: '410205', name: '禹王台区', index: 3 }
 ]
 //index是指当前选中项是它所在列的第几项,比如河南省index为15,即它在省一列的第16项
复制代码

当然如果你点击的是其他地方, info 的值为 null 。

附加功能:默认选中

在使用省市区选择器时,为了让用户的使用体验更好,常常需要在用户打开选择器时,就默认为用户选中现有地址的省、市、区。比如开头的动图中,默认选中 山东省 / 济南市 / 历下区。

组件实现了打开时默认选中省市区的功能,使用也很简单。只需要将想要默认选中的省、市、区的名字传入 province 、 city 、 district 这个三个prop即可。

示例代码:

<region-selector 
      :isShow="selectorShow" 
      province="山东省" city="济南市" district="历下区"
      @hideSelector="hideSelector"></region-selector>
<!--直接传入字符串或绑定到数据属性都可以-->      
复制代码

部分实现原理

  • 封装选择器使用的微信原生组件
    封装组件使用微信原生组件是 <picker-view> 和 <picker-view-column> 。
    微信原生的还有一个 <picker mode="selector"> 单列选择器组件,用它来封装省市区选择器可能会更方便一些,很多工作微信已经做好了,但个人感觉用它虽然方便,但可操作的空间太小了,失去了很多快乐。
  • 省市区信息的存储
    所有的行政区信息在第一次使用组件的时候,就被存储到缓存中。在 beforeCreated 生命周期中触发。
beforeCreate() {
    if (!wx.getStorageSync('mapInfo')) {
      wx.setStorageSync("mapInfo", mapInfo);
    }
  }
复制代码
  • 弹出和移出选择器

    之所以之前要将 isShow 这个prop与一个Boolean类型的数据属性绑定,实际上是因为选择器内部用 watch 监听了 isShow 。当 isShow 的值变为 true ,就会调用让选择器从底部弹出的方法;当 isShow 的值变为 false ,就会调用让选择器移出的方法。

watch: {
    isShow(val) {
      if (val) {
        this.showSelector();
      } else {
        this.hideSelector();
      }
    }
  }
复制代码
  • 样式自定义

    由于使用的 <picker-view> 和 <picker-view-column> 组件可操作性很高,所以选择器的很多样式都可以自定义,比如确定、取消按钮的颜色、选择器的背景、蒙层的透明度等等,都可以更改。直接在 regionSelector.vue 中的样式部分修改即可。

如果感到这篇博客对你有帮助,麻烦点个赞~

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 我人很好 来自: 掘金