handle.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <div class="p-modal-handle">
  3. <Button type="default" @click="onClose">取消</Button>
  4. <Button :type="btnType" @click="onConfirm" :loading="loading">确定</Button>
  5. </div>
  6. </template>
  7. <script>
  8. import Button from '../../Button';
  9. export default {
  10. name: 'Handle',
  11. components: { Button },
  12. props: {
  13. iconLoading: {
  14. type: Boolean,
  15. default: false
  16. },
  17. type: {
  18. type: String,
  19. default: ''
  20. }
  21. },
  22. data() {
  23. return {
  24. loading: false // 确定按钮的loading属性
  25. }
  26. },
  27. computed: {
  28. // 确定按钮type属性
  29. btnType() {
  30. const thisType=this.type;
  31. let typeStr='primary';
  32. if (thisType) {
  33. if (thisType === 'info') typeStr='primary';
  34. else typeStr='error'
  35. }
  36. return typeStr;
  37. }
  38. },
  39. watch: {
  40. show(n, o) {
  41. if (n !== o) {
  42. if (n) {
  43. this.loading=false;
  44. }
  45. }
  46. }
  47. },
  48. methods: {
  49. onClose() {
  50. this.$emit('close');
  51. },
  52. onConfirm() {
  53. if (this.loading) return;
  54. if (this.iconLoading) {
  55. this.loading=true;
  56. }
  57. this.$emit('confirm');
  58. }
  59. }
  60. }
  61. </script>