<div style="font-size:16px;">
<p>最近的项目中需要用到，所以自己手写了一个，拿出来分享。</p>
<p>首先，我们最后实现的是一个支持一级、二级、三级乃至多级联动的可复用组件，照例先看一下效果图，第一张是二级联动，第二张是三级联动。是我们实现的最终效果。</p>
<p align="center"><img alt="" src=""></p>
<p>移动端二级联动.gif</p>
<p align="center"><img alt="" src=""></p>
<p>移动端三级联动.gif</p>
<p>本文用到的知识点</p>
<p>Vue的组件通信</p>
<p>Vue的插槽</p>
<p>对Vue的API有一定的了解</p>
<p>Vue的nextTick方法</p>
<p>对原生JS的拖拽有一定的功底</p>
<p>功能分析</p>
<p>暴露在最外层的，是显示在外部的被选择的文字，当点击的时候弹出选择器</p>
<p>内部的级联选择器的数量由外部决定，级联选择器的选项由外部决定</p>
<p>实现数据的双向绑定，内部修改外部改变，外部修改内部改变</p>
<p>确定按钮保存当前选中，取消按钮取消本次操作并返回上次选中</p>
<p>尽可能的只实现功能，暴露在外部的按钮的样式由外部操作</p>
<p>当点击时动画弹出选择器，确定和取消以及点击外部时收起选择器</p>
<p>定稿实现方式</p>
<p>由于级联选择器和选项的数量都由外部决定，所以直接拆分为三个组件(外层包裹、级联选择器、级联选项)，全部暴露给开发者</p>
<p>对于外层包裹实现动画显示隐藏，以及数据双向绑定，对于级联选择器实现拖拽，数据修改及时发布、对于级联选项实现数据渲染</p>
<p>正式开始</p>
<p>先看一下我们最终使用的时候，是如何使用的吧</p>
<p></p>
<p>v-for="item in provinceList"</p>
<p>:key="item.id"</p>
<p>:value="item.id"</p>
<p>></p>
<p>{<!-- -->{item.name}}</p>
<p></p>
<p>v-for="item in cityList"</p>
<p>:key="item.id"</p>
<p>:value="item.id"</p>
<p>></p>
<p>{<!-- -->{item.name}}</p>
<p>// script</p>
<p>// 数据是后台请求的，我这里就不贴出来了</p>
<p>data() {<!-- --></p>
<p>address: {<!-- --></p>
<p>province: '',</p>
<p>city: ''</p>
<p>}</p>
<p>},</p>
<p>computed: {<!-- --></p>
<p>showAddress() {<!-- --></p>
<p>let province = this.provinceList.find(item => item.id===this.address.province) || {name:'选择省'};</p>
<p>let city = this.cityList.find(item => item.id===this.address.city) || {name:'选择市'};</p>
<p>return `${province.name} - ${city.name}`;</p>
<p>}</p>
<p>}</p>
<p>对于我们的最终效果来说，是不是很简单呢？</p>
<p>当然，如果我这里写三个h-wrapper的话，我们自然而然就变成了三级联动</p>
<p>首先需要先定义最外层的slector组件</p>
<p>最外层的slector组件用来暴露在外部显示的文字，以及控制级联选择器的显示隐藏，在每一次开始一个新的功能的时候，我们应该先完成重点的功能，重点功能完成之后，再去修改一些样式包括交互效果</p>
<p>在实施整个组件之前，其实我对最外层的selector组件并没有做太多的事情，因为我们的级联选择器是需要定位的，所以无论外层什么样子，都不会对我们的功能造成影响</p>
<p>一起来看一下最终的h-selector组件的模板</p>
<div class="h-selector">
<div class="h-selector-show">
<p>{<!-- -->{showValue || defaultShowValue}}</p>
</div>
<div class="h-selector-container">
<div class="h-selector-header">
<div class="h-selector-header-cancel">
取消
</div>
<div class="h-selector-header-title">
{<!-- -->{title}}
</div>
<div class="h-selector-header-confirm">
确定
</div>
</div>
</div>
</div>
<p>对于这个模板来说，需要解释的地方很少，我都写在注释里边</p>
<p>接着，我们看一下最终的逻辑部分</p>
<p>export default {<!-- --></p>
<p>name: "hSelector",</p>
<p>props: {<!-- --></p>
<p>value: { // 数据双向绑定所必须的属性</p>
<p>type: Object, // 期待接收一个Object的值</p>
<p>required: true // 必填的</p>
<p>},</p>
<p>showValue: { // 由外部定义显示在外层的内容</p>
<p>type: String,</p>
<p>},</p>
<p>title: { // 定义级联选择器的标题</p>
<p>type:String, // 接收字符串类型</p>
<p>default: '' // 默认为空字符</p>
<p>}</p>
<p>},</p>
<p>data() {<!-- --></p>
<p>// 定义oldValue用来保存上一次的值，使用Object.assign拷贝一份，避免与绑定的value发生冲突</p>
<p>let oldValue = Object.assign({}, this.value);</p>
<p>return {<!-- --></p>
<p>oldValue, // 保存上一次修改的值</p>
<p>show: false // 定义显示隐藏</p>
<p>}</p>
<p>},</p>
<p>computed: {<!-- --></p>
<p>defaultShowValue() { // 定义默认显示的内容，建议使用外部定义的内容显示，内部只做了非常简单的处理</p>
<p>le |
|
转播
