XWindow.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <popup :show="true" :can-close="canClose" @close="$emit('close')">
  3. <div class="ui-message ui-message-confirm" :style="setStyle" @click.stop>
  4. <div class="ui-message-header">
  5. <span>{{title}}</span>
  6. <span @click="onNo" v-if="showCloseIcon">
  7. <i class="iconfont icon-close"></i>
  8. </span>
  9. </div>
  10. <div class="ui-message-main">
  11. <slot></slot>
  12. </div>
  13. <div class="ui-message-footer">
  14. <button v-if="ok" class="ui-button submit" @click="onOk">{{okText}}</button>
  15. <button v-if="no" class="ui-button cancel" @click="onNo">{{noText}}</button>
  16. </div>
  17. </div>
  18. </popup>
  19. </template>
  20. <script>
  21. import {i18n} from "@/lang"
  22. import Popup from "../popup";
  23. export default {
  24. name: "ui-confirm",
  25. props:{
  26. canClose:Boolean,
  27. setStyle:{
  28. type:Object,
  29. default:function(){
  30. return {}
  31. }
  32. },
  33. },
  34. components: {
  35. Popup
  36. },
  37. data() {
  38. return {
  39. showCloseIcon: false,
  40. duration: 0,
  41. title: i18n.t("tips.title"),
  42. tips: "",
  43. content: "",
  44. okText: i18n.t("common.set"),
  45. noText: i18n.t("common.giveup"),
  46. ok: null,
  47. no: null
  48. };
  49. },
  50. methods: {
  51. onOk() {
  52. if (this.ok && this.ok(this) === false) {
  53. return;
  54. }
  55. this.onClose();
  56. },
  57. onNo() {
  58. this.no && this.no();
  59. this.onClose();
  60. },
  61. onClose() {
  62. this.$emit("close");
  63. }
  64. }
  65. };
  66. </script>