Vue实现移动端三级联动_@郝晨光

对于我们的最终效果来说，是不是很简单呢？

当然，如果我这里写三个h-wrapper的话，我们自然而然就变成了三级联动

最外层的slector组件用来暴露在外部显示的文字，以及控制级联选择器的显示隐藏，在每一次开始一个新的功能的时候，我们应该先完成重点的功能，重点功能完成之后，再去修改一些样式包括交互效果

对于这个模板来说，需要解释的地方很少，我都写在注释里边

首先需要重点提一下的是在mounted方法中，我们使用了this.$on方法，订阅了一个在当前组件内并没有发布的事件，这个事件，我定义在了h-wrapper这个组件中，稍后可以看到

其余的地方没有太复杂的功能和逻辑，就不一一解释

在模板中，需要重点关注的其实就是两个style，以及四个事件，当然了，还有插槽的位置，我这里使用了一个小技巧，在原始位置直接写好了四个option，并且其中一个还显示请选择，用来保证可选项的位置永远都可以处在最中间的位置

在逻辑中，我通过 *** 作activeIndex这个索引值来动态的修改数据中ul的位移，使得当前永远显示的是对应索引与option高度计算出的位置

通过touchstart、touchmove、touchend三个事件来 *** 作元素的位置与滑动

通过watch侦听对应属性，并实时触发事件，使得级联选择器发生改变，达到内外同步

通过mounted与updated钩子函数来保证当前的级联选择器属性会随着刷新而刷新

通过slot插槽来显示外部传入的option选项

对于option组件来说，并没有多少内容，它只需要负责显示数据，以及让级联选择器可以正确的获取到值即可

首先当前这个级联选择器的样式，我没有做太多的处理，但是已经很好看了有没有！

最终，我们就已经成功的打造了一款移动端的级联选择器，可以实现一级二级三级联动，当然了，多级也没有任何问题，但是在移动端，我建议最多到三级联动，否则的话影响用户体验感

<h1 align="center" >picker-extend.js</h1>

一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

picker-extend 移动端级联选择插件（）

picker-extend 移动端级联选择插件（掘金）

picker-extend 移动端级联选择插件 （npm）

在你的js文件中import：

[图片上传失败...(image-6fbf94-1536046640642)]

基础实例 → 功能函数 *** 作后

[图片上传失败...(image-95d5aa-1536046640642)]

[图片上传失败...(image-7379f1-1536046640642)]

callback回调函数里有一个indexArr参数，它是一个数组，记录着当前选中的位置：

把这个数组转化为字符串之后，可以用<input type="hidden" value="">隐藏域或者别的其他方式保存下来，传给后台。

下次打开页面时，

MobileSelect实例化的时候，读取这个字符串，再转成数组，传给position，完成初始化定位即可。

1、首先在 SQL Server 2008中选择单击Microsoft SQL Server 2008 Management Studio,会出现一个窗口。2、在服务器名称中选择本机的服务器名字。然后单击【连接】按钮。就进入Microsoft SQL Server 2008 Management Studio。3、右键单击【数据库】，选择【新建数据库】，会出来一个窗口，在这个窗口里可以输入你要建的数据库的名称，同时也可以修改数据库的文件类型。4、数据库的名称和类型都弄好后，点击下方的【确定】 按钮。数据库就建立了。5、要是想删除自己不想要的数据库也很简单。鼠标右键点击自己不想要的数据库，然后选择【删除】 ，那么该数据库就删除了。

---