423 lines
9.2 KiB
Plaintext
423 lines
9.2 KiB
Plaintext
diff a/components/uni-popup/uni-popup.vue b/components/uni-popup/uni-popup.vue (rejected hunks)
|
||
@@ -1,131 +1,321 @@
|
||
<template>
|
||
- <view>
|
||
- <view class="popup" v-if="sho">
|
||
- <view class="popup-info">
|
||
- <view style="text-align: center; border-bottom: #D8D8D8 1px solid;">审批流</view>
|
||
- <view style="margin-top: 10px;margin-bottom: 10px;">
|
||
- <view class="textTiem" :class="[actiove==index?'actiove':'']" v-for="(item,index) in Approvallist" :key="index"
|
||
- @click="single(item,index)">
|
||
- {{item.name}}
|
||
- </view>
|
||
- </view>
|
||
- <view class="foorBut">
|
||
- <button type="default" @click="close">关闭</button>
|
||
- <button type="default" @click="determine">确定</button>
|
||
- </view>
|
||
+ <view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']"
|
||
+ @touchmove.stop.prevent="clear">
|
||
+ <uni-transition v-if="maskShow" class="uni-mask--hook" :mode-class="['fade']" :styles="maskClass" :duration="duration"
|
||
+ :show="showTrans" @click="onTap" />
|
||
+ <uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
|
||
+ <view class="uni-popup__wrapper-box" @click.stop="clear">
|
||
+ <slot />
|
||
</view>
|
||
- </view>
|
||
-
|
||
+ </uni-transition>
|
||
+ <!-- #ifdef H5 -->
|
||
+ <keypress v-if="maskShow" @esc="onTap" />
|
||
+ <!-- #endif -->
|
||
</view>
|
||
</template>
|
||
+
|
||
<script>
|
||
+ import popup from './popup.js'
|
||
+ // #ifdef H5
|
||
+ import keypress from './keypress.js'
|
||
+ // #endif
|
||
+ /**
|
||
+ * PopUp 弹出层
|
||
+ * @description 弹出层组件，为了解决遮罩弹层的问题
|
||
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||
+ * @property {String} type = [top|center|bottom] 弹出方式
|
||
+ * @value top 顶部弹出
|
||
+ * @value center 中间弹出
|
||
+ * @value bottom 底部弹出
|
||
+ * @value message 消息提示
|
||
+ * @value dialog 对话框
|
||
+ * @value share 底部分享示例
|
||
+ * @property {Boolean} animation = [ture|false] 是否开启动画
|
||
+ * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
|
||
+ * @event {Function} change 打开关闭弹窗触发，e={show: false}
|
||
+ */
|
||
+
|
||
export default {
|
||
+ name: 'UniPopup',
|
||
+ components: {
|
||
+ // #ifdef H5
|
||
+ keypress
|
||
+ // #endif
|
||
+ },
|
||
props: {
|
||
- // 控制弹框显示隐藏
|
||
- sho: {
|
||
+ // 开启动画
|
||
+ animation: {
|
||
type: Boolean,
|
||
- default: false
|
||
+ default: true
|
||
},
|
||
- // 传过来的数据
|
||
- Approvallist: {
|
||
- type: Array,
|
||
- default: []
|
||
+ // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||
+ // message: 消息提示 ; dialog : 对话框
|
||
+ type: {
|
||
+ type: String,
|
||
+ default: 'center'
|
||
},
|
||
+ // maskClick
|
||
+ maskClick: {
|
||
+ type: Boolean,
|
||
+ default: true
|
||
+ }
|
||
+ },
|
||
+ provide() {
|
||
+ return {
|
||
+ popup: this
|
||
+ }
|
||
+ },
|
||
+ mixins: [popup],
|
||
+ watch: {
|
||
+ /**
|
||
+ * 监听type类型
|
||
+ */
|
||
+ type: {
|
||
+ handler: function(newVal) {
|
||
+ this[this.config[newVal]]()
|
||
+ },
|
||
+ immediate: true
|
||
+ },
|
||
+ isDesktop: {
|
||
+ handler: function(newVal) {
|
||
+ this[this.config[this.type]]()
|
||
+ },
|
||
+ immediate: true
|
||
+ },
|
||
+ /**
|
||
+ * 监听遮罩是否可点击
|
||
+ * @param {Object} val
|
||
+ */
|
||
+ maskClick: {
|
||
+ handler: function(val) {
|
||
+ this.mkclick = val
|
||
+ },
|
||
+ immediate: true
|
||
+ }
|
||
},
|
||
-
|
||
data() {
|
||
return {
|
||
- actiove: null,
|
||
- can: {
|
||
- type:false,
|
||
- nodeId: null
|
||
- }
|
||
+ duration: 300,
|
||
+ ani: [],
|
||
+ showPopup: false,
|
||
+ showTrans: false,
|
||
+ maskClass: {
|
||
+ 'position': 'fixed',
|
||
+ 'bottom': 0,
|
||
+ 'top': 0,
|
||
+ 'left': 0,
|
||
+ 'right': 0,
|
||
+ 'backgroundColor': 'rgba(0, 0, 0, 0.4)'
|
||
+ },
|
||
+ transClass: {
|
||
+ 'position': 'fixed',
|
||
+ 'left': 0,
|
||
+ 'right': 0,
|
||
+ },
|
||
+ maskShow: true,
|
||
+ mkclick: true,
|
||
+ popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
|
||
+ }
|
||
+ },
|
||
+ created() {
|
||
+ this.mkclick = this.maskClick
|
||
+ if (this.animation) {
|
||
+ this.duration = 300
|
||
+ } else {
|
||
+ this.duration = 0
|
||
}
|
||
},
|
||
methods: {
|
||
- close() {
|
||
- this.$emit("close", this.can)
|
||
+ clear(e) {
|
||
+ // TODO nvue 取消冒泡
|
||
+ e.stopPropagation()
|
||
+ },
|
||
+ open() {
|
||
+ this.showPopup = true
|
||
+ this.$nextTick(() => {
|
||
+ new Promise(resolve => {
|
||
+ clearTimeout(this.timer)
|
||
+ this.timer = setTimeout(() => {
|
||
+ this.showTrans = true
|
||
+ // fixed by mehaotian 兼容 app 端
|
||
+ this.$nextTick(() => {
|
||
+ resolve();
|
||
+ })
|
||
+ }, 50);
|
||
+ }).then(res => {
|
||
+ // 自定义打开事件
|
||
+ clearTimeout(this.msgtimer)
|
||
+ this.msgtimer = setTimeout(() => {
|
||
+ this.customOpen && this.customOpen()
|
||
+ }, 100)
|
||
+ this.$emit('change', {
|
||
+ show: true,
|
||
+ type: this.type
|
||
+ })
|
||
+ })
|
||
+ })
|
||
+ },
|
||
+ close(type) {
|
||
+ this.showTrans = false
|
||
+ this.$nextTick(() => {
|
||
+ this.$emit('change', {
|
||
+ show: false,
|
||
+ type: this.type
|
||
+ })
|
||
+ clearTimeout(this.timer)
|
||
+ // 自定义关闭事件
|
||
+ this.customOpen && this.customClose()
|
||
+ this.timer = setTimeout(() => {
|
||
+ this.showPopup = false
|
||
+ }, 300)
|
||
+ })
|
||
+ },
|
||
+ onTap() {
|
||
+ if (!this.mkclick) return
|
||
+ this.close()
|
||
+ },
|
||
+ /**
|
||
+ * 顶部弹出样式处理
|
||
+ */
|
||
+ top() {
|
||
+ this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
|
||
+ this.ani = ['slide-top']
|
||
+ this.transClass = {
|
||
+ 'position': 'fixed',
|
||
+ 'left': 0,
|
||
+ 'right': 0,
|
||
+ }
|
||
},
|
||
- single(obj, index) {
|
||
- // 获取下标，颜色却换
|
||
- this.actiove = index
|
||
- // 返回选择节点ID
|
||
- this.can.nodeId = obj.nodeId
|
||
+ /**
|
||
+ * 底部弹出样式处理
|
||
+ */
|
||
+ bottom() {
|
||
+ this.popupstyle = 'bottom'
|
||
+ this.ani = ['slide-bottom']
|
||
+ this.transClass = {
|
||
+ 'position': 'fixed',
|
||
+ 'left': 0,
|
||
+ 'right': 0,
|
||
+ 'bottom': 0
|
||
+ }
|
||
},
|
||
- determine() {
|
||
- this.$emit("determine", this.can)
|
||
+ /**
|
||
+ * 中间弹出样式处理
|
||
+ */
|
||
+ center() {
|
||
+ this.popupstyle = 'center'
|
||
+ this.ani = ['zoom-out', 'fade']
|
||
+ this.transClass = {
|
||
+ 'position': 'fixed',
|
||
+ /* #ifndef APP-NVUE */
|
||
+ 'display': 'flex',
|
||
+ 'flexDirection': 'column',
|
||
+ /* #endif */
|
||
+ 'bottom': 0,
|
||
+ 'left': 0,
|
||
+ 'right': 0,
|
||
+ 'top': 0,
|
||
+ 'justifyContent': 'center',
|
||
+ 'alignItems': 'center'
|
||
+ }
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
-<style>
|
||
- @charset "UTF-8";
|
||
+<style lang="scss" scoped>
|
||
+ .uni-popup {
|
||
+ position: fixed;
|
||
+ /* #ifndef APP-NVUE */
|
||
+ z-index: 99;
|
||
+ /* #endif */
|
||
+ }
|
||
|
||
- .actiove {
|
||
- color: #2589EE;
|
||
+ .fixforpc-z-index {
|
||
+ /* #ifndef APP-NVUE */
|
||
+ z-index: 999;
|
||
+ /* #endif */
|
||
}
|
||
|
||
- .popup {
|
||
- position: fixed;
|
||
+ .uni-popup__mask {
|
||
+ position: absolute;
|
||
+ top: 0;
|
||
+ bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
+ background-color: $uni-bg-color-mask;
|
||
+ opacity: 0;
|
||
+ }
|
||
+
|
||
+ .mask-ani {
|
||
+ transition-property: opacity;
|
||
+ transition-duration: 0.2s;
|
||
+ }
|
||
+
|
||
+ .uni-top-mask {
|
||
+ opacity: 1;
|
||
+ }
|
||
+
|
||
+ .uni-bottom-mask {
|
||
+ opacity: 1;
|
||
+ }
|
||
+
|
||
+ .uni-center-mask {
|
||
+ opacity: 1;
|
||
+ }
|
||
+
|
||
+ .uni-popup__wrapper {
|
||
+ /* #ifndef APP-NVUE */
|
||
+ display: block;
|
||
+ /* #endif */
|
||
+ position: absolute;
|
||
+ }
|
||
+
|
||
+ .top {
|
||
+ /* #ifdef H5 */
|
||
+ top: var(--window-top);
|
||
+ /* #endif */
|
||
+ /* #ifndef H5 */
|
||
top: 0;
|
||
- height: 100vh;
|
||
- background-color: rgba(0, 0, 0, 0.6);
|
||
- z-index: 9998;
|
||
+ /* #endif */
|
||
}
|
||
|
||
- .popup-info {
|
||
- position: fixed;
|
||
- width: 90%;
|
||
- top: 30%;
|
||
- left: 50%;
|
||
- transform: translate(-50%, -50%);
|
||
- font-size: 30upx;
|
||
- border-radius: 20upx;
|
||
- background-color: #fff;
|
||
- z-index: 9999;
|
||
- padding: 10px;
|
||
- }
|
||
-
|
||
- .foorBut {
|
||
- display: flex;
|
||
- justify-content: center;
|
||
- align-items: center;
|
||
- }
|
||
-
|
||
- .textTiem {
|
||
- width: 100%;
|
||
- height: 20px;
|
||
- line-height: 20px;
|
||
- text-align: center;
|
||
- overflow: hidden;
|
||
- text-overflow: ellipsis;
|
||
- white-space: nowrap
|
||
- }
|
||
-
|
||
- .foorBut button {
|
||
- /* width: 45%;
|
||
- height: 40px; */
|
||
- border-radius: 2px;
|
||
- padding: 0;
|
||
- width: 100px;
|
||
- height: 30px;
|
||
- display: flex;
|
||
- justify-content: center;
|
||
- align-items: center;
|
||
- font-size: 14px;
|
||
- background-color: #008FD4;
|
||
- }
|
||
-
|
||
- .foorBut button:nth-child(1) {
|
||
- border: #007AFF 1px solid;
|
||
- color: #007AFF;
|
||
- background-color: #FFFFFF;
|
||
- }
|
||
-
|
||
- .foorBut button:nth-child(2) {
|
||
- background-color: #007AFF;
|
||
- color: #FFFFFF;
|
||
+ .fixforpc-top {
|
||
+ top: 0;
|
||
+ }
|
||
+
|
||
+ .bottom {
|
||
+ bottom: 0;
|
||
+ }
|
||
+
|
||
+ .uni-popup__wrapper-box {
|
||
+ /* #ifndef APP-NVUE */
|
||
+ display: block;
|
||
+ /* #endif */
|
||
+ position: relative;
|
||
+ /* iphonex 等安全区设置，底部安全区适配 */
|
||
+ /* #ifndef APP-NVUE */
|
||
+ padding-bottom: constant(safe-area-inset-bottom);
|
||
+ padding-bottom: env(safe-area-inset-bottom);
|
||
+ /* #endif */
|
||
+ }
|
||
+
|
||
+ .content-ani {
|
||
+ // transition: transform 0.3s;
|
||
+ transition-property: transform, opacity;
|
||
+ transition-duration: 0.2s;
|
||
+ }
|
||
+
|
||
+
|
||
+ .uni-top-content {
|
||
+ transform: translateY(0);
|
||
+ }
|
||
+
|
||
+ .uni-bottom-content {
|
||
+ transform: translateY(0);
|
||
+ }
|
||
+
|
||
+ .uni-center-content {
|
||
+ transform: scale(1);
|
||
+ opacity: 1;
|
||
}
|
||
</style>
|