mand-mobile
Version:
A Vue.js 2.0 Mobile UI Toolkit
278 lines (256 loc) • 11.7 kB
JavaScript
;(function(){
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(['exports', '../dialog', '../popup', '../popup/title-bar', '../codebox', '../button', '../_util', '../_locale', '../_style/global.css', './style/index.css'], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require('../dialog'), require('../popup'), require('../popup/title-bar'), require('../codebox'), require('../button'), require('../_util'), require('../_locale'), require('../_style/global.css'), require('./style/index.css'));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.dialog, global.popup, global.titleBar, global.codebox, global.button, global._util, global._locale, global.global, global.index);
global.index = mod.exports;
}
})(this, function (exports, _dialog, _popup, _titleBar, _codebox, _button, _util, _locale) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _dialog2 = _interopRequireDefault(_dialog);
var _popup2 = _interopRequireDefault(_popup);
var _titleBar2 = _interopRequireDefault(_titleBar);
var _codebox2 = _interopRequireDefault(_codebox);
var _button2 = _interopRequireDefault(_button);
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-captcha',
components: (_components = {}, _defineProperty(_components, _dialog2.default.name, _dialog2.default), _defineProperty(_components, _popup2.default.name, _popup2.default), _defineProperty(_components, _titleBar2.default.name, _titleBar2.default), _defineProperty(_components, _codebox2.default.name, _codebox2.default), _defineProperty(_components, _button2.default.name, _button2.default), _components),
props: {
title: {
type: String
},
subtitle: {
type: String
},
brief: {
type: String,
default: ''
},
value: {
type: Boolean,
default: false
},
maxlength: {
type: [Number, String],
default: 4
},
mask: {
type: Boolean,
default: false
},
system: {
type: Boolean,
default: false
},
autoSend: {
type: Boolean,
default: true
},
autoCountdown: {
type: Boolean,
default: true
},
appendTo: {
default: function _default() {
return _util.mdDocument.body;
}
},
count: {
type: Number,
default: 60
},
countNormalText: {
type: String,
default: (0, _locale.t)('md.captcha.sendCaptcha')
},
countActiveText: {
type: String,
default: (0, _locale.t)('md.captcha.countdown')
},
isView: {
type: Boolean,
default: false
},
type: {
type: String,
default: 'dialog'
},
inputType: {
type: String,
default: 'tel'
},
disableSend: {
type: Boolean,
default: false
}
},
data: function data() {
return {
code: '',
visible: false,
errorMsg: '',
isCounting: false,
firstShown: false,
countBtnText: this.countNormalText,
isKeyboard: false,
originHeight: 0
};
},
watch: {
value: function value(val) {
if (val) {
this.code = '';
if (!this.firstShown) {
this.firstShown = true;
this.$_emitSend();
}
}
},
code: function code(val) {
if (val && this.errorMsg) {
this.errorMsg = '';
}
}
},
computed: {
isInline: function isInline() {
return this.isView || this.type === 'inline';
},
isShowErrorStyle: function isShowErrorStyle() {
return this.errorMsg !== '' && !this.disableSend;
}
},
mounted: function mounted() {
if (this.judgeDeviceType().isAndroid && this.type === 'halfScreen') {
this.originHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize', this.listenResize, false);
}
if (this.appendTo && !this.isInline) {
this.appendTo.appendChild(this.$el);
}
if (this.value || this.isInline) {
this.firstShown = true;
this.$_emitSend();
}
},
beforeDestroy: function beforeDestroy() {
if (this.judgeDeviceType().isAndroid && this.type === 'halfScreen') {
window.removeEventListener('resize', this.listenResize);
}
if (this.appendTo && !this.isInline) {
this.appendTo.removeChild(this.$el);
}
},
methods: {
$_onInput: function $_onInput(val) {
this.$emit('input', val);
},
$_onShow: function $_onShow() {
this.visible = true;
this.$refs.codebox.focus();
this.$emit('show');
},
$_onHide: function $_onHide() {
this.visible = false;
this.$refs.codebox.blur();
this.$emit('hide');
},
$_onSubmit: function $_onSubmit(code) {
this.$emit('submit', code);
},
$_onResend: function $_onResend() {
if (this.autoCountdown) {
this.countdown();
}
this.$emit('send', this.countdown);
},
$_emitSend: function $_emitSend() {
this.autoSend && this.$_onResend();
},
listenResize: function listenResize() {
var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (this.originHeight < resizeHeight) {
this.isKeyboard = false;
} else {
this.isKeyboard = true;
}
this.originHeight = resizeHeight;
},
judgeDeviceType: function judgeDeviceType() {
var ua = window.navigator.userAgent.toLocaleLowerCase();
var isIOS = /iphone|ipad|ipod/.test(ua);
var isAndroid = /android/.test(ua);
return {
isIOS: isIOS,
isAndroid: isAndroid
};
},
countdown: function countdown() {
var _this = this;
if (!this.count) {
return;
}
clearInterval(this.__counter__);
var timestamp = Date.now();
var i = this.count;
this.isCounting = true;
this.countBtnText = this.countActiveText.replace('{$1}', i);
this.__counter__ = setInterval(function () {
if (i <= 1) {
_this.resetcount();
} else {
i = _this.count - Math.floor((Date.now() - timestamp) / 1000);
_this.countBtnText = _this.countActiveText.replace('{$1}', i);
}
}, 1000);
},
resetcount: function resetcount() {
this.isCounting = false;
this.countBtnText = this.countNormalText;
clearInterval(this.__counter__);
},
setError: function setError(msg) {
var _this2 = this;
this.$nextTick(function () {
_this2.errorMsg = msg;
});
},
close: function close() {
this.$emit('input', false);
}
}
};
});
})()
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',{directives:[{name:"show",rawName:"v-show",value:(_vm.isInline || _vm.value || _vm.visible),expression:"isInline || value || visible"}],staticClass:"md-captcha"},[(_vm.isInline)?[_c('div',{staticClass:"md-captcha-content"},[(_vm.title)?_c('h2',{staticClass:"md-captcha-title",domProps:{"textContent":_vm._s(_vm.title)}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"md-captcha-message"},[_vm._t("default")],2)]),_vm._v(" "),_c('md-codebox',{ref:"codebox",attrs:{"maxlength":_vm.maxlength,"system":_vm.system,"mask":_vm.mask,"closable":false,"isView":true,"justify":true,"autofocus":false,"input-type":_vm.inputType},on:{"submit":_vm.$_onSubmit},model:{value:(_vm.code),callback:function ($$v) {_vm.code=$$v},expression:"code"}},[_c('footer',{staticClass:"md-captcha-footer"},[(_vm.errorMsg)?_c('div',{staticClass:"md-captcha-error",domProps:{"textContent":_vm._s(_vm.errorMsg)}}):_c('div',{staticClass:"md-captcha-brief",domProps:{"textContent":_vm._s(_vm.brief)}}),_vm._v(" "),(_vm.count)?_c('button',{staticClass:"md-captcha-btn",attrs:{"disabled":this.isCounting},domProps:{"textContent":_vm._s(_vm.countBtnText)},on:{"click":_vm.$_onResend}}):_vm._e()])])]:_vm._e(),_vm._v(" "),(_vm.type === 'halfScreen')?[_c('md-popup',{attrs:{"value":_vm.value,"hasMask":true,"position":"bottom","maskClosable":false},on:{"input":_vm.$_onInput,"show":_vm.$_onShow,"hide":_vm.$_onHide}},[_c('div',{staticClass:"md-captcha-half-container"},[_c('md-popup-title-bar',{attrs:{"only-close":"","large-radius":"","title":_vm.title,"describe":_vm.subtitle,"title-align":"left"},on:{"cancel":_vm.close}}),_vm._v(" "),_c('div',{staticClass:"md-captcha-half-content"},[_vm._t("default")],2),_vm._v(" "),_c('md-codebox',{ref:"codebox",attrs:{"maxlength":_vm.maxlength,"system":_vm.system,"mask":_vm.mask,"disabled":_vm.disableSend,"closable":false,"isView":true,"justify":true,"autofocus":false,"input-type":_vm.inputType,"isErrorStyle":_vm.isShowErrorStyle},on:{"submit":_vm.$_onSubmit},model:{value:(_vm.code),callback:function ($$v) {_vm.code=$$v},expression:"code"}},[_c('footer',{staticClass:"md-captcha-footer",class:{ halfStyle: _vm.isKeyboard }},[(_vm.errorMsg)?_c('div',{staticClass:"md-captcha-error",domProps:{"textContent":_vm._s(_vm.errorMsg)}}):_c('div',{staticClass:"md-captcha-brief",domProps:{"textContent":_vm._s(_vm.brief)}}),_vm._v(" "),(_vm.count)?_c('button',{staticClass:"md-captcha-btn",class:[_vm.disableSend && 'is-disabled-send'],attrs:{"disabled":this.isCounting},domProps:{"textContent":_vm._s(_vm.countBtnText)},on:{"click":_vm.$_onResend}}):_vm._e()])])],1)])]:_vm._e(),_vm._v(" "),(_vm.type === 'dialog')?[_c('md-dialog',{attrs:{"value":_vm.value,"closable":true,"appendTo":false,"position":"center"},on:{"input":_vm.$_onInput,"show":_vm.$_onShow,"hide":_vm.$_onHide}},[_c('div',{staticClass:"md-captcha-content"},[(_vm.title)?_c('h2',{staticClass:"md-captcha-title",domProps:{"textContent":_vm._s(_vm.title)}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"md-captcha-message"},[_vm._t("default")],2)]),_vm._v(" "),_c('md-codebox',{ref:"codebox",attrs:{"maxlength":_vm.maxlength,"system":_vm.system,"closable":false,"mask":_vm.mask,"justify":true,"autofocus":false,"input-type":_vm.inputType},on:{"submit":_vm.$_onSubmit},model:{value:(_vm.code),callback:function ($$v) {_vm.code=$$v},expression:"code"}},[_c('footer',{staticClass:"md-captcha-footer"},[(_vm.errorMsg)?_c('div',{staticClass:"md-captcha-error",domProps:{"textContent":_vm._s(_vm.errorMsg)}}):_c('div',{staticClass:"md-captcha-brief",domProps:{"textContent":_vm._s(_vm.brief)}}),_vm._v(" "),(_vm.count)?_c('button',{staticClass:"md-captcha-btn",attrs:{"disabled":this.isCounting},domProps:{"textContent":_vm._s(_vm.countBtnText)},on:{"click":_vm.$_onResend}}):_vm._e()])])],1)]:_vm._e()],2)}
__vue__options__.staticRenderFns = []