# 反馈弹框组件 Beta

# 使用示例

正常默认

带图标的

无图标-无标题-

仅内容--

<!--
 *@author huhongyun
 *@date 2021/10/15
 *@component 反馈弹窗 demo
-->
                                         
<template>
  <div class="feedback-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">成功弹窗</el-button>
    <p>无图标-无标题-</p>
    <el-button :plain="true" @click="open5">单行居中显示</el-button>
    <el-button :plain="true" @click="open6">多行居中显示</el-button>
    <p>仅内容--</p>
    <el-button :plain="true" @click="open7">单行仅内容</el-button>
    <!--默认弹窗-->
    <ykc-feedback-dialog
      type="default"
      title="主标题"
      :show.sync="show1"
      desc="内容内容内容内容内容内容内容内容"></ykc-feedback-dialog>
    <!--多行内容弹窗，需要传参 multiple-line-->
    <ykc-feedback-dialog
      title="主标题主标题主标题主标题主标题主标题"
      type="default"
      :show.sync="show2"
      multiple-line
      desc="多行段落内容两端对齐，最多8行字。字号13px，中黑体，色值#4A4A4A！内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内"></ykc-feedback-dialog>
    <!--多行内容弹窗，需要传参 multiple-line-->
    <ykc-feedback-dialog
      title="删除啊啊啊啊吗？"
      type="warning"
      :show.sync="show3"
      multiple-line
      show-warning-icon
      desc="内容内容内容内容内容内容内容内容"></ykc-feedback-dialog>
    <!--删除成功-->
    <ykc-feedback-dialog
      title="删除成功"
      type="success"
      :show.sync="show4"
      multiple-line
      show-success-icon
      :show-cancel-button="false"
      desc="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"></ykc-feedback-dialog>
    <!--无标题无图标 - 单行居中 -->
    <ykc-feedback-dialog
      title="删除成功"
      :show-title="false"
      type="success"
      :show.sync="show5"
      desc="单行内容无标题居中显示"></ykc-feedback-dialog>

    <!--无标题无图标 - 多行居中 -->
    <ykc-feedback-dialog
      title="删除成功"
      :show-title="false"
      :show.sync="show6"
      multiple-line
      desc="只有文本无标题多行段落内容两端对齐，最多5行。字号13px，中黑体，色值#4A4A4A。
只有文本无标题多行只有文本无标题多行只有文本无标题多行只有文本无标题多行只有文本无标题多行只有文本无标题多行只有文本无标题多行"></ykc-feedback-dialog>

    <!-- 单行 进内容 无 footer-->
    <ykc-feedback-dialog
      title="删除成功"
      :show-title="false"
      :show.sync="show7"
      :show-footer="false"
      desc="单行内容无标题居中显示,弹窗最小尺寸"></ykc-feedback-dialog>
  </div>
</template>

<script>

  export default {
    name: 'feedback-dialog-demo',
    data() {
      return {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        show5: false,
        show6: false,
        show7: false,
      };
    },
    components: {
      // YkcFeedbackDialog,
    },
    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;
      },
    },
  };
</script>

<style scoped></style>

复制代码

# 属性

如果传递未列出的【属性】和【自定义】监听事件将会传递给内部的【element dialog】组件

参数	必填	说明	类型	可选值	默认值
customerClass	否	自定义样式类名	string	—	—
desc	否	反馈描述	string/object	—	—
isJSVersion	否	是否为 js 版本	boolean	false/true	-
footerBtnStyle	否	footer 按钮样式	string/object	——	——
show	是	是否展示弹窗，需要使用 `.sync` 同步修饰符	boolean	false/true	-
showFooter	否	是否展示 `footer` 部分, 默认展示	boolean	false/true	true
isFullScreen	否	是否全屏展示	boolean	false/true	false
showSuccessIcon	否	是否显示成功图标	boolean	false/true	false
showWarningIcon	否	是否显示错误图标	boolean	false/true	false
showErrorIcon	否	是否显示错误图标	boolean	true/false	false
showTitle	否	是否显示标题	boolean	false/true	true
size	否	弹框尺寸	string	medium/large	medium
showCancelButton	否	显示取消按钮	boolean	false/true	true
type	否	弹框类型,default:默认；warning:告警；success：成功;error:失败	string	'default', 'warning', 'success'	default
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	—	—
cancelBtnTxt	否	取消文本	string	—	—
confirmBtnTxt	否	确认文本	string	—	—
beforeCancel	否	点击取消的钩子函数	function	—	—
beforeConfirm	否	点击确认调用的回调函数	function	—	—
onCLose	否	点击关闭按钮时的回调函数	function	—	—

# Events

事件名称	说明	回调参数
close-dialog	YkcFeedbackDialog 关闭弹框时	—
open-dialog	YkcFeedbackDialog 打开弹框时	—

← operation-dialog radio →