confirm.uvue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <cl-page>
  3. <view class="p-3">
  4. <demo-item :label="t('自定义')">
  5. <cl-button @tap="openPopup">{{ t("打开弹窗") }}</cl-button>
  6. </demo-item>
  7. <demo-item :label="t('隐藏取消按钮')">
  8. <cl-button @tap="openPopup2">{{ t("打开弹窗") }}</cl-button>
  9. </demo-item>
  10. <demo-item :label="t('自定义文本')">
  11. <cl-button @tap="openPopup3">{{ t("打开弹窗") }}</cl-button>
  12. </demo-item>
  13. <demo-item :label="t('关闭前钩子')">
  14. <cl-button @tap="openPopup4">{{ t("打开弹窗") }}</cl-button>
  15. </demo-item>
  16. <demo-item :label="t('显示时长')">
  17. <cl-button @tap="openPopup5">{{ t("打开弹窗") }}</cl-button>
  18. </demo-item>
  19. </view>
  20. </cl-page>
  21. </template>
  22. <script lang="ts" setup>
  23. import { t } from "@/locale";
  24. import DemoItem from "../components/item.uvue";
  25. import { useUi } from "@/uni_modules/cool-ui";
  26. const ui = useUi();
  27. function openPopup() {
  28. ui.showConfirm({
  29. title: t("提示"),
  30. message: t("确定要删除吗?"),
  31. callback(action) {
  32. if (action == "confirm") {
  33. ui.showToast({
  34. message: t("确定")
  35. });
  36. } else {
  37. ui.showToast({
  38. message: t("取消")
  39. });
  40. }
  41. }
  42. });
  43. }
  44. function openPopup2() {
  45. ui.showConfirm({
  46. title: t("提示"),
  47. message: t("确定要删除吗?"),
  48. showCancel: false
  49. });
  50. }
  51. function openPopup3() {
  52. ui.showConfirm({
  53. title: t("提示"),
  54. message: t("确定要删除吗?"),
  55. cancelText: t("关闭"),
  56. confirmText: t("下一步")
  57. });
  58. }
  59. function openPopup4() {
  60. ui.showConfirm({
  61. title: t("提示"),
  62. message: t("确定要删除吗?"),
  63. beforeClose: (action, { close, showLoading, hideLoading }) => {
  64. if (action == "confirm") {
  65. showLoading();
  66. setTimeout(() => {
  67. close();
  68. }, 1000);
  69. } else {
  70. close();
  71. }
  72. }
  73. });
  74. }
  75. function openPopup5() {
  76. ui.showConfirm({
  77. title: t("提示"),
  78. message: t("确定要删除吗?3秒后自动关闭"),
  79. duration: 3000
  80. });
  81. }
  82. </script>