mand-mobile
Version:
A Vue.js 2.0 Mobile UI Toolkit
383 lines (336 loc) • 11.7 kB
JavaScript
;(function(){
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(['exports', '../license-plate-keyboard', '../license-plate-input', '../popup', '../popup/title-bar', './util', '../_style/global.css', './style/index.css'], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require('../license-plate-keyboard'), require('../license-plate-input'), require('../popup'), require('../popup/title-bar'), require('./util'), require('../_style/global.css'), require('./style/index.css'));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.licensePlateKeyboard, global.licensePlateInput, global.popup, global.titleBar, global.util, global.global, global.index);
global.index = mod.exports;
}
})(this, function (exports, _licensePlateKeyboard, _licensePlateInput, _popup, _titleBar, _util) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _licensePlateKeyboard2 = _interopRequireDefault(_licensePlateKeyboard);
var _licensePlateInput2 = _interopRequireDefault(_licensePlateInput);
var _popup2 = _interopRequireDefault(_popup);
var _titleBar2 = _interopRequireDefault(_titleBar);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
var _components;
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
exports.default = {
name: 'md-license-plate',
components: (_components = {}, _defineProperty(_components, _licensePlateKeyboard2.default.name, _licensePlateKeyboard2.default), _defineProperty(_components, _licensePlateInput2.default.name, _licensePlateInput2.default), _defineProperty(_components, _popup2.default.name, _popup2.default), _defineProperty(_components, _titleBar2.default.name, _titleBar2.default), _components),
props: {
shortcuts: {
type: Array,
default: function _default() {
return ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼', '川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新', '藏'];
}
},
letterData: {
type: Array,
default: function _default() {
return [{
value: 'Q',
disabled: false
}, {
value: 'W',
disabled: false
}, {
value: 'E',
disabled: false
}, {
value: 'R',
disabled: false
}, {
value: 'T',
disabled: false
}, {
value: 'Y',
disabled: false
}, {
value: 'U',
disabled: false
}, {
value: 'I',
disabled: true
}, {
value: 'O',
disabled: true
}, {
value: 'P',
disabled: false
}, {
value: 'A',
disabled: false
}, {
value: 'S',
disabled: false
}, {
value: 'D',
disabled: false
}, {
value: 'F',
disabled: false
}, {
value: 'G',
disabled: false
}, {
value: 'H',
disabled: false
}, {
value: 'J',
disabled: false
}, {
value: 'K',
disabled: false
}, {
value: 'L',
disabled: false
}, {
value: 'Z',
disabled: false
}, {
value: 'X',
disabled: false
}, {
value: 'C',
disabled: false
}, {
value: 'V',
disabled: false
}, {
value: 'B',
disabled: false
}, {
value: 'N',
disabled: false
}, {
value: 'M',
disabled: false
}];
}
},
modeShow: {
type: String,
default: 'division'
},
showPopUp: {
type: Boolean,
default: false
},
title: {
type: String,
default: '请输入车牌号码'
},
subtitle: {
type: String,
default: ''
},
defaultValue: {
type: String,
default: ''
},
disorderClick: {
type: Boolean,
default: true
}
},
data: function data() {
return {
numbers: [{
value: 1,
disabled: false
}, {
value: 2,
disabled: false
}, {
value: 3,
disabled: false
}, {
value: 4,
disabled: false
}, {
value: 5,
disabled: false
}, {
value: 6,
disabled: false
}, {
value: 7,
disabled: false
}, {
value: 8,
disabled: false
}, {
value: 9,
disabled: false
}, {
value: 0,
disabled: false
}],
keyArray: ['', '', '', '', '', '', '', ''],
selectedIndex: 0,
showDivisionKeyboard: false,
inputViewId: (0, _util.unique)() + '_divisionInput',
keyboardViewId: (0, _util.unique)() + '_divisionKeyboard'
};
},
computed: {
dyCurrentIndex: function dyCurrentIndex() {
return this.selectedIndex;
},
dyKeyboard: function dyKeyboard() {
var numbers = [],
shortcuts = [],
letterData = [],
keyboardType = void 0,
mixedKeyboard = [];
shortcuts = this.shortcuts;
if (this.dyCurrentIndex === 0) {
keyboardType = 1;
} else {
keyboardType = 2;
letterData = JSON.parse(JSON.stringify(this.letterData));
letterData.splice(19, 0, {
type: 'delete',
disabled: false
});
letterData.push({
type: 'confirm',
text: '确定',
disabled: false
});
numbers = this.numbers;
if (this.selectedIndex === 1) {
numbers = this.numbers.map(function (item) {
return {
value: item.value,
disabled: true
};
});
}
mixedKeyboard = numbers.concat(letterData);
}
return {
shortcuts: shortcuts,
mixedKeyboard: mixedKeyboard,
keyboardType: keyboardType
};
},
keyArrayCopy: function keyArrayCopy() {
return this.keyArray.map(function (item) {
if (item) {
return item;
} else {
return ' ';
}
});
}
},
created: function created() {
(0, _util.directiveInit)();
},
methods: {
keyMapping: function keyMapping(index) {
if (!this.showDivisionKeyboard) {
this.showDivisionKeyboard = true;
this.$emit('sdKeyboard', this.keyboardViewId);
}
if (!this.disorderClick && !this.keyArray[index + 1] && !this.keyArray[index - 1] && index > 0) {
return;
}
this.selectedIndex = index;
},
$_onHide: function $_onHide() {
this.$emit('hide');
},
$_onEnter: function $_onEnter(value) {
this.$set(this.keyArray, this.selectedIndex, value);
if (this.selectedIndex === this.keyArray.length - 1) {
this.$_onConfirm();
} else {
this.selectedIndex = this.selectedIndex + 1;
}
},
$_onDelete: function $_onDelete() {
this.$set(this.keyArray, this.selectedIndex, '');
if (this.selectedIndex <= 0) {
if (this.modeShow === 'division') {
this.hideDivisionKeyboard();
}
} else {
this.selectedIndex = this.selectedIndex - 1;
}
},
$_onConfirm: function $_onConfirm() {
if (this.modeShow === 'division') {
this.hideDivisionKeyboard();
}
this.$emit('confirm', this.keyArrayCopy.join(''));
},
hideDivisionKeyboard: function hideDivisionKeyboard(e) {
var isKeyboard = false;
if (e && e.target) {
isKeyboard = (0, _util.queryCurParentNode)(e.target, [this.keyboardViewId, this.inputViewId]);
}
if (this.showDivisionKeyboard && !isKeyboard) {
this.showDivisionKeyboard = false;
this.$emit('hdKeyboard', this.keyArrayCopy.join(''));
}
}
},
mounted: function mounted() {
this.modeShow === 'division' && document.addEventListener('click', this.hideDivisionKeyboard);
},
beforeDestroy: function beforeDestroy() {
this.modeShow === 'division' && document.removeEventListener('click', this.hideDivisionKeyboard);
},
watch: {
defaultValue: {
handler: function handler(newVal) {
if (newVal !== '') {
var defaultValueArray = this.defaultValue.split('');
var keyArrayCopy = JSON.parse(JSON.stringify(this.keyArray));
keyArrayCopy.forEach(function (item, index) {
if (defaultValueArray[index]) {
keyArrayCopy[index] = defaultValueArray[index];
} else {
keyArrayCopy[index] = '';
}
});
this.keyArray = keyArrayCopy;
}
},
immediate: true
}
}
};
});
})()
if (module.exports.__esModule) module.exports = module.exports.default
var __vue__options__ = (typeof module.exports === "function"? module.exports.options: module.exports)
__vue__options__.render = function render () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"md-license-plate"},[(_vm.modeShow === 'division')?_c('div',[_c('div',{staticClass:"md-license-plate-input-container division",attrs:{"id":_vm.inputViewId}},[_c('md-license-plate-input',{attrs:{"keyArray":_vm.keyArray,"selectedIndex":_vm.dyCurrentIndex},on:{"keyMapping":_vm.keyMapping}})],1),_vm._v(" "),(_vm.showDivisionKeyboard)?_c('div',{staticClass:"md-license-plate-keyboard-container division",attrs:{"id":_vm.keyboardViewId}},[_c('md-license-plate-keyboard',{attrs:{"keyboard":_vm.dyKeyboard},on:{"enter":_vm.$_onEnter,"delete":_vm.$_onDelete,"confirm":_vm.$_onConfirm}})],1):_vm._e()]):_vm._e(),_vm._v(" "),(_vm.modeShow === 'popUp')?_c('div',[_c('md-popup',{attrs:{"value":_vm.showPopUp,"hasMask":true,"position":"bottom","maskClosable":false}},[_c('md-popup-title-bar',{attrs:{"only-close":"","large-radius":"","title":_vm.title,"describe":_vm.subtitle,"title-align":"left"},on:{"cancel":_vm.$_onHide}}),_vm._v(" "),_c('div',{staticClass:"md-popup-content"},[_c('div',{staticClass:"md-license-plate-input-container popUp"},[_c('md-license-plate-input',{attrs:{"keyArray":_vm.keyArray,"selectedIndex":_vm.dyCurrentIndex},on:{"keyMapping":_vm.keyMapping}})],1),_vm._v(" "),_c('div',{staticClass:"md-license-plate-keyboard-container popUp"},[_c('md-license-plate-keyboard',{attrs:{"keyboard":_vm.dyKeyboard},on:{"enter":_vm.$_onEnter,"delete":_vm.$_onDelete,"confirm":_vm.$_onConfirm}})],1)])],1)],1):_vm._e()])}
__vue__options__.staticRenderFns = []