wux-weapp/packages/lib/popup/index.js

一套组件化、可复用、易扩展的微信小程序 UI 组件库

"use strict";var _baseComponent=_interopRequireDefault(require("../helpers/baseComponent")),_classNames2=_interopRequireDefault(require("../helpers/libs/classNames")),_styleToCssString=_interopRequireDefault(require("../helpers/libs/styleToCssString")),_safeAreaBehavior=require("../helpers/mixins/safeAreaBehavior"),_index=require("../index");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function ownKeys(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,o)}return n}function _objectSpread(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(n,!0).forEach(function(e){_defineProperty(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ownKeys(n).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(0,_baseComponent.default)({externalClasses:["wux-content-class","wux-header-class","wux-body-class","wux-footer-class","wux-close-class"],properties:_objectSpread({prefixCls:{type:String,value:"wux-popup"},animationPrefixCls:{type:String,value:"wux-animate"},title:{type:String,value:""},content:{type:String,value:""},extra:{type:String,value:""},position:{type:String,value:"center",observer:"getTransitionName"},wrapStyle:{type:[String,Object],value:"",observer:function(e){this.updateStyle(e,"popupWrapStyle")}},containerStyle:{type:[String,Object],value:"",observer:function(e){this.updateStyle(e,"popupContainerStyle")}},contentStyle:{type:[String,Object],value:"",observer:function(e){this.updateStyle(e,"popupContentStyle")}},bodyStyle:{type:[String,Object],value:"",observer:function(e){this.updateStyle(e,"popupBodyStyle")}},closable:{type:Boolean,value:!1},mask:{type:Boolean,value:!0},maskClosable:{type:Boolean,value:!0},visible:{type:Boolean,value:!1,observer:"setPopupVisible"},zIndex:{type:Number,value:1e3},hasHeader:{type:Boolean,value:!0},hasFooter:{type:Boolean,value:!0},mountOnEnter:{type:Boolean,value:!0},unmountOnExit:{type:Boolean,value:!0}},_safeAreaBehavior.safeAreaProps),data:{transitionName:"",popupVisible:!1,popupWrapStyle:"",popupContainerStyle:"",popupContentStyle:"",popupBodyStyle:""},computed:{classes:["prefixCls, position",function(e,t){return{wrap:(0,_classNames2.default)("".concat(e,"-position"),_defineProperty({},"".concat(e,"-position--").concat(t),t)),content:"".concat(e,"__content"),hd:"".concat(e,"__hd"),title:"".concat(e,"__title"),bd:"".concat(e,"__bd"),ft:"".concat(e,"__ft"),extra:"".concat(e,"__extra"),close:"".concat(e,"__close"),x:"".concat(e,"__close-x")}}]},methods:{updateStyle:function(e,t){var n=(0,_styleToCssString.default)(e);this.data[t]!==n&&this.setData(_defineProperty({},t,n))},close:function(){this.triggerEvent("close")},onMaskClick:function(){this.data.maskClosable&&this.close()},onEnter:function(){this.triggerEvent("show")},onEntered:function(){this.triggerEvent("showed")},onExited:function(){this.triggerEvent("closed")},getTransitionName:function(e){var t=0<arguments.length&&void 0!==e?e:this.data.position,n=this.data.animationPrefixCls,o="";switch(t){case"top":o="".concat(n,"--slideInDown");break;case"right":o="".concat(n,"--slideInRight");break;case"bottom":o="".concat(n,"--slideInUp");break;case"left":o="".concat(n,"--slideInLeft");break;default:o="".concat(n,"--fadeIn")}this.setData({transitionName:o})},setPopupVisible:function(e){this.data.popupVisible!==e&&(this.setData({popupVisible:e}),this.setBackdropVisible(e))},setBackdropVisible:function(e){this.data.mask&&this.$wuxBackdrop&&this.$wuxBackdrop[e?"retain":"release"]()}},created:function(){this.data.mask&&(this.$wuxBackdrop=(0,_index.$wuxBackdrop)("#wux-backdrop",this))},attached:function(){this.setPopupVisible(this.data.visible),this.getTransitionName()}});