仿互站小程序
This commit is contained in:
Drawfans
66
vant/popup/index.js
Normal file
66
vant/popup/index.js
Normal file
@@ -0,0 +1,66 @@
|
||||
var e = require("../common/component"), t = require("../mixins/transition"), i = require("../mixins/safe-area");
|
||||
|
||||
(0, e.VantComponent)({
|
||||
classes: [ "enter-class", "enter-active-class", "enter-to-class", "leave-class", "leave-active-class", "leave-to-class" ],
|
||||
mixins: [ (0, t.transition)(!1), (0, i.safeArea)() ],
|
||||
props: {
|
||||
transition: {
|
||||
type: String,
|
||||
observer: "observeClass"
|
||||
},
|
||||
title: String,
|
||||
titleStyle: String,
|
||||
customStyle: String,
|
||||
overlayStyle: String,
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 100
|
||||
},
|
||||
widthFull: {
|
||||
type: Boolean,
|
||||
value: !1
|
||||
},
|
||||
heightFull: {
|
||||
type: Boolean,
|
||||
value: !1
|
||||
},
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
value: !0
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
value: !0
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
value: "center",
|
||||
observer: "observeClass"
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
value: !0
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
var e = wx.getSystemInfoSync(), t = e.windowHeight, i = e.windowWidth;
|
||||
this.set({
|
||||
windowHeight: t % 2 == 0 ? t : t + 1,
|
||||
windowWidth: i % 2 == 0 ? i : i + 1
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onClickOverlay: function() {
|
||||
this.$emit("click-overlay"), this.data.closeOnClickOverlay && this.$emit("close");
|
||||
},
|
||||
onClickClosable: function() {
|
||||
this.$emit("close");
|
||||
},
|
||||
observeClass: function() {
|
||||
var e = this.data, t = e.transition, i = e.position;
|
||||
this.updateClasses(t || i), "none" === t && this.set({
|
||||
maxHeightduration: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
14
vant/popup/index.json
Normal file
14
vant/popup/index.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-overlay": "../overlay/index",
|
||||
"van-icon": "../icon/index",
|
||||
"forview": "/utils/forview/index",
|
||||
"van-loading": "/vant/loading/index",
|
||||
"van-dialog": "/vant/dialog/index",
|
||||
"van-button": "/vant/button/index",
|
||||
"van-popup": "/vant/popup/index",
|
||||
"van-tab": "/vant/tab/index",
|
||||
"van-tabs": "/vant/tabs/index"
|
||||
}
|
||||
}
|
||||
14
vant/popup/index.wxml
Normal file
14
vant/popup/index.wxml
Normal file
@@ -0,0 +1,14 @@
|
||||
<van-overlay mask bind:click="onClickOverlay" customStyle="{{overlayStyle}}" duration="{{duration}}" show="{{show}}" zIndex="{{zIndex}}" wx:if="{{inited&&overlay}}"></van-overlay>
|
||||
<view bind:transitionend="onTransitionEnd" class="custom-class {{classes}} {{utils.bem( 'popup',[ position,{safe:isIPhoneX&&safeAreaInsetBottom} ] )}}" style="z-index: {{zIndex}}; -webkit-transition-duration:{{currentDuration}}ms; transition-duration:{{currentDuration}}ms; {{display?'':'display: none;'}}{{widthFull?'width:'+windowWidth+'px;':''}}{{customStyle}}" wx:if="{{inited}}">
|
||||
<view class="van-popup__safe-top" style="padding-top: {{statusBarHeight}}px;" wx:if="{{safeAreaInsetTop}}"></view>
|
||||
<view class="van-popup-title" style="{{titleStyle||''}}" wx:if="{{title}}">
|
||||
{{title}}
|
||||
</view>
|
||||
<view bindtap="onClickClosable" class="van-popup-closable" wx:if="{{closable}}">
|
||||
<van-icon customStyle="margin-top:9px" name="cross" size="20px"></van-icon>
|
||||
</view>
|
||||
<view style="{{(heightFull?'height':'max-height')+':'+windowHeight-(title?40:0)+'px;'}}overflow-y:auto;">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
<wxs module="utils" src="../wxs/utils.wxs" />
|
||||
136
vant/popup/index.wxss
Normal file
136
vant/popup/index.wxss
Normal file
@@ -0,0 +1,136 @@
|
||||
@import "../area/index.wxss";
|
||||
|
||||
.van-popup {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
animation: ease both;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.van-popup--center {
|
||||
transform: translate3d(-50%,-50%,0);
|
||||
}
|
||||
|
||||
.van-popup--top {
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translate3d(-50%,0,0);
|
||||
}
|
||||
|
||||
.van-popup--right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translate3d(0,-50%,0);
|
||||
}
|
||||
|
||||
.van-popup--bottom {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translate3d(-50%,0,0);
|
||||
}
|
||||
|
||||
.van-popup--left {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
transform: translate3d(0,-50%,0);
|
||||
}
|
||||
|
||||
.van-popup--bottom.van-popup--safe {
|
||||
padding-bottom: 34px;
|
||||
}
|
||||
|
||||
.van-popup--left .van-popup__safe-top,.van-popup--right .van-popup__safe-top,.van-popup--top .van-popup__safe-top {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.van-popup--bottom .van-popup__safe-top,.van-popup--center .van-popup__safe-top {
|
||||
padding-top: 0!important;
|
||||
}
|
||||
|
||||
.van-scale-enter-active,.van-scale-leave-active {
|
||||
transition-property: opacity,-webkit-transform;
|
||||
transition-property: opacity,transform;
|
||||
transition-property: opacity,transform,-webkit-transform;
|
||||
}
|
||||
|
||||
.van-scale-enter,.van-scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%,-50%,0) scale(.7);
|
||||
}
|
||||
|
||||
.van-fade-enter-active,.van-fade-leave-active {
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.van-fade-enter,.van-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.van-center-enter-active,.van-center-leave-active {
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.van-center-enter,.van-center-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.van-bottom-enter-active,.van-bottom-leave-active,.van-left-enter-active,.van-left-leave-active,.van-right-enter-active,.van-right-leave-active,.van-top-enter-active,.van-top-leave-active {
|
||||
transition-property: transform;
|
||||
transition-property: transform,-webkit-transform;
|
||||
transition-property: transform,-webkit-transform;
|
||||
}
|
||||
|
||||
.van-bottom-enter,.van-bottom-leave-to {
|
||||
transform: translate3d(-50%,100%,0);
|
||||
}
|
||||
|
||||
.van-top-enter,.van-top-leave-to {
|
||||
transform: translate3d(-50%,-100%,0);
|
||||
}
|
||||
|
||||
.van-left-enter,.van-left-leave-to {
|
||||
transform: translate3d(-100%,-50%,0);
|
||||
}
|
||||
|
||||
.van-right-enter,.van-right-leave-to {
|
||||
transform: translate3d(100%,-50%,0);
|
||||
}
|
||||
|
||||
.van-popup .van-popup-closable {
|
||||
z-index: 10000;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: #666;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.van-popup .van-popup-title {
|
||||
z-index: 10000;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background: #F8F8F8;
|
||||
color: #333;
|
||||
height: 39px;
|
||||
padding: 0 12px;
|
||||
line-height: 39px;
|
||||
overflow: hidden;
|
||||
}
|
||||
Reference in New Issue
Block a user