zyronon
4 years ago
64 changed files with 1286 additions and 13173 deletions
@ -1,5 +0,0 @@ |
|||||||
module.exports = { |
|
||||||
presets: [ |
|
||||||
'@vue/cli-plugin-babel/preset' |
|
||||||
] |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 255 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 217 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 191 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 305 KiB After Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 358 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 134 KiB After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
@ -0,0 +1,150 @@ |
|||||||
|
.mobileSelect { |
||||||
|
position: relative; |
||||||
|
z-index: 0; |
||||||
|
opacity: 0; |
||||||
|
visibility: hidden; |
||||||
|
-webkit-transition: opacity 0.4s, z-index 0.4s; |
||||||
|
transition: opacity 0.4s, z-index 0.4s; |
||||||
|
} |
||||||
|
.mobileSelect * { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
-webkit-box-sizing: border-box; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.mobileSelect .grayLayer { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
background: #eee; |
||||||
|
background: rgba(0, 0, 0, 0.7); |
||||||
|
z-index: 888; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.mobileSelect .content { |
||||||
|
width: 100%; |
||||||
|
display: block; |
||||||
|
position: fixed; |
||||||
|
z-index: 889; |
||||||
|
color: black; |
||||||
|
-webkit-transition: all 0.4s; |
||||||
|
transition: all 0.4s; |
||||||
|
bottom: -350px; |
||||||
|
left: 0; |
||||||
|
background: white; |
||||||
|
} |
||||||
|
.mobileSelect .content .fixWidth { |
||||||
|
width: 90%; |
||||||
|
margin: 0 auto; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.mobileSelect .content .fixWidth:after { |
||||||
|
content: "."; |
||||||
|
display: block; |
||||||
|
height: 0; |
||||||
|
clear: both; |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
.mobileSelect .content .btnBar { |
||||||
|
border-bottom: 1px solid #DCDCDC; |
||||||
|
font-size: 15px; |
||||||
|
height: 45px; |
||||||
|
position: relative; |
||||||
|
text-align: center; |
||||||
|
line-height: 45px; |
||||||
|
} |
||||||
|
.mobileSelect .content .btnBar .cancel, |
||||||
|
.mobileSelect .content .btnBar .ensure { |
||||||
|
height: 45px; |
||||||
|
width: 55px; |
||||||
|
cursor: pointer; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
.mobileSelect .content .btnBar .cancel { |
||||||
|
left: 0; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
.mobileSelect .content .btnBar .ensure { |
||||||
|
right: 0; |
||||||
|
color: #1e83d3; |
||||||
|
} |
||||||
|
.mobileSelect .content .btnBar .title { |
||||||
|
font-size: 15px; |
||||||
|
padding: 0 15%; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
.mobileSelect .content .panel:after { |
||||||
|
content: "."; |
||||||
|
display: block; |
||||||
|
height: 0; |
||||||
|
clear: both; |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
.mobileSelect .content .panel .wheels { |
||||||
|
width: 100%; |
||||||
|
height: 200px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.mobileSelect .content .panel .wheel { |
||||||
|
position: relative; |
||||||
|
z-index: 0; |
||||||
|
float: left; |
||||||
|
width: 50%; |
||||||
|
height: 200px; |
||||||
|
overflow: hidden; |
||||||
|
-webkit-transition: width 0.3s ease; |
||||||
|
transition: width 0.3s ease; |
||||||
|
} |
||||||
|
.mobileSelect .content .panel .wheel .selectContainer { |
||||||
|
display: block; |
||||||
|
text-align: center; |
||||||
|
-webkit-transition: -webkit-transform 0.18s ease-out; |
||||||
|
transition: -webkit-transform 0.18s ease-out; |
||||||
|
transition: transform 0.18s ease-out; |
||||||
|
transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out; |
||||||
|
} |
||||||
|
.mobileSelect .content .panel .wheel .selectContainer li { |
||||||
|
font-size: 15px; |
||||||
|
display: block; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
cursor: pointer; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
.mobileSelect .content .panel .selectLine { |
||||||
|
height: 40px; |
||||||
|
width: 100%; |
||||||
|
position: absolute; |
||||||
|
top: 80px; |
||||||
|
pointer-events: none; |
||||||
|
-webkit-box-sizing: border-box; |
||||||
|
box-sizing: border-box; |
||||||
|
border-top: 1px solid #DCDCDC; |
||||||
|
border-bottom: 1px solid #DCDCDC; |
||||||
|
} |
||||||
|
.mobileSelect .content .panel .shadowMask { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
width: 100%; |
||||||
|
height: 200px; |
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff)); |
||||||
|
background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff); |
||||||
|
background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff); |
||||||
|
opacity: 0.9; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
.mobileSelect-show { |
||||||
|
opacity: 1; |
||||||
|
z-index: 10000; |
||||||
|
visibility: visible; |
||||||
|
} |
||||||
|
.mobileSelect-show .content { |
||||||
|
bottom: 0; |
||||||
|
} |
||||||
@ -0,0 +1,719 @@ |
|||||||
|
/*! |
||||||
|
* mobileSelect.js |
||||||
|
* (c) 2017-present onlyhom |
||||||
|
* Released under the MIT License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import './mobile-select.css' |
||||||
|
|
||||||
|
function getClass(dom, string) { |
||||||
|
return dom.getElementsByClassName(string); |
||||||
|
} |
||||||
|
|
||||||
|
//构造器
|
||||||
|
function MobileSelect(config) { |
||||||
|
this.mobileSelect; |
||||||
|
this.wheelsData = config.wheels; |
||||||
|
this.jsonType = false; |
||||||
|
this.cascadeJsonData = []; |
||||||
|
this.displayJson = []; |
||||||
|
this.curValue = []; |
||||||
|
this.curIndexArr = []; |
||||||
|
this.cascade = false; |
||||||
|
this.startY; |
||||||
|
this.moveEndY; |
||||||
|
this.moveY; |
||||||
|
this.oldMoveY; |
||||||
|
this.offset = 0; |
||||||
|
this.offsetSum = 0; |
||||||
|
this.oversizeBorder; |
||||||
|
this.curDistance = []; |
||||||
|
this.clickStatus = false; |
||||||
|
this.isPC = true; |
||||||
|
this.init(config); |
||||||
|
} |
||||||
|
|
||||||
|
MobileSelect.prototype = { |
||||||
|
constructor: MobileSelect, |
||||||
|
init: function (config) { |
||||||
|
var _this = this; |
||||||
|
if (config.wheels[0].data.length == 0) { |
||||||
|
console.error('mobileSelect has been successfully installed, but the data is empty and cannot be initialized.'); |
||||||
|
return false; |
||||||
|
} |
||||||
|
_this.keyMap = config.keyMap ? config.keyMap : {id: 'id', value: 'value', childs: 'childs'}; |
||||||
|
_this.checkDataType(); |
||||||
|
_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText); |
||||||
|
_this.trigger = document.querySelector(config.trigger); |
||||||
|
if (!_this.trigger) { |
||||||
|
console.error('mobileSelect has been successfully installed, but no trigger found on your page.'); |
||||||
|
return false; |
||||||
|
} |
||||||
|
_this.wheel = getClass(_this.mobileSelect, 'wheel'); |
||||||
|
_this.slider = getClass(_this.mobileSelect, 'selectContainer'); |
||||||
|
_this.wheels = _this.mobileSelect.querySelector('.wheels'); |
||||||
|
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight; |
||||||
|
_this.ensureBtn = _this.mobileSelect.querySelector('.ensure'); |
||||||
|
_this.cancelBtn = _this.mobileSelect.querySelector('.cancel'); |
||||||
|
_this.grayLayer = _this.mobileSelect.querySelector('.grayLayer'); |
||||||
|
_this.popUp = _this.mobileSelect.querySelector('.content'); |
||||||
|
_this.callback = config.callback || function () { |
||||||
|
}; |
||||||
|
_this.cancel = config.cancel || function () { |
||||||
|
}; |
||||||
|
_this.transitionEnd = config.transitionEnd || function () { |
||||||
|
}; |
||||||
|
_this.onShow = config.onShow || function () { |
||||||
|
}; |
||||||
|
_this.onHide = config.onHide || function () { |
||||||
|
}; |
||||||
|
_this.initPosition = config.position || []; |
||||||
|
_this.titleText = config.title || ''; |
||||||
|
_this.connector = config.connector || ' '; |
||||||
|
_this.triggerDisplayData = !(typeof (config.triggerDisplayData) == 'undefined') ? config.triggerDisplayData : true; |
||||||
|
_this.trigger.style.cursor = 'pointer'; |
||||||
|
_this.setStyle(config); |
||||||
|
_this.setTitle(_this.titleText); |
||||||
|
_this.checkIsPC(); |
||||||
|
_this.checkCascade(); |
||||||
|
_this.addListenerAll(); |
||||||
|
|
||||||
|
if (_this.cascade) { |
||||||
|
_this.initCascade(); |
||||||
|
} |
||||||
|
//定位 初始位置
|
||||||
|
if (_this.initPosition.length < _this.slider.length) { |
||||||
|
var diff = _this.slider.length - _this.initPosition.length; |
||||||
|
for (var i = 0; i < diff; i++) { |
||||||
|
_this.initPosition.push(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
_this.setCurDistance(_this.initPosition); |
||||||
|
|
||||||
|
|
||||||
|
//按钮监听
|
||||||
|
_this.cancelBtn.addEventListener('click', function () { |
||||||
|
_this.hide(); |
||||||
|
_this.cancel(_this.curIndexArr, _this.curValue); |
||||||
|
}); |
||||||
|
|
||||||
|
_this.ensureBtn.addEventListener('click', function () { |
||||||
|
_this.hide(); |
||||||
|
if (!_this.liHeight) { |
||||||
|
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight; |
||||||
|
} |
||||||
|
var tempValue = ''; |
||||||
|
for (var i = 0; i < _this.wheel.length; i++) { |
||||||
|
i == _this.wheel.length - 1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector; |
||||||
|
} |
||||||
|
if (_this.triggerDisplayData) { |
||||||
|
_this.trigger.innerHTML = tempValue; |
||||||
|
} |
||||||
|
_this.curIndexArr = _this.getIndexArr(); |
||||||
|
_this.curValue = _this.getCurValue(); |
||||||
|
_this.callback(_this.curIndexArr, _this.curValue); |
||||||
|
}); |
||||||
|
|
||||||
|
_this.trigger.addEventListener('click', function () { |
||||||
|
_this.show(); |
||||||
|
}); |
||||||
|
_this.grayLayer.addEventListener('click', function () { |
||||||
|
_this.hide(); |
||||||
|
_this.cancel(_this.curIndexArr, _this.curValue); |
||||||
|
}); |
||||||
|
_this.popUp.addEventListener('click', function () { |
||||||
|
event.stopPropagation(); |
||||||
|
}); |
||||||
|
|
||||||
|
_this.fixRowStyle(); //修正列数
|
||||||
|
}, |
||||||
|
|
||||||
|
setTitle: function (string) { |
||||||
|
var _this = this; |
||||||
|
_this.titleText = string; |
||||||
|
_this.mobileSelect.querySelector('.title').innerHTML = _this.titleText; |
||||||
|
}, |
||||||
|
|
||||||
|
setStyle: function (config) { |
||||||
|
var _this = this; |
||||||
|
if (config.ensureBtnColor) { |
||||||
|
_this.ensureBtn.style.color = config.ensureBtnColor; |
||||||
|
} |
||||||
|
if (config.cancelBtnColor) { |
||||||
|
_this.cancelBtn.style.color = config.cancelBtnColor; |
||||||
|
} |
||||||
|
if (config.titleColor) { |
||||||
|
_this.title = _this.mobileSelect.querySelector('.title'); |
||||||
|
_this.title.style.color = config.titleColor; |
||||||
|
} |
||||||
|
if (config.textColor) { |
||||||
|
_this.panel = _this.mobileSelect.querySelector('.panel'); |
||||||
|
_this.panel.style.color = config.textColor; |
||||||
|
} |
||||||
|
if (config.titleBgColor) { |
||||||
|
_this.btnBar = _this.mobileSelect.querySelector('.btnBar'); |
||||||
|
_this.btnBar.style.backgroundColor = config.titleBgColor; |
||||||
|
} |
||||||
|
if (config.bgColor) { |
||||||
|
_this.panel = _this.mobileSelect.querySelector('.panel'); |
||||||
|
_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask'); |
||||||
|
_this.panel.style.backgroundColor = config.bgColor; |
||||||
|
_this.shadowMask.style.background = 'linear-gradient(to bottom, ' + config.bgColor + ', rgba(255, 255, 255, 0), ' + config.bgColor + ')'; |
||||||
|
} |
||||||
|
if (!isNaN(config.maskOpacity)) { |
||||||
|
_this.grayMask = _this.mobileSelect.querySelector('.grayLayer'); |
||||||
|
_this.grayMask.style.background = 'rgba(0, 0, 0, ' + config.maskOpacity + ')'; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
checkIsPC: function () { |
||||||
|
var _this = this; |
||||||
|
var sUserAgent = navigator.userAgent.toLowerCase(); |
||||||
|
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; |
||||||
|
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; |
||||||
|
var bIsMidp = sUserAgent.match(/midp/i) == "midp"; |
||||||
|
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; |
||||||
|
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; |
||||||
|
var bIsAndroid = sUserAgent.match(/android/i) == "android"; |
||||||
|
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; |
||||||
|
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; |
||||||
|
if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) { |
||||||
|
_this.isPC = false; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
show: function () { |
||||||
|
this.mobileSelect.classList.add('mobileSelect-show'); |
||||||
|
if (typeof this.onShow === 'function') { |
||||||
|
this.onShow(this); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
hide: function () { |
||||||
|
this.mobileSelect.classList.remove('mobileSelect-show'); |
||||||
|
if (typeof this.onHide === 'function') { |
||||||
|
this.onHide(this); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
renderWheels: function (wheelsData, cancelBtnText, ensureBtnText) { |
||||||
|
var _this = this; |
||||||
|
var cancelText = cancelBtnText ? cancelBtnText : '取消'; |
||||||
|
var ensureText = ensureBtnText ? ensureBtnText : '确认'; |
||||||
|
_this.mobileSelect = document.createElement("div"); |
||||||
|
_this.mobileSelect.className = "mobileSelect"; |
||||||
|
_this.mobileSelect.innerHTML = |
||||||
|
'<div class="grayLayer"></div>' + |
||||||
|
'<div class="content">' + |
||||||
|
'<div class="btnBar">' + |
||||||
|
'<div class="fixWidth">' + |
||||||
|
'<div class="cancel">' + cancelText + '</div>' + |
||||||
|
'<div class="title"></div>' + |
||||||
|
'<div class="ensure">' + ensureText + '</div>' + |
||||||
|
'</div>' + |
||||||
|
'</div>' + |
||||||
|
'<div class="panel">' + |
||||||
|
'<div class="fixWidth">' + |
||||||
|
'<div class="wheels">' + |
||||||
|
'</div>' + |
||||||
|
'<div class="selectLine"></div>' + |
||||||
|
'<div class="shadowMask"></div>' + |
||||||
|
'</div>' + |
||||||
|
'</div>' + |
||||||
|
'</div>'; |
||||||
|
document.body.appendChild(_this.mobileSelect); |
||||||
|
|
||||||
|
//根据数据长度来渲染
|
||||||
|
|
||||||
|
var tempHTML = ''; |
||||||
|
for (var i = 0; i < wheelsData.length; i++) { |
||||||
|
//列
|
||||||
|
tempHTML += '<div class="wheel"><ul class="selectContainer">'; |
||||||
|
if (_this.jsonType) { |
||||||
|
for (var j = 0; j < wheelsData[i].data.length; j++) { |
||||||
|
//行
|
||||||
|
tempHTML += '<li data-id="' + wheelsData[i].data[j][_this.keyMap.id] + '">' + wheelsData[i].data[j][_this.keyMap.value] + '</li>'; |
||||||
|
} |
||||||
|
} else { |
||||||
|
for (var j = 0; j < wheelsData[i].data.length; j++) { |
||||||
|
//行
|
||||||
|
tempHTML += '<li>' + wheelsData[i].data[j] + '</li>'; |
||||||
|
} |
||||||
|
} |
||||||
|
tempHTML += '</ul></div>'; |
||||||
|
} |
||||||
|
_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML; |
||||||
|
}, |
||||||
|
|
||||||
|
addListenerAll: function () { |
||||||
|
var _this = this; |
||||||
|
for (var i = 0; i < _this.slider.length; i++) { |
||||||
|
//手势监听
|
||||||
|
(function (i) { |
||||||
|
_this.addListenerWheel(_this.wheel[i], i); |
||||||
|
})(i); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
addListenerWheel: function (theWheel, index) { |
||||||
|
var _this = this; |
||||||
|
theWheel.addEventListener('touchstart', function () { |
||||||
|
_this.touch(event, this.firstChild, index); |
||||||
|
}, false); |
||||||
|
theWheel.addEventListener('touchend', function () { |
||||||
|
_this.touch(event, this.firstChild, index); |
||||||
|
}, false); |
||||||
|
theWheel.addEventListener('touchmove', function () { |
||||||
|
_this.touch(event, this.firstChild, index); |
||||||
|
}, false); |
||||||
|
|
||||||
|
if (_this.isPC) { |
||||||
|
//如果是PC端则再增加拖拽监听 方便调试
|
||||||
|
theWheel.addEventListener('mousedown', function () { |
||||||
|
_this.dragClick(event, this.firstChild, index); |
||||||
|
}, false); |
||||||
|
theWheel.addEventListener('mousemove', function () { |
||||||
|
_this.dragClick(event, this.firstChild, index); |
||||||
|
}, false); |
||||||
|
theWheel.addEventListener('mouseup', function () { |
||||||
|
_this.dragClick(event, this.firstChild, index); |
||||||
|
}, true); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
checkDataType: function () { |
||||||
|
var _this = this; |
||||||
|
if (typeof (_this.wheelsData[0].data[0]) == 'object') { |
||||||
|
_this.jsonType = true; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
checkCascade: function () { |
||||||
|
var _this = this; |
||||||
|
if (_this.jsonType) { |
||||||
|
var node = _this.wheelsData[0].data; |
||||||
|
for (var i = 0; i < node.length; i++) { |
||||||
|
if (_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0) { |
||||||
|
_this.cascade = true; |
||||||
|
_this.cascadeJsonData = _this.wheelsData[0].data; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
_this.cascade = false; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
generateArrData: function (targetArr) { |
||||||
|
var tempArr = []; |
||||||
|
var keyMap_id = this.keyMap.id; |
||||||
|
var keyMap_value = this.keyMap.value; |
||||||
|
for (var i = 0; i < targetArr.length; i++) { |
||||||
|
var tempObj = {}; |
||||||
|
tempObj[keyMap_id] = targetArr[i][this.keyMap.id]; |
||||||
|
tempObj[keyMap_value] = targetArr[i][this.keyMap.value]; |
||||||
|
tempArr.push(tempObj); |
||||||
|
} |
||||||
|
return tempArr; |
||||||
|
}, |
||||||
|
|
||||||
|
initCascade: function () { |
||||||
|
var _this = this; |
||||||
|
_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData)); |
||||||
|
if (_this.initPosition.length > 0) { |
||||||
|
_this.initDeepCount = 0; |
||||||
|
_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]); |
||||||
|
} else { |
||||||
|
_this.checkArrDeep(_this.cascadeJsonData[0]); |
||||||
|
} |
||||||
|
_this.reRenderWheels(); |
||||||
|
}, |
||||||
|
|
||||||
|
initCheckArrDeep: function (parent) { |
||||||
|
var _this = this; |
||||||
|
if (parent) { |
||||||
|
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) { |
||||||
|
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); |
||||||
|
_this.initDeepCount++; |
||||||
|
var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]; |
||||||
|
if (nextNode) { |
||||||
|
_this.initCheckArrDeep(nextNode); |
||||||
|
} else { |
||||||
|
_this.checkArrDeep(parent[_this.keyMap.childs][0]); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
checkArrDeep: function (parent) { |
||||||
|
//检测子节点深度 修改 displayJson
|
||||||
|
var _this = this; |
||||||
|
if (parent) { |
||||||
|
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) { |
||||||
|
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); //生成子节点数组
|
||||||
|
_this.checkArrDeep(parent[_this.keyMap.childs][0]);//检测下一个子节点
|
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
checkRange: function (index, posIndexArr) { |
||||||
|
var _this = this; |
||||||
|
var deleteNum = _this.displayJson.length - 1 - index; |
||||||
|
for (var i = 0; i < deleteNum; i++) { |
||||||
|
_this.displayJson.pop(); //修改 displayJson
|
||||||
|
} |
||||||
|
var resultNode; |
||||||
|
for (var i = 0; i <= index; i++) { |
||||||
|
if (i == 0) |
||||||
|
resultNode = _this.cascadeJsonData[posIndexArr[0]]; |
||||||
|
else { |
||||||
|
resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]]; |
||||||
|
} |
||||||
|
} |
||||||
|
_this.checkArrDeep(resultNode); |
||||||
|
//console.log(_this.displayJson);
|
||||||
|
_this.reRenderWheels(); |
||||||
|
_this.fixRowStyle(); |
||||||
|
_this.setCurDistance(_this.resetPosition(index, posIndexArr)); |
||||||
|
}, |
||||||
|
|
||||||
|
resetPosition: function (index, posIndexArr) { |
||||||
|
var _this = this; |
||||||
|
var tempPosArr = posIndexArr; |
||||||
|
var tempCount; |
||||||
|
if (_this.slider.length > posIndexArr.length) { |
||||||
|
tempCount = _this.slider.length - posIndexArr.length; |
||||||
|
for (var i = 0; i < tempCount; i++) { |
||||||
|
tempPosArr.push(0); |
||||||
|
} |
||||||
|
} else if (_this.slider.length < posIndexArr.length) { |
||||||
|
tempCount = posIndexArr.length - _this.slider.length; |
||||||
|
for (var i = 0; i < tempCount; i++) { |
||||||
|
tempPosArr.pop(); |
||||||
|
} |
||||||
|
} |
||||||
|
for (var i = index + 1; i < tempPosArr.length; i++) { |
||||||
|
tempPosArr[i] = 0; |
||||||
|
} |
||||||
|
return tempPosArr; |
||||||
|
}, |
||||||
|
reRenderWheels: function () { |
||||||
|
var _this = this; |
||||||
|
//删除多余的wheel
|
||||||
|
if (_this.wheel.length > _this.displayJson.length) { |
||||||
|
var count = _this.wheel.length - _this.displayJson.length; |
||||||
|
for (var i = 0; i < count; i++) { |
||||||
|
_this.wheels.removeChild(_this.wheel[_this.wheel.length - 1]); |
||||||
|
} |
||||||
|
} |
||||||
|
for (var i = 0; i < _this.displayJson.length; i++) { |
||||||
|
//列
|
||||||
|
(function (i) { |
||||||
|
var tempHTML = ''; |
||||||
|
if (_this.wheel[i]) { |
||||||
|
//console.log('插入Li');
|
||||||
|
for (var j = 0; j < _this.displayJson[i].length; j++) { |
||||||
|
//行
|
||||||
|
tempHTML += '<li data-id="' + _this.displayJson[i][j][_this.keyMap.id] + '">' + _this.displayJson[i][j][_this.keyMap.value] + '</li>'; |
||||||
|
} |
||||||
|
_this.slider[i].innerHTML = tempHTML; |
||||||
|
|
||||||
|
} else { |
||||||
|
var tempWheel = document.createElement("div"); |
||||||
|
tempWheel.className = "wheel"; |
||||||
|
tempHTML = '<ul class="selectContainer">'; |
||||||
|
for (var j = 0; j < _this.displayJson[i].length; j++) { |
||||||
|
//行
|
||||||
|
tempHTML += '<li data-id="' + _this.displayJson[i][j][_this.keyMap.id] + '">' + _this.displayJson[i][j][_this.keyMap.value] + '</li>'; |
||||||
|
} |
||||||
|
tempHTML += '</ul>'; |
||||||
|
tempWheel.innerHTML = tempHTML; |
||||||
|
|
||||||
|
_this.addListenerWheel(tempWheel, i); |
||||||
|
_this.wheels.appendChild(tempWheel); |
||||||
|
} |
||||||
|
//_this.·(i);
|
||||||
|
})(i); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
updateWheels: function (data) { |
||||||
|
var _this = this; |
||||||
|
if (_this.cascade) { |
||||||
|
_this.cascadeJsonData = data; |
||||||
|
_this.displayJson = []; |
||||||
|
_this.initCascade(); |
||||||
|
if (_this.initPosition.length < _this.slider.length) { |
||||||
|
var diff = _this.slider.length - _this.initPosition.length; |
||||||
|
for (var i = 0; i < diff; i++) { |
||||||
|
_this.initPosition.push(0); |
||||||
|
} |
||||||
|
} |
||||||
|
_this.setCurDistance(_this.initPosition); |
||||||
|
_this.fixRowStyle(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
updateWheel: function (sliderIndex, data) { |
||||||
|
var _this = this; |
||||||
|
var tempHTML = ''; |
||||||
|
if (_this.cascade) { |
||||||
|
console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源'); |
||||||
|
return false; |
||||||
|
} else if (_this.jsonType) { |
||||||
|
for (var j = 0; j < data.length; j++) { |
||||||
|
tempHTML += '<li data-id="' + data[j][_this.keyMap.id] + '">' + data[j][_this.keyMap.value] + '</li>'; |
||||||
|
} |
||||||
|
_this.wheelsData[sliderIndex] = {data: data}; |
||||||
|
} else { |
||||||
|
for (var j = 0; j < data.length; j++) { |
||||||
|
tempHTML += '<li>' + data[j] + '</li>'; |
||||||
|
} |
||||||
|
_this.wheelsData[sliderIndex] = data; |
||||||
|
} |
||||||
|
_this.slider[sliderIndex].innerHTML = tempHTML; |
||||||
|
}, |
||||||
|
|
||||||
|
fixRowStyle: function () { |
||||||
|
var _this = this; |
||||||
|
var width = (100 / _this.wheel.length).toFixed(2); |
||||||
|
for (var i = 0; i < _this.wheel.length; i++) { |
||||||
|
_this.wheel[i].style.width = width + '%'; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
getIndex: function (distance) { |
||||||
|
return Math.round((2 * this.liHeight - distance) / this.liHeight); |
||||||
|
}, |
||||||
|
|
||||||
|
getIndexArr: function () { |
||||||
|
var _this = this; |
||||||
|
var temp = []; |
||||||
|
for (var i = 0; i < _this.curDistance.length; i++) { |
||||||
|
temp.push(_this.getIndex(_this.curDistance[i])); |
||||||
|
} |
||||||
|
return temp; |
||||||
|
}, |
||||||
|
|
||||||
|
getCurValue: function () { |
||||||
|
var _this = this; |
||||||
|
var temp = []; |
||||||
|
var positionArr = _this.getIndexArr(); |
||||||
|
if (_this.cascade) { |
||||||
|
for (var i = 0; i < _this.wheel.length; i++) { |
||||||
|
temp.push(_this.displayJson[i][positionArr[i]]); |
||||||
|
} |
||||||
|
} else if (_this.jsonType) { |
||||||
|
for (var i = 0; i < _this.curDistance.length; i++) { |
||||||
|
temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]); |
||||||
|
} |
||||||
|
} else { |
||||||
|
for (var i = 0; i < _this.curDistance.length; i++) { |
||||||
|
temp.push(_this.getInnerHtml(i)); |
||||||
|
} |
||||||
|
} |
||||||
|
return temp; |
||||||
|
}, |
||||||
|
|
||||||
|
getValue: function () { |
||||||
|
return this.curValue; |
||||||
|
}, |
||||||
|
|
||||||
|
calcDistance: function (index) { |
||||||
|
return 2 * this.liHeight - index * this.liHeight; |
||||||
|
}, |
||||||
|
|
||||||
|
setCurDistance: function (indexArr) { |
||||||
|
var _this = this; |
||||||
|
var temp = []; |
||||||
|
for (var i = 0; i < _this.slider.length; i++) { |
||||||
|
temp.push(_this.calcDistance(indexArr[i])); |
||||||
|
_this.movePosition(_this.slider[i], temp[i]); |
||||||
|
} |
||||||
|
_this.curDistance = temp; |
||||||
|
}, |
||||||
|
|
||||||
|
fixPosition: function (distance) { |
||||||
|
return -(this.getIndex(distance) - 2) * this.liHeight; |
||||||
|
}, |
||||||
|
|
||||||
|
movePosition: function (theSlider, distance) { |
||||||
|
theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)'; |
||||||
|
theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)'; |
||||||
|
}, |
||||||
|
|
||||||
|
locatePosition: function (index, posIndex) { |
||||||
|
var _this = this; |
||||||
|
this.curDistance[index] = this.calcDistance(posIndex); |
||||||
|
this.movePosition(this.slider[index], this.curDistance[index]); |
||||||
|
if (_this.cascade) { |
||||||
|
_this.checkRange(index, _this.getIndexArr()); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
updateCurDistance: function (theSlider, index) { |
||||||
|
if (theSlider.style.transform) { |
||||||
|
this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]); |
||||||
|
} else { |
||||||
|
this.curDistance[index] = parseInt(theSlider.style.webkitTransform.split(',')[1]); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
getDistance: function (theSlider) { |
||||||
|
if (theSlider.style.transform) { |
||||||
|
return parseInt(theSlider.style.transform.split(',')[1]); |
||||||
|
} else { |
||||||
|
return parseInt(theSlider.style.webkitTransform.split(',')[1]); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
getInnerHtml: function (sliderIndex) { |
||||||
|
var _this = this; |
||||||
|
var index = _this.getIndex(_this.curDistance[sliderIndex]); |
||||||
|
return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML; |
||||||
|
}, |
||||||
|
|
||||||
|
touch: function (event, theSlider, index) { |
||||||
|
var _this = this; |
||||||
|
event = event || window.event; |
||||||
|
switch (event.type) { |
||||||
|
case "touchstart": |
||||||
|
_this.startY = event.touches[0].clientY; |
||||||
|
_this.startY = parseInt(_this.startY); |
||||||
|
_this.oldMoveY = _this.startY; |
||||||
|
break; |
||||||
|
|
||||||
|
case "touchend": |
||||||
|
|
||||||
|
_this.moveEndY = parseInt(event.changedTouches[0].clientY); |
||||||
|
_this.offsetSum = _this.moveEndY - _this.startY; |
||||||
|
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight; |
||||||
|
|
||||||
|
if (_this.offsetSum == 0) { |
||||||
|
//offsetSum为0,相当于点击事件
|
||||||
|
// 0 1 [2] 3 4
|
||||||
|
var clickOffetNum = parseInt((document.documentElement.clientHeight - _this.moveEndY) / 40); |
||||||
|
if (clickOffetNum != 2) { |
||||||
|
var offset = clickOffetNum - 2; |
||||||
|
var newDistance = _this.curDistance[index] + (offset * _this.liHeight); |
||||||
|
if ((newDistance <= 2 * _this.liHeight) && (newDistance >= _this.oversizeBorder)) { |
||||||
|
_this.curDistance[index] = newDistance; |
||||||
|
_this.movePosition(theSlider, _this.curDistance[index]); |
||||||
|
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
//修正位置
|
||||||
|
_this.updateCurDistance(theSlider, index); |
||||||
|
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]); |
||||||
|
_this.movePosition(theSlider, _this.curDistance[index]); |
||||||
|
|
||||||
|
//反弹
|
||||||
|
if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) { |
||||||
|
_this.curDistance[index] = 2 * _this.liHeight; |
||||||
|
setTimeout(function () { |
||||||
|
_this.movePosition(theSlider, _this.curDistance[index]); |
||||||
|
}, 100); |
||||||
|
|
||||||
|
} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) { |
||||||
|
_this.curDistance[index] = _this.oversizeBorder; |
||||||
|
setTimeout(function () { |
||||||
|
_this.movePosition(theSlider, _this.curDistance[index]); |
||||||
|
}, 100); |
||||||
|
} |
||||||
|
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); |
||||||
|
} |
||||||
|
|
||||||
|
if (_this.cascade) { |
||||||
|
_this.checkRange(index, _this.getIndexArr()); |
||||||
|
} |
||||||
|
|
||||||
|
break; |
||||||
|
|
||||||
|
case "touchmove": |
||||||
|
event.preventDefault(); |
||||||
|
_this.moveY = event.touches[0].clientY; |
||||||
|
_this.offset = _this.moveY - _this.oldMoveY; |
||||||
|
|
||||||
|
_this.updateCurDistance(theSlider, index); |
||||||
|
_this.curDistance[index] = _this.curDistance[index] + _this.offset; |
||||||
|
_this.movePosition(theSlider, _this.curDistance[index]); |
||||||
|
_this.oldMoveY = _this.moveY; |
||||||
|
break; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
dragClick: function (event, theSlider, index) { |
||||||
|
var _this = this; |
||||||
|
event = event || window.event; |
||||||
|
switch (event.type) { |
||||||
|
case "mousedown": |
||||||
|
_this.startY = event.clientY; |
||||||
|
_this.oldMoveY = _this.startY; |
||||||
|
_this.clickStatus = true; |
||||||
|
break; |
||||||
|
|
||||||
|
case "mouseup": |
||||||
|
|
||||||
|
_this.moveEndY = event.clientY; |
||||||
|
_this.offsetSum = _this.moveEndY - _this.startY; |
||||||
|
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight; |
||||||
|
|
||||||
|
if (_this.offsetSum == 0) { |
||||||
|
var clickOffetNum = parseInt((document.documentElement.clientHeight - _this.moveEndY) / 40); |
||||||
|
if (clickOffetNum != 2) { |
||||||
|
var offset = clickOffetNum - 2; |
||||||
|
var newDistance = _this.curDistance[index] + (offset * _this.liHeight); |
||||||
|
if ((newDistance <= 2 * _this.liHeight) && (newDistance >= _this.oversizeBorder)) { |
||||||
|
_this.curDistance[index] = newDistance; |
||||||
|
_this.movePosition(theSlider, _this.curDistance[index]); |
||||||
|
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
//修正位置
|
||||||
|
_this.updateCurDistance(theSlider, index); |
||||||
|
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]); |
||||||
|
_this.movePosition(theSlider, _this.curDistance[index]); |
||||||
|
|
||||||
|
//反弹
|
||||||
|
if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) { |
||||||
|
_this.curDistance[index] = 2 * _this.liHeight; |
||||||
|
setTimeout(function () { |
||||||
|
_this.movePosition(theSlider, _this.curDistance[index]); |
||||||
|
}, 100); |
||||||
|
|
||||||
|
} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) { |
||||||
|
_this.curDistance[index] = _this.oversizeBorder; |
||||||
|
setTimeout(function () { |
||||||
|
_this.movePosition(theSlider, _this.curDistance[index]); |
||||||
|
}, 100); |
||||||
|
} |
||||||
|
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
_this.clickStatus = false; |
||||||
|
if (_this.cascade) { |
||||||
|
_this.checkRange(index, _this.getIndexArr()); |
||||||
|
} |
||||||
|
break; |
||||||
|
|
||||||
|
case "mousemove": |
||||||
|
event.preventDefault(); |
||||||
|
if (_this.clickStatus) { |
||||||
|
_this.moveY = event.clientY; |
||||||
|
_this.offset = _this.moveY - _this.oldMoveY; |
||||||
|
_this.updateCurDistance(theSlider, index); |
||||||
|
_this.curDistance[index] = _this.curDistance[index] + _this.offset; |
||||||
|
_this.movePosition(theSlider, _this.curDistance[index]); |
||||||
|
_this.oldMoveY = _this.moveY; |
||||||
|
} |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
export default MobileSelect |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
<template> |
||||||
|
<div id="MoreSearch"> |
||||||
|
<div class="content"> |
||||||
|
<Search v-model="searchKey" |
||||||
|
right-text="取消" |
||||||
|
right-text-color="white" |
||||||
|
@notice="$back" |
||||||
|
:isShowRightText="true"/> |
||||||
|
<People v-for="(item,index) in searchFriendsAll" |
||||||
|
:key="item.id" |
||||||
|
mode="search" |
||||||
|
:searchKey="searchKey" |
||||||
|
:people="item"/> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Search from "../../components/Search"; |
||||||
|
import {mapState} from "vuex"; |
||||||
|
import People from "../people/components/People"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "MoreSearch", |
||||||
|
components: { |
||||||
|
Search, |
||||||
|
People |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
searchKey: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState(['friends', 'userinfo']), |
||||||
|
searchFriendsAll() { |
||||||
|
return this.friends.all.filter(v => { |
||||||
|
return v.name.search(this.searchKey) !== -1 || v.account.search(this.searchKey) !== -1 |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created() { |
||||||
|
this.searchKey = this.$route.query.key |
||||||
|
}, |
||||||
|
methods: {} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "@/assets/less/index"; |
||||||
|
|
||||||
|
#MoreSearch { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
overflow: auto; |
||||||
|
color: white; |
||||||
|
font-size: 1.4rem; |
||||||
|
|
||||||
|
.content { |
||||||
|
padding: @padding-page; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import {defineConfig} from 'vite' |
||||||
|
import vue from '@vitejs/plugin-vue' |
||||||
|
import vueJsx from '@vitejs/plugin-vue-jsx' |
||||||
|
import {resolve} from 'path' |
||||||
|
|
||||||
|
function pathResolve(dir) { |
||||||
|
return resolve(__dirname, ".", dir) |
||||||
|
} |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
base: './', |
||||||
|
plugins: [ |
||||||
|
vue(), |
||||||
|
vueJsx(), |
||||||
|
], |
||||||
|
resolve: { |
||||||
|
alias: { |
||||||
|
"@": pathResolve("src"), |
||||||
|
}, |
||||||
|
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] |
||||||
|
}, |
||||||
|
build: { |
||||||
|
sourcemap: false |
||||||
|
} |
||||||
|
}) |
||||||
@ -1,35 +0,0 @@ |
|||||||
// vue.config.js
|
|
||||||
const path = require('path') |
|
||||||
|
|
||||||
const isProduction = process.env.NODE_ENV === 'production' |
|
||||||
|
|
||||||
module.exports = { |
|
||||||
publicPath: isProduction ? '' : '', |
|
||||||
assetsDir: isProduction ? './' : './', |
|
||||||
// productionSourceMap: false,
|
|
||||||
lintOnSave: false, //关闭eslint检查
|
|
||||||
devServer: { |
|
||||||
open: true, |
|
||||||
}, |
|
||||||
// chainWebpack: config => {
|
|
||||||
// config.module
|
|
||||||
// .rule('txt')
|
|
||||||
// .test( /\.(txt|lrc)$/)
|
|
||||||
// .use('raw-loader')
|
|
||||||
// .loader('raw-loader')
|
|
||||||
// .end()
|
|
||||||
// },
|
|
||||||
configureWebpack: { |
|
||||||
module: { |
|
||||||
rules: [ |
|
||||||
{ |
|
||||||
//解析txt、lrc文件
|
|
||||||
test: /\.(txt|lrc)$/, |
|
||||||
exclude: /node_modules/, |
|
||||||
include: path.join(__dirname, 'src'), |
|
||||||
use: ['raw-loader'] |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue