151 lines
2.8 KiB
Vue
151 lines
2.8 KiB
Vue
<template>
|
|
<!-- <transition name="popupfade"> -->
|
|
<div
|
|
class="taskDetailRight"
|
|
@click="getRight"
|
|
>
|
|
<div
|
|
class="taskDetailRight-contant"
|
|
@click.stop="aa"
|
|
>
|
|
<div class="taskDetailRight-contant-title commonFont">
|
|
<div style="flex:1;">{{title}}</div>
|
|
<i v-if="!footer" @click="$emit('cancel')" class="el-icon-close"></i>
|
|
</div>
|
|
<div class="taskDetailRight-contant-content">
|
|
<slot name="content"></slot>
|
|
</div>
|
|
<div
|
|
v-if="footer"
|
|
class="taskDetailRight-contant-footer"
|
|
>
|
|
<div>
|
|
<slot name="footer-left"></slot>
|
|
</div>
|
|
<div>
|
|
<el-button
|
|
size="small"
|
|
@click="$emit('cancel')"
|
|
>取 消</el-button>
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
@click="$emit('submit')"
|
|
>{{subumitText}}</el-button>
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
</div>
|
|
<!-- </transition> -->
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
subumitText: {
|
|
type: String,
|
|
default: '确 定'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
footer: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
isShow: true
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
beforeMount () { },
|
|
mounted () {
|
|
},
|
|
methods: {
|
|
aa () { },
|
|
onSubmit () {
|
|
this.isShow = false
|
|
this.$emit('update:show', false)
|
|
},
|
|
getRight () {
|
|
this.$emit('cancel')
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
.popupfade-enter {
|
|
transform: translateX(-100%);
|
|
}
|
|
.fade-leave {
|
|
transform: translateX(0);
|
|
}
|
|
.popupfade-leave-to {
|
|
transform: translateX(60%);
|
|
}
|
|
|
|
.fade-enter-to {
|
|
transform: translateX(-100%);
|
|
}
|
|
.popupfade-leave-active,
|
|
.fade-enter-active {
|
|
transition: all 40s;
|
|
}
|
|
|
|
.taskDetailRight {
|
|
position: fixed;
|
|
z-index: 50;
|
|
height: 100vh;
|
|
width: 100%;
|
|
min-width: 200px;
|
|
background: rgba(0, 0, 0, 0.12);
|
|
top: 0;
|
|
right: 0;
|
|
transition: all 1s;
|
|
&-contant {
|
|
min-width: 100px;
|
|
height: 100%;
|
|
float: right;
|
|
background: #fff;
|
|
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
|
|
display: flex;
|
|
flex-direction: column;
|
|
&-title {
|
|
border-bottom: 1px solid @borderColor;
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
height: 60px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
i{
|
|
font-size: 22px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
&-content {
|
|
min-width: 480px;
|
|
flex: 1;
|
|
padding: 20px 20px;
|
|
overflow: auto;
|
|
}
|
|
&-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 20px;
|
|
border-top: 1px solid @borderColor;
|
|
}
|
|
}
|
|
}
|
|
</style>
|