# 操作弹框组件 Beta
# 使用示例
中尺寸
大尺寸
自定义
弹窗1
导出报表
默认标题
展示说明
展示说明
展示说明
默认标题
<template>
<div class="operation-dialog-demo">
<p>中尺寸</p>
<el-button :plain="true" @click="open1">默认弹窗</el-button>
<el-button :plain="true" @_click_="open2">导出报表</el-button>
<p>大尺寸</p>
<el-button :plain="true" @click="open3">大尺寸默认</el-button>
<el-button :plain="true" @click="open4">大尺寸-不展示 footer</el-button>
<el-button :plain="true" @click="open5">大尺寸-展示 footer-居中</el-button>
<el-button :plain="true" @click="open6">大尺寸-展示 footer-居中- 不显示取消按钮</el-button>
<p>自定义</p>
<el-button :plain="true" @click="open7">自定义 footer</el-button>
<!-- 第一个弹窗 -->
<ykc-operation-dialog
title="弹窗1"
:before-close="onCLose"
:show.sync="show1"
:before-cancel="beforeCancel1">
<div slot="content">
<el-form
size="mini"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm">
<!--温馨提示-->
<ykc-warm-tip
type="info"
show-icon
multi-line
description="温馨提示：自动获取的订单字段数据不包含优惠信息，若需要优惠请手动修改订单金额！"></ykc-warm-tip>
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="ruleForm.date1"
style="width: 100%"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker
placeholder="选择时间"
v-model="ruleForm.date2"
style="width: 100%"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<el-empty description="描述文字"></el-empty>
<el-empty description="描述文字"></el-empty>
</div>
</ykc-operation-dialog>
<!--导出报表弹窗 -->
<ykc-operation-dialog
:show.sync="show2"
title="导出报表"
:before-cancel="beforeCancel2"
type="report"
@close-dialog="onCLoseDialog2"
:before-close="onClose2">
<div slot="content">
<ykc-warm-tip
type="success"
show-icon
multi-line
description="温馨提示：自动获取的订单字段数据不包含优惠信息，若需要优惠请手动修改订单金额！"></ykc-warm-tip>
<el-form
size="mini"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="ruleForm.date1"
style="width: 100%"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker
placeholder="选择时间"
v-model="ruleForm.date2"
style="width: 100%"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<el-empty description="描述文字"></el-empty>
<el-empty description="描述文字"></el-empty>
</div>
<div slot="custom-footer">customer footer</div>
</ykc-operation-dialog>
<!--大尺寸弹框 -->
<ykc-operation-dialog size="large" :show.sync="show3">
<div slot="content">
<ykc-warm-tip
type="info"
show-icon
description="温馨提示：自动获取的订单字段数据不包含优惠信息，若需要优惠请手动修改订单金额！"></ykc-warm-tip>
<el-form
size="mini"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="ruleForm.date1"
style="width: 100%"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker
placeholder="选择时间"
v-model="ruleForm.date2"
style="width: 100%"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<el-empty description="描述文字"></el-empty>
<el-empty description="描述文字"></el-empty>
</div>
</ykc-operation-dialog>
<!-- 不展示 footer 大尺寸弹框 -->
<ykc-operation-dialog
:show.sync="show4"
title="展示说明"
size="large"
:show-footer="false"
confirm-btn-txt="同意">
<div slot="content">
<ykc-warm-tip
type="warning"
show-icon
multi-line
description="温馨提示：自动获取的订单字段数据不包含优惠信息，若需要优惠请手动修改订单金额！"></ykc-warm-tip>
<el-input
type="textarea"
:autosize="{ minRows: 2 }"
placeholder="请输入内容"
v-model="textarea2"></el-input>
</div>
</ykc-operation-dialog>
<!-- 展示 footer 并居中 -->
<ykc-operation-dialog
:show.sync="show5"
title="展示说明"
size="large"
show-footer
center
confirm-btn-txt="同意">
<div slot="content">
<ykc-warm-tip
type="error"
show-icon
multi-line
description="温馨提示：自动获取的订单字段数据不包含优惠信息，若需要优惠请手动修改订单金额！"></ykc-warm-tip>
<el-input
type="textarea"
:autosize="{ minRows: 2 }"
placeholder="请输入内容"
v-model="textarea2"></el-input>
</div>
</ykc-operation-dialog>
<!-- 不显示取消按钮 -->
<ykc-operation-dialog
:show.sync="show6"
title="展示说明"
size="large"
show-footer
center
confirm-btn-txt="同意"
:show-cancel-button="false">
<div slot="content">
<ykc-warm-tip
type="error"
show-icon
multi-line
description="温馨提示：自动获取的订单字段数据不包含优惠信息，若需要优惠请手动修改订单金额！"></ykc-warm-tip>
<el-input
type="textarea"
:autosize="{ minRows: 2 }"
placeholder="请输入内容"
v-model="textarea2"></el-input>
</div>
</ykc-operation-dialog>
<!--显示自定义内容-->
<ykc-operation-dialog type="custom" :show.sync="show7">
<div class="" slot="content">
<ykc-warm-tip
type="error"
show-icon
multi-line
description="温馨提示：自动获取的订单字段数据不包含优惠信息，若需要优惠请手动修改订单金额！"></ykc-warm-tip>
</div>
<div class="" slot="custom-footer">
<el-button size="mini">自定义 footer 按钮</el-button>
</div>
</ykc-operation-dialog>
</div>
</template>
<script>
// import YkcWarmTip from '@ykc/ykc-ui/packages/warm-tip';
// import YkcOperationDialog from '@ykc/ykc-ui/packages/operation-dialog';
//
export default {
name: 'operation-dialog-demo',
components: {
// YkcOperationDialog,
// YkcWarmTip,
},
data() {
return {
show1: false,
show2: false,
show3: false,
show4: false,
show5: false,
show6: false,
show7: false,
textarea2: `电量=所有订单电量汇总
充电时长=所有订单充电时长汇总
充电次数=订单总数量
电费=所有订单原价电费
服务费=所有订单原价服务费
订单总金额=所有订单原价总金额
云快充折扣优惠=云快充提供的折扣活动优惠金额
云快充优惠券抵扣=云快充提供的优惠券抵扣金额运营商折扣优惠=运营商提供的折扣活动优惠金额电量=所有订单电量汇充电时长=所有订单充电时长汇总充电次数=订单总数量电费=所有订单原价电费服务费=所有订单原价服务费订单总金额=所有订单原价总金额云快充折扣优惠=云快充提供的折扣活动优惠金额云快充优惠券抵扣=云快充提供的优惠券抵扣金额电量=所有订单电量汇总
充电时长=所有订单充电时长汇总
充电次数=订单总数量
电费=所有订单原价电费
服务费=所有订单原价服务费
订单总金额=所有订单原价总金额云快充优惠券抵扣=云快充提供的优惠券抵扣金额运营商折扣优惠=运营商提供的折扣活动优惠金额电量=所有订单电量汇充电时长=所有订单充电时长汇总充电次数=订单总数量电费=所有订单原价电费服务费=所有订单原价服务费订单总金额=所有订单原价总金额云快充折扣优惠=云快充提供的折扣活动优惠金额云快充优惠券抵扣=云快充提供的优惠券抵扣金额电量=所云快充优惠券抵扣=云快充提供的优惠券抵扣金额运营商折扣优惠=运营商提供的折扣活动优惠金额电量=所有订单电量汇充电时长=所有订单充电时长汇总充电次数=订单总数量电费=所有订单原价电费服务费=所有订单原价服务费订单总金额=所有订单原价总金额云快充折扣优惠=云快充提供的折扣活动优惠金额云快充优惠券抵扣=云快充提供的优惠券抵扣金额电量=所云快充优惠券抵扣=云快充提供的优惠券抵扣金额运营商折扣优惠=运营商提供的折扣活动金额云快充折扣优惠=云快充提供的折扣活动优惠金额云快充优惠券抵扣=云快充提供的优惠券抵扣金额电量=所云快充优惠券抵扣=云快充提供的优惠券抵扣金额运营商折扣优惠=运营商提供的折扣活动优惠金额电量=所有订单电量汇充电时长=所有订单充电时长汇总充电次数=订单总数量电费=所`,
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
],
region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' },
],
resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
},
};
},
methods: {
open1() {
this.show1 = true;
},
open2() {
this.show2 = true;
},
open3() {
this.show3 = true;
},
open4() {
this.show4 = true;
},
open5() {
this.show5 = true;
},
open6() {
this.show6 = true;
},
open7() {
this.show7 = true;
},
onCLose() {
this.show1 = false;
},
onClose2() {
this.show2 = false;
},
beforeCancel1(done) {
console.log('取消的回调 dialog1');
done();
},
beforeCancel2(done) {
console.log('取消的回调 dialog2');
done();
},
onCLoseDialog2() {
console.log('dialog2 closed!!');
},
submitForm(formName) {
// eslint-disable-next-line consistent-return
this.$refs[formName].validate(valid => {
if (valid) {
// eslint-disable-next-line no-alert
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style scoped></style>
显示代码 复制代码 复制代码
# 属性
如果传递未列出的【属性】和【自定义】监听事件将会传递给内部的 【element dialog】 组件
| 参数 | 必填 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| isJSVersion | 否 | 是否为 js 版本 | boolean | false/true | - |
| footerBtnStyle | 否 | footer 按钮样式 | string/object | —— | —— |
| show | 是 | 是否展示弹窗，需要使用 .sync 同步修饰符 | boolean | false/true | - |
| showFooter | 否 | 是否展示 footer 部分, 默认展示 | boolean | false/true | true |
| size | 否 | 弹框尺寸 | string | medium/large | medium |
| showCancelButton | 否 | 显示取消按钮 | boolean | false/true | true |
| type | 否 | 类型， 默认一般弹窗,normal:一般；report:报表；custom:自定义footer | string | 'normal', 'report', 'custom' | normal |
| title | 标题 | string | — | ||
| top | 否 | 弹框距离顶部的高度 | string | — | 30vh |
| modal | 否 | 是否需要遮罩层 | boolean | false/true | true |
| modalAppendToBody | 否 | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素 | boolean | false/true | true |
| appendToBody | 否 | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | false/true | false |
| lockScroll | 否 | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | false/true | true |
| closeOnClickModal | 否 | 是否可以通过点击 modal 关闭 Dialog | boolean | false/true | true |
| closeOnPressEscape | 否 | 是否可以通过按下 ESC 关闭 Dialog | boolean | false/true | true |
| showClose | 否 | 是否显示关闭按钮 | boolean | false/true | true |
| center | 否 | 是否对头部和底部采用居中布局 | boolean | false/true | false |
| destroyOnClose | 否 | 关闭时销毁 Dialog 中的元素 | boolean | false/true | false |
| customClass | 否 | Dialog 的自定义类名 | string | — | — |
| customerWidth | 否 | 自定义宽度 | string | — | — |
| cancelBtnTxt | 否 | 取消文本 | string | — | — |
| confirmBtnTxt | 否 | 确认文本 | string | — | — |
| beforeCancel | 否 | 点击取消的钩子函数 | function | — | — |
| beforeConfirm | 否 | 点击确认调用的回调函数 | function | — | — |
| onCLose | 否 | 点击关闭按钮时的回调函数 | function | — | — |
# Slot
| 名称 | 说明 |
|---|---|
| content | YkcOperationDialog 内容区的内容 |
| footer | YkcOperationDialog 按钮操作区的内容 |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| close-dialog | YkcOperationDialog 关闭弹窗时 | — |
| open-dialog | YkcOperationDialog 打开弹框时 | — |