UNPKG

mand-mobile

Version:

A Vue.js 2.0 Mobile UI Toolkit

216 lines (202 loc) 7.19 kB
;(function(){ (function (global, factory) { if (typeof define === "function" && define.amd) { define(['exports', '../number-keyboard', '../_style/global.css', './style/index.css'], factory); } else if (typeof exports !== "undefined") { factory(exports, require('../number-keyboard'), require('../_style/global.css'), require('./style/index.css')); } else { var mod = { exports: {} }; factory(mod.exports, global.numberKeyboard, global.global, global.index); global.index = mod.exports; } })(this, function (exports, _numberKeyboard) { 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _numberKeyboard2 = _interopRequireDefault(_numberKeyboard); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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-codebox', components: _defineProperty({}, _numberKeyboard2.default.name, _numberKeyboard2.default), props: { value: { type: String, default: '' }, maxlength: { type: [Number, String], default: 4 }, autofocus: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, justify: { type: Boolean, default: false }, mask: { type: Boolean, default: false }, closable: { type: Boolean, default: true }, system: { type: Boolean, default: false }, okText: { type: String }, disorder: { type: Boolean, default: false }, isView: { type: Boolean, default: false }, inputType: { type: String, default: 'tel' } }, data: function data() { return { code: '', focused: this.autofocus }; }, watch: { value: { immediate: true, handler: function handler(val) { if (val !== this.code) { this.code = val; } } } }, computed: { num: function num() { return Math.abs(parseInt(this.maxlength, 10)) || 1; } }, mounted: function mounted() { if (this.closable) { document.addEventListener('click', this.$_handleOutClick); } if (!this.system && !this.isView) { document.body.appendChild(this.$refs.keyboard.$el); } }, beforeDestroy: function beforeDestroy() { if (this.closable) { document.removeEventListener('click', this.$_handleOutClick); } if (this.focused) { this.blur(); } if (!this.system && !this.isView) { document.body.removeChild(this.$refs.keyboard.$el); } }, methods: { $_handleOutClick: function $_handleOutClick(e) { if (!this.$el.contains(e.target)) { this.focused = false; } }, $_onInputChange: function $_onInputChange(e) { if (this.maxlength < 0 || e.target.value.length <= this.maxlength) { this.code = e.target.value; } if (this.code.length === this.maxlength) { this.$emit('submit', this.code); } this.$emit('input', this.code); }, $_onSubmit: function $_onSubmit(e) { e.preventDefault(); this.$emit('submit', this.code); }, $_onEnter: function $_onEnter(val) { if ((this.maxlength < 0 || this.code.length < this.maxlength) && val !== '.') { this.code += val; } if (this.code.length === this.maxlength) { this.$nextTick(function () { this.$emit('submit', this.code); }); } this.$emit('input', this.code); }, $_onDelete: function $_onDelete() { this.code = this.code.slice(0, this.code.length - 1); this.$emit('input', this.code); }, $_onConfirm: function $_onConfirm() { this.$emit('submit', this.code); }, blur: function blur() { this.focused = false; if (this.system) { this.$refs.input.blur(); } }, focus: function focus() { if (this.disabled) { return; } this.focused = true; if (this.system) { this.$refs.input.focus(); } }, $_nativeBlur: function $_nativeBlur() { this.$emit('blur'); }, $_nativeFocus: function $_nativeFocus() { this.$emit('focus'); } } }; }); })() 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-codebox-wrapper"},[_c('div',{staticClass:"md-codebox",class:{ 'is-disabled': _vm.disabled, 'is-justify': _vm.justify },on:{"click":_vm.focus}},[(_vm.maxlength > 0)?_vm._l((_vm.num),function(i){return _c('span',{key:i,class:[ 'md-codebox-box', (i === _vm.code.length + 1) && _vm.focused && 'is-active', _vm.code.charAt(i-1) !== '' && 'is-filled' ]},[(_vm.code.charAt(i-1))?[(_vm.mask)?[_c('i',{staticClass:"md-codebox-dot"})]:[_vm._v("\n "+_vm._s(_vm.code.charAt(i-1))+"\n ")]]:_vm._e(),_vm._v(" "),(i === _vm.code.length + 1 && _vm.focused)?[_c('i',{staticClass:"md-codebox-blink"})]:_vm._e()],2)}):[(_vm.mask)?_c('input',{class:['md-codebox-holder', _vm.focused && 'is-active'],attrs:{"type":"password","maxlength":_vm.maxlength,"readonly":"","disabled":""},domProps:{"value":_vm.code}}):_c('input',{class:['md-codebox-holder', _vm.focused && 'is-active'],attrs:{"type":_vm.inputType,"maxlength":_vm.maxlength,"readonly":"","disabled":""},domProps:{"value":_vm.code}})]],2),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('form',{directives:[{name:"show",rawName:"v-show",value:(_vm.system),expression:"system"}],attrs:{"action":""},on:{"submit":_vm.$_onSubmit}},[_c('input',{ref:"input",staticClass:"md-codebox-input",attrs:{"type":_vm.inputType,"maxlength":_vm.maxlength},domProps:{"value":_vm.code},on:{"input":_vm.$_onInputChange,"focus":_vm.$_nativeFocus,"blur":_vm.$_nativeBlur}})]),_vm._v(" "),_c('md-number-keyboard',{directives:[{name:"show",rawName:"v-show",value:(!_vm.system),expression:"!system"}],ref:"keyboard",staticClass:"md-codebox-keyboard",attrs:{"type":_vm.maxlength > 0 ? 'simple' : 'professional',"okText":_vm.okText,"disorder":_vm.disorder,"is-view":_vm.isView},on:{"delete":_vm.$_onDelete,"enter":_vm.$_onEnter,"confirm":_vm.$_onConfirm},model:{value:(_vm.focused),callback:function ($$v) {_vm.focused=$$v},expression:"focused"}})],2)} __vue__options__.staticRenderFns = []