index.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <div class="kDialogIdx">
  3. <!-- 通知弹窗 -->
  4. <van-dialog
  5. closeOnClickOverlay
  6. v-model:show="dialogShow"
  7. :title="dialogTitle"
  8. :showConfirmButton="false"
  9. :showCancelButton="false"
  10. >
  11. <div class="operCheckBox">
  12. <div class="operCheckCon">
  13. <div class="l-flex-center">
  14. {{ dialogContent }}
  15. </div>
  16. <slot name="content"></slot>
  17. <div :class="(cancelBtnTxt&&confirmBtnTxt)?'flex-row justify-between':'l-flex-center'" class="block6">
  18. <!-- 下次再看 -->
  19. <!-- <div v-if="cancelBtnTxt" class="mod7 flex-col" @click="cancelClk">
  20. <span class="info5">{{ cancelBtnTxt }}</span>
  21. </div> -->
  22. <!-- 不再显示 -->
  23. <!-- <div v-if="confirmBtnTxt" class="mod8 flex-col" @click="confirmClk">
  24. <span class="info6">{{ confirmBtnTxt }}</span>
  25. </div> -->
  26. </div>
  27. </div>
  28. </div>
  29. </van-dialog>
  30. </div>
  31. </template>
  32. <script>
  33. /**
  34. * kDialog 公用弹窗组件
  35. * @description 本组件主要是所有通用弹窗。
  36. *
  37. */
  38. import { ref } from "vue";
  39. export default {
  40. props: {
  41. // 弹窗标题
  42. dialogTitle: {
  43. type: String,
  44. default: "",
  45. },
  46. // 弹窗内容
  47. dialogContent: {
  48. type: String,
  49. default: "",
  50. },
  51. // 取消按钮的文字
  52. cancelBtnTxt: {
  53. type: String,
  54. default: "",
  55. },
  56. // 确定按钮的文字
  57. confirmBtnTxt: {
  58. type: String,
  59. default: "",
  60. },
  61. // 是否点击取消就会关闭弹窗
  62. isCloseForCancel:{
  63. type:Boolean,
  64. default:true,
  65. },
  66. // 是否点击确定就会关闭弹窗
  67. isCloseForConfirm:{
  68. type:Boolean,
  69. default:true,
  70. },
  71. },
  72. setup(props, ctx) {
  73. const dialogShow = ref(false);
  74. // 打开弹窗
  75. const openDialog = () => {
  76. dialogShow.value = true;
  77. };
  78. // 关闭弹窗
  79. const closeDialog = () => {
  80. dialogShow.value = false;
  81. };
  82. // 点击左侧按钮
  83. const cancelClk = () => {
  84. if(props.isCloseForCancel){
  85. closeDialog();
  86. }
  87. ctx.emit("cancelclk", "左侧按钮111");
  88. };
  89. // 点击右侧按钮
  90. const confirmClk = () => {
  91. if(props.isCloseForConfirm){
  92. closeDialog();
  93. }
  94. ctx.emit("confirmclk", "右侧按钮222");
  95. };
  96. return {
  97. dialogShow,
  98. openDialog,
  99. cancelClk,
  100. confirmClk,
  101. closeDialog,
  102. };
  103. },
  104. };
  105. </script>
  106. <style lang="less" scoped>
  107. @import "@/common/style/common.less";
  108. @import "./index.less";
  109. </style>