<template>
|
<div>
|
<div class="weui-mask" v-show="show"></div>
|
<div class="f-dialog" v-show="show">
|
<!--<img v-if="dialogImgUrl" :src="dialogImgUrl" alt="弹窗提示">-->
|
<div class="f-dialog-img">
|
<img src="../../assets/img/collect_result_bg.png" alt="">
|
</div>
|
<h3 class="f-dialog-header" v-if="title">{{ title }}</h3>
|
<!--内容在插槽中写-->
|
<p class="f-dialog-content">
|
<slot></slot>
|
</p>
|
<div class="f-dialog-footer dialog-single-footer"
|
v-if="type === 'confirm'"
|
@click="handleClickConfirm"
|
>{{ confirmText }}</div>
|
<div class="f-dialog-footer" v-if="type === 'dialog'">
|
<span @click="handleClickConfirm">{{ confirmText }}</span>
|
<span @click="handleClickCancel">{{ cancelText }}</span>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
/**
|
* Created by c.y on 2018/3/16.
|
* 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
|
* 全局的对话框
|
*/
|
export default {
|
name: 'f-confirm',
|
methods: {
|
// 点击确认事件
|
handleClickConfirm () {
|
this.$emit('on-click-confirm');
|
},
|
// 点击取消事件
|
handleClickCancel () {
|
this.$emit('on-click-cancel');
|
}
|
},
|
model: {
|
prop: 'show',
|
},
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
// 弹窗的图标
|
dialogImgUrl: String,
|
// title
|
title: String,
|
// 确认文字
|
confirmText: String,
|
// 取消文字
|
cancelText: String,
|
// type为两个，一个为confirm即底部只有一个按钮，dialog是有两个按钮
|
type: {
|
type: String,
|
default: 'confirm'
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@import "../../style/mixin";
|
.f-dialog {
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%,-50%);
|
width: 280px;
|
min-height: 128px;
|
text-align: center;
|
border-radius: @border-radius-normal-size;
|
background: @color-white;
|
z-index: 1000;
|
.f-dialog-img {
|
position: relative;
|
height: 40px;
|
img {
|
position: absolute;
|
left: 50%;
|
top: -32px;
|
width: 64px;
|
height: 64px;
|
transform: translate(-50%,0);
|
border-radius: 50%;
|
}
|
}
|
.f-dialog-header {
|
padding-top: 9px;
|
font-size: @font-size-large;
|
line-height: 2.14;
|
font-weight: normal;
|
color: @color-text-primary;
|
}
|
.f-dialog-content {
|
font-size: @font-size-medium;
|
line-height: 1.6;
|
color: @color-text-secondary;
|
padding-bottom: 14px;
|
}
|
.f-dialog-footer {
|
position: relative;
|
width: 100%;
|
height: 44px;
|
line-height: 44px;
|
font-size: @font-size-primary;
|
color: @color-text-third;
|
text-align: center;
|
.flexLayout();
|
span {
|
flex: 1;
|
&:last-child {
|
position: relative;
|
color: @color-primary;
|
&:before {
|
.setLeftLine(@color-divider-regular);
|
}
|
}
|
}
|
&:before {
|
.setTopLine(@color-divider-regular);
|
}
|
}
|
.dialog-single-footer {
|
display: block;
|
color: @color-primary;
|
}
|
}
|
</style>
|
