From 945d71b3bc4b42e28cdca08ce7acf59e45923308 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期五, 16 四月 2021 14:38:08 +0800
Subject: [PATCH] 弹框组件
---
src/components/layer/src/layer.vue | 126 ++++++++++++++++++++++++++++++++---------
1 files changed, 97 insertions(+), 29 deletions(-)
diff --git a/src/components/layer/src/layer.vue b/src/components/layer/src/layer.vue
index 1ef2000..b29753a 100644
--- a/src/components/layer/src/layer.vue
+++ b/src/components/layer/src/layer.vue
@@ -1,46 +1,114 @@
-<template lang="html">
- <component :options="this.$data" :is="getActiveName"></component>
+<template>
+ <div class="public-bounced map-background" v-drag>
+ <div class="public-bounced-title panel-title" ref="publicBounced">
+ <span>{{title}}</span>
+ <i class="el-icon-circle-close" @click="close"></i>
+ </div>
+ <div class="public-bounced-content" :id="id">
+ </div>
+ </div>
</template>
<script>
-import pzpage from './page.vue'
-import pziframe from './iframe.vue'
+import helper from './helper/helper.js'
export default {
data () {
return {
- id: '',
- type: 0, // 0锛坅lert榛樿锛�1锛堥〉闈㈠眰锛�2锛坕frame灞傦級3锛坙oading锛�4锛坱ips灞傦級,5(msg),6(prompt)
- title: '淇℃伅',
- content: '',
- area: 'auto',
- offset: 'auto',
- icon: -1,
- btn: '纭畾',
- time: 0,
- shade: true,
- yes: '',
- cancel: ''
+ cls: {
+ 'vl-notify-iframe': true
+ },
+ id: 'vlip' + new Date().getTime()
+ }
+ },
+ props: {
+ options: {
+ type: Object,
+ default: function () {
+ return {}
+ }
}
},
computed: {
- getActiveName () {
- const comps = [
- 'pzpage',
- 'pziframe'
- ]
- return comps[this.$data.type]
+ contentStyle () {
+ return {
+ height: 'calc(100% - 50px)', // parseInt(this.options.area[1]) - 50 + "px",
+ minHeight: '20px',
+ overflow: 'auto'
+ }
}
},
- mounted () {},
- methods: {},
- watch: {},
- components: {
- pzpage,
- pziframe
+ async mounted () {
+ helper.hiddenScrollBar(this.options)
+ },
+ methods: {
+ close () {
+ this.layer.close(this.id)
+ },
+ init () {
+ const propsData = helper.deepClone(this.content.content.data) || {}
+ propsData.layerid = this.id
+ propsData.lydata = this.content.data
+ propsData.lyoption = this.options
+ const instance = new this.content.content({
+ // 鍏蜂綋鍙傛暟淇℃伅锛岃鍙傝�僾ue婧愮爜
+ parent: this.content.parent,
+ propsData: propsData
+ })
+ instance.vm = instance.$mount()
+ document.getElementById(this.id).appendChild(instance.vm.$el)
+ }
}
}
</script>
-<style lang="less">
+<style lang="less" scoped>
+ .public-bounced {
+ z-index: 2000;
+ position: absolute;
+ top: 35%;
+ left: 20%;
+
+ .public-bounced-title {
+ cursor: move;
+ height: 0.1rem;
+ padding: 10px 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ span {
+ color: #f4f7ff;
+ margin: 0 15px;
+ font-size: 14px;
+ }
+
+ i {
+ color: #C0C4CC;
+ margin: 0 15px;
+ font-size: 22px;
+ cursor: pointer;
+ }
+
+ i:hover {
+ color: #00fff6;
+ }
+ }
+
+ .public-bounced-content {
+ padding: 0.1rem;
+ display: flex;
+ //align-items: center;
+ //justify-content: space-around;
+
+ .public-bounced-content-left {
+ //width: 4.8rem;
+ }
+
+ .public-bounced-content-right {
+ //width: 3rem;
+ margin-left: 0.1rem;
+ }
+ }
+ }
</style>
--
Gitblit v1.8.0