Dialog.vue 895 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view v-if="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. }else {
  29. this.showdialog = false;
  30. }
  31. }
  32. },
  33. created() {
  34. console.log(this.orderCancel)
  35. },
  36. methods: {
  37. cancelDialog() {
  38. this.show = false;
  39. this.$emit('colseDialog')
  40. },
  41. confirmOrder() {
  42. this.show = false;
  43. this.$emit('confirmPay')
  44. },
  45. }
  46. }
  47. </script>
  48. <style>
  49. .showdialog {
  50. width: 100%;
  51. height: 100vh;
  52. }
  53. </style>