Dialog.vue 1022 B

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