vue实现safari下拉选择滚轮效果
vue使用iosSelect实现safari下拉菜单的滚轮效果,这里根据其例子实现地区选择的三级联动滚轮效果
可以不执行npm install --save iosSelect,直接去github上下载源码https://github.com/zhoushengmufc/iosselect
我的例子来源于demo中的three,正好是地区选择的三级联动
<template>
<div>
<div
class="rightList"
@click="showSelect">
<el-input placeholder="请选择地址" v-model="cityEx" >
</el-input>
</div>
</div>
</template>
//如上div @click是为了触发iosSelect显示,el-input没有点击事件,只有获取焦点事件,用法见仁见智,可以自定义,
//el-input是为了展示选择结果,cityEx给了一个默认值,可以不赋值
<script>
//iosSelect.css和iosSelect.js是效果
import '../assets/iosselect.css'
import '../assets/iosSelect.js'
//three中的两个辅助文件,用来支撑地区选择的数据
import './zepto.js'
//areaData_v2需要进行修改,不然会提示data format error,修改在下面讲解
import {iosProvinces, iosCitys, iosCountys} from './areaData_v2.js'
export default {
name: 'Mine',
data () {
return {
cityEx:'内蒙古自治区 呼和浩特市 土默特左旗',
}
},
methods:{
//地址显示控件点击后触发事件
showSelect:function(){
//自己实现的根据地址名称获取id,代码如下
var levels = this.textToLevel(this.cityEx)
var iosSelect = new IosSelect(3,
[iosProvinces, iosCitys, iosCountys],
{
title: '地址选择',
itemHeight: 35,
relation: [1, 1],
//三个初始值,省市县
oneLevelId: levels[0],
twoLevelId: levels[1],
threeLevelId: levels[2],
//地址选择点击确定后的回调
callback: (selectOneObj, selectTwoObj, selectThreeObj)=> {
this.cityEx = selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value
console.log(this.cityEx)
}
});
},
//根据地址名字转化未三级level,用以给iosSelect设置初始值
textToLevel:function(text){
var arr = []
if (text) {
var objs = text.split(' ')
if (objs[0]) {
iosProvinces.forEach((item, index)=>{
if (item.value == objs[0]) {
arr.push(item.id)
}
})
}
if (objs[1]) {
iosCitys.forEach((item, index)=>{
if (item.value == objs[1]) {
arr.push(item.id)
}
})
}
if (objs[2]) {
iosCountys.forEach((item, index)=>{
if (item.value == objs[2]) {
arr.push(item.id)
}
})
}
}
return arr
},
}
}
</script>
修改areaData_v2.js
areaData_v2.js文件里面有三个变量iosProvinces, iosCitys,iosCountys
但是直接import使用不了,data format error就是说格式不对,要么是数组,要么是函数,直接传入是undefined
所以要将这三个变量导出
// 省份列表
var iosProvinces = [
改为
// 省份列表
export var iosProvinces = [
// 城市列表
var iosCitys = [
改为
// 城市列表
export var iosCitys = [
// 区县列表
var iosCountys = [
改为
// 区县列表
export var iosCountys = [
如上改动是为了导出三个变量以供使用,
效果如下