引用
import templateCreat from "@/components/templateCreat";
components: {
templateCreat
},
初始化用到的參數：creatShowTemplate: false, creatDismissTemplate: false,
使用
<templateCreat
:show="creatShowTemplateExample"
:dismiss="creatDismissTemplateExample"
:width="400"
title="顯示示例"
class="msgboxs"
>
<div class="exampleCenten">
<div class="exampleCentenImg">
<img src="@/assets/commodity/example1.png" v-if="exampleIndex==1" alt />
<img src="@/assets/commodity/example2.png" v-else-if="exampleIndex==2" alt />
<img src="@/assets/commodity/example3.png" v-else-if="exampleIndex==3" alt />
<img src="@/assets/commodity/example4.png" v-else alt />
</div>
<div class="flex exampleBtns" style="margin-top:0.2rem;">
<div class="btnBackground" @click="creatDismissTemplateExample=!creatDismissTemplateExample">確定</div>
</div>
</div>
</templateCreat>
模板。vue
<template>
<div v-if="showDialog" class="dialog" @touchmove.prevent>
<div v-if="showDialog" class="back-drop"></div>
<div class="alert" :class="{'alert-active':showDialogActive}" :style="'width:'+width+'px'">
<div class="title">
{{title}}
<div class="iconfont close" @click="close"></div>
</div>
<div class="content">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
import { setTimeout } from "timers";
import { integer } from "../filters/checkPass";
export default {
name: "v-templateCreat",
props: {
title: {
type: String,
default: "溫馨提示"
},
cancelText: {
type: String,
default: "取消"
},
doneText: {
type: String,
default: "確定"
},
show: {
type: Boolean,
default: false
},
dismiss: {
type: Boolean,
default: false
},
width: {
default: false
},
},
data() {
return {
showDialog: false,
message: "",
cancel: false,
value: "",
templateCreat: false,
showDialogActive: false
};
},
methods: {
close() {
this.showDialogActive = false;
setTimeout(() => (this.showDialog = false), 320);
}
},
watch: {
show: function(data) {
this.showDialog = true;
setTimeout(() => (this.showDialogActive = true));
},
dismiss: function() {
this.close();
},
width: function(data) {
this.width = data;
}
},
mounted() {}
};
</script>
<style lang="scss">
@import "../filters/css/all.css";
.dialog {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
z-index: 106;
.iconfont {
float: right;
cursor: pointer;
color: #9b9b9b;
}
.back-drop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 106;
}
.alert {
width: 498px;
min-height: 260px;
background: #fff;
left: calc(50% - 249px);
top: calc(50% - 280px);
position: fixed;
z-index: -1;
transform: scale(1.23);
opacity: 0;
transition: all 0.32s;
position: relative;
.title {
height: 44px;
width: 100%;
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 44px;
background: #f2f2f2;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 16px;
}
.message {
padding: 18px;
min-height: 100px;
overflow: auto;
}
}
.alert-active {
z-index: 9999;
transform: scale(1);
opacity: 1;
}
}
</style>