<template>
|
<div
|
class='fixed_box'
|
:class="type === 'clap-feedback' ?'custom-height': ''"
|
:style="styls"
|
:id="ids"
|
@click.stop="onZIndex"
|
>
|
<div class="header">
|
<b>{{title}}</b>
|
<span
|
class="close"
|
@click.stop="onClose"
|
><i class="el-icon-close"></i></span>
|
</div>
|
<div class="main">
|
<v-tool-scroll
|
:ids="ids+'-scroll'"
|
v-if="scroll"
|
>
|
<!-- v-if="scroll"-->
|
<div
|
class="pad"
|
:class="sty"
|
:style="{padding}"
|
>
|
<slot></slot>
|
</div>
|
</v-tool-scroll>
|
<!-- v-else-->
|
<div
|
class="pad"
|
:class="sty"
|
:style="{padding}"
|
v-else
|
>
|
<slot></slot>
|
</div>
|
</div>
|
<div class="footer">
|
<el-button
|
v-if="title == '随手拍处理'"
|
size="mini"
|
@click="next"
|
>下一条</el-button>
|
<el-button
|
size="mini"
|
@click="onCanle"
|
>取消</el-button>
|
<el-button
|
size="mini"
|
type="primary"
|
@click="onSave"
|
>确定</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
props: {
|
title: { type: String, default: "" },
|
sty: { type: String, default: "" },
|
ids: { type: String, default: "fixed-" + Date.now() },
|
move: { type: Boolean, default: false },
|
scroll: { type: Boolean, default: true },
|
pad: {
|
type: Array,
|
default: () => {
|
return [0];
|
},
|
},
|
w: { default: 600, type: [String, Number] },
|
h: { default: 300, type: [String, Number] },
|
type: { type: String, default: "" },
|
},
|
components: {},
|
data() {
|
return {
|
sizes: { w: 0, h: 0 },
|
styls: {},
|
padding: "",
|
z: 1301,
|
};
|
},
|
watch: {
|
w() {
|
this.size();
|
},
|
h() {
|
this.size();
|
},
|
vuex_index(n) {
|
this.z = n;
|
},
|
},
|
computed: {
|
...mapState({ vuex_index: "zIndex" }),
|
},
|
methods: {
|
onZIndex() {
|
this.$store.dispatch("setZIndex");
|
},
|
onClose() {
|
this.$store.dispatch("setFixed", {
|
event: "del",
|
type: this.type,
|
time: Date.now(),
|
});
|
},
|
onCanle() {
|
this.onClose();
|
},
|
onSave() {
|
this.$emit("on-save", this.type);
|
},
|
next() {
|
this.$emit("on-next", this.type);
|
},
|
government() {
|
this.$emit("on-government", this.type);
|
},
|
size() {
|
let w = this.w;
|
let h = this.h;
|
let p = this.pad;
|
if (p.length < 4) {
|
let v = p[0] || 0;
|
let len = 4 - p.length;
|
if (len === 3) {
|
p = p.concat(v).concat(v).concat(v);
|
} else if (len === 2) {
|
p = p.concat(v).concat(p[1]);
|
} else {
|
p = p.concat(p[1]);
|
}
|
}
|
p = p.map((k) => {
|
return k > 0 ? k + "px" : 0;
|
});
|
this.padding = p.join(" ");
|
let left = (this.sizes.w - parseInt(w)) / 2 + "px";
|
// let top = (this.sizes.h - parseInt(h)) / 2 + "px";
|
let top = 0;
|
this.styls = {
|
width: isNaN(w) ? w : w + "px",
|
height: isNaN(h) ? h : h + "px",
|
transform: "translateX(0) translateY(0)",
|
left,
|
top,
|
overflow: "scroll",
|
"z-index": this.z,
|
};
|
},
|
_move() {
|
let t = this;
|
let id = "#" + t.ids;
|
// //禁止拖动
|
// demo.move(
|
// id,
|
// (e) => {
|
// if (e.code) {
|
// try {
|
// demo.$.dom(id).style.left = e.left;
|
// demo.$.dom(id).style.top = e.top;
|
// demo.$.dom(id).style["z-index"] = t.z;
|
// } catch (e) {
|
// if (id !== "#" + t.ids) {
|
// t._move();
|
// }
|
// console.log(e + "");
|
// }
|
// }
|
// },
|
// ".app_main"
|
// );
|
},
|
},
|
mounted() {
|
this.z = this.vuex_index;
|
this.$nextTick(() => {
|
this.sizes = demo.js(".app_main").square();
|
this.size();
|
if (this.move) {
|
this._move();
|
}
|
});
|
},
|
};
|
</script>
|
<style lang='less'>
|
.fixed_box::-webkit-scrollbar {
|
display: none;
|
}
|
.custom-height {
|
height: 530px !important;
|
}
|
.fixed_box {
|
@w: 220px;
|
@h: 80px;
|
position: absolute;
|
left: calc(~"(100vw - @{w})/2");
|
top: calc(~"(100vh - @{h})/2");
|
background-color: #fff;
|
box-shadow: 0 0 10px #ccc;
|
border-radius: 5px;
|
max-height: calc(~"(100vh - @{h})*0.8");
|
max-width: calc(~"(100vw - @{w})*0.9");
|
overflow: scroll;
|
/*
|
max-height: calc(~"(100vh - @{h})*0.8");
|
max-width: calc(~"(100vw - @{w})*0.9");
|
*/
|
|
z-index: 1301;
|
transform: translateX(-50%) translateY(-50%);
|
.header {
|
border-bottom: 1px solid #eee;
|
height: 54px;
|
box-sizing: border-box;
|
padding: 16px;
|
line-height: 22px;
|
font-size: 14px;
|
font-weight: 650;
|
color: rgba(0, 0, 0, 0.647);
|
letter-spacing: 1px;
|
.close {
|
float: right;
|
width: 22px;
|
height: 22px;
|
display: block;
|
text-align: center;
|
font-size: 20px;
|
color: #999;
|
cursor: pointer;
|
}
|
}
|
.pad {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
.footer {
|
border-top: 1px solid #eee;
|
height: 64px;
|
box-sizing: border-box;
|
padding: 17px;
|
text-align: right;
|
.tishi {
|
float: left;
|
font-size: 13px;
|
color: #606266;
|
line-height: 27px;
|
}
|
}
|
.main {
|
/*overflow: scroll;*/
|
height: calc(~"100% - 120px");
|
position: relative;
|
box-sizing: border-box;
|
}
|
}
|
</style>
|
