Dialog.vue 966 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <view class="showdialog">
  3. <van-dialog title="确定取消订单?"
  4. show-cancel-button="true"
  5. :show="showdialog"
  6. @cancel="cancelDialog" @confirm="confirmOrder"
  7. >
  8. </van-dialog>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. props:{
  14. orderCancel:{
  15. default: false,
  16. type: Boolean
  17. }
  18. },
  19. data() {
  20. return {
  21. showdialog: false
  22. }
  23. },
  24. watch:{
  25. 'orderCancel':function(val) {
  26. if(val) {
  27. this.showdialog = true;
  28. console.log(this.showdialog)
  29. }
  30. }
  31. },
  32. created() {
  33. console.log(this.orderCancel)
  34. },
  35. methods: {
  36. cancelDialog() {
  37. this.show = false;
  38. this.$emit('colseDialog')
  39. console.log("取消")
  40. console.log(this.orderCancel);
  41. },
  42. confirmOrder() {
  43. this.show = false;
  44. this.$emit('confirmPay')
  45. },
  46. }
  47. }
  48. </script>
  49. <style>
  50. .showdialog {
  51. width: 100%;
  52. height: 100vh;
  53. }
  54. </style>