stock-front/src/components/commom/kDialog/index.vue

<template>
  <div class="kDialogIdx">
    <!-- 通知弹窗 -->
    <van-dialog
      closeOnClickOverlay
      v-model:show="dialogShow"
      :title="dialogTitle"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div class="operCheckBox">
        <div class="operCheckCon">
          <div class="l-flex-center">
            {{ dialogContent }}
          </div>
          <slot name="content"></slot>
          <div :class="(cancelBtnTxt&&confirmBtnTxt)?'flex-row justify-between':'l-flex-center'" class="block6">
            <!-- 下次再看 -->
            <!-- <div v-if="cancelBtnTxt" class="mod7 flex-col" @click="cancelClk">
              <span class="info5">{{ cancelBtnTxt }}</span>
            </div> -->
            <!-- 不再显示 -->
            <!-- <div v-if="confirmBtnTxt" class="mod8 flex-col" @click="confirmClk">
              <span class="info6">{{ confirmBtnTxt }}</span>
            </div> -->
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
/**
 * kDialog 公用弹窗组件
 * @description 本组件主要是所有通用弹窗。
 *
 */
import { ref } from "vue";
export default {
  props: {
    // 弹窗标题
    dialogTitle: {
      type: String,
      default: "",
    },
    // 弹窗内容
    dialogContent: {
      type: String,
      default: "",
    },
    // 取消按钮的文字
    cancelBtnTxt: {
      type: String,
      default: "",
    },
    // 确定按钮的文字
    confirmBtnTxt: {
      type: String,
      default: "",
    },
    // 是否点击取消就会关闭弹窗
    isCloseForCancel:{
      type:Boolean,
      default:true,
    },
    // 是否点击确定就会关闭弹窗
    isCloseForConfirm:{
      type:Boolean,
      default:true,
    },
  },
  setup(props, ctx) {
    const dialogShow = ref(false);
    // 打开弹窗
    const openDialog = () => {
      dialogShow.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      dialogShow.value = false;
    };
    // 点击左侧按钮
    const cancelClk = () => {
      if(props.isCloseForCancel){
        closeDialog();
      }
      ctx.emit("cancelclk", "左侧按钮111");
    };
    // 点击右侧按钮
    const confirmClk = () => {
      if(props.isCloseForConfirm){
        closeDialog();
      }
      ctx.emit("confirmclk", "右侧按钮222");
    };

    return {
      dialogShow,
      openDialog,
      cancelClk,
      confirmClk,
      closeDialog,
    };
  },
};
</script>

<style lang="less" scoped>
@import "@/common/style/common.less";
@import "./index.less";
</style>