diff --git a/README.md b/README.md index 83b6ed9..074a110 100644 --- a/README.md +++ b/README.md @@ -20,13 +20,13 @@ import Vodal from 'vodal'; Vue.component(Vodal.name, Vodal); export default { - name: 'app', + name: 'app', - data() { - return { - show: false - } + data() { + return { + show: false } + } } ``` @@ -46,9 +46,19 @@ measure|string|px|measure of width and height show|bool|false|whether to show dialog mask|bool|true|whether to show mask closeButton|bool|true|whether to show close button +closeOnEsc|bool|false|whether close dialog when esc pressed +closeOnClickMask|bool|true|whether close dialog when mask clicked animation|string|zoom|animation type duration|number|300|animation duration className|string|/|className for the container +customStyles|object|/|custom dialog styles +customMaskStyles|object|/|custom mask styles + +## Event +Name| +---|--- +hide|triggers when dialog will hide +clickMask|triggers when mask clicked ## Animation Types * zoom diff --git a/dist/index.js b/dist/index.js index ec9915a..a29572f 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1 +1 @@ -module.exports=function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="dist/",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),r=function(e){return e&&e.__esModule?e:{default:e}}(o);t.default=r.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o={name:"vodal",props:{show:{type:Boolean,required:!0},width:{type:Number,default:400},height:{type:Number,default:240},duration:{type:Number,default:300},measure:{type:String,default:"px"},animation:{type:String,default:"zoom"},mask:{type:Boolean,default:!0},closeButton:{type:Boolean,default:!0},className:{type:String,default:""}},computed:{style:function(){return{animationDuration:this.duration+"ms"}},dialogStyle:function(){return{width:this.width+this.measure,height:this.height+this.measure,animationDuration:this.duration+"ms"}}},watch:{show:function(e){var t=this;e&&this.$nextTick(function(){t.$el.focus()})}}},r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"vodal-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.show,expression:"show"}],class:["vodal",e.className],style:e.style,attrs:{tabindex:"-1"},on:{keyup:function(t){if(!("button"in t)&&e._k(t.keyCode,"esc",27))return null;e.show&&e.$emit("hide")}}},[e.mask?n("div",{staticClass:"vodal-mask",on:{click:function(t){e.$emit("hide")}}}):e._e(),e._v(" "),n("transition",{attrs:{name:"vodal-"+e.animation}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.show,expression:"show"}],staticClass:"vodal-dialog",style:e.dialogStyle},[e.closeButton?n("span",{staticClass:"vodal-close",on:{click:function(t){e.$emit("hide")}}}):e._e(),e._v(" "),e._t("default")],2)])],1)])},i=[],s={render:r,staticRenderFns:i},a=s,u=n(2),l=u(o,a,null,null,null);t.default=l.exports},function(e,t){e.exports=function(e,t,n,o,r){var i,s=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(i=e,s=e.default);var u="function"==typeof s?s.options:s;t&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns),o&&(u._scopeId=o);var l;if(r?(l=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(r)},u._ssrRegister=l):n&&(l=n),l){var d=u.functional,c=d?u.render:u.beforeCreate;d?u.render=function(e,t){return l.call(t),c(e,t)}:u.beforeCreate=c?[].concat(c,l):[l]}return{esModule:i,exports:s,options:u}}}]); \ No newline at end of file +module.exports=function(e){function t(o){if(n[o])return n[o].exports;var s=n[o]={i:o,l:!1,exports:{}};return e[o].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="dist/",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),s=function(e){return e&&e.__esModule?e:{default:e}}(o);t.default=s.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t -
-
+
+
@@ -49,9 +49,25 @@ export default { type: Boolean, default: true }, + closeOnEsc: { + type: Boolean, + default: false + }, + closeOnClickMask: { + type: Boolean, + default: false + }, className: { type: String, default: '' + }, + customStyles: { + type: Object, + default: () => ({}) + }, + customMaskStyles: { + type: Object, + default: () => ({}) } }, @@ -65,16 +81,28 @@ export default { return { width: this.width + this.measure, height: this.height + this.measure, - animationDuration: `${this.duration}ms` + animationDuration: `${this.duration}ms`, + ...this.customStyles } } }, watch: { - show(show) { - show && this.$nextTick(() => { + show(isShow) { + isShow && this.$nextTick(() => { this.$el.focus(); }) + }, + onEsc() { + if (this.show && this.closeOnEsc) { + this.$emit('hide'); + } + }, + onClickMask() { + this.$emit('clickMask'); + if (this.closeOnClickMask) { + this.$emit('hide'); + } } } }