zyronon
4 years ago
64 changed files with 1286 additions and 13173 deletions
@ -1,5 +0,0 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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