main.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <el-popover
  3. v-bind="$attrs"
  4. v-model="visible"
  5. trigger="click"
  6. >
  7. <div class="el-popconfirm">
  8. <p class="el-popconfirm__main">
  9. <i
  10. v-if="!hideIcon"
  11. :class="icon"
  12. class="el-popconfirm__icon"
  13. :style="{color: iconColor}"
  14. ></i>
  15. {{title}}
  16. </p>
  17. <div class="el-popconfirm__action">
  18. <el-button
  19. size="mini"
  20. :type="cancelButtonType"
  21. @click="cancel"
  22. >
  23. {{ displayCancelButtonText }}
  24. </el-button>
  25. <el-button
  26. size="mini"
  27. :type="confirmButtonType"
  28. @click="confirm"
  29. >
  30. {{ displayConfirmButtonText }}
  31. </el-button>
  32. </div>
  33. </div>
  34. <slot name="reference" slot="reference"></slot>
  35. </el-popover>
  36. </template>
  37. <script>
  38. import ElPopover from 'element-ui/packages/popover';
  39. import ElButton from 'element-ui/packages/button';
  40. import {t} from 'element-ui/src/locale';
  41. export default {
  42. name: 'ElPopconfirm',
  43. props: {
  44. title: {
  45. type: String
  46. },
  47. confirmButtonText: {
  48. type: String
  49. },
  50. cancelButtonText: {
  51. type: String
  52. },
  53. confirmButtonType: {
  54. type: String,
  55. default: 'primary'
  56. },
  57. cancelButtonType: {
  58. type: String,
  59. default: 'text'
  60. },
  61. icon: {
  62. type: String,
  63. default: 'el-icon-question'
  64. },
  65. iconColor: {
  66. type: String,
  67. default: '#f90'
  68. },
  69. hideIcon: {
  70. type: Boolean,
  71. default: false
  72. }
  73. },
  74. components: {
  75. ElPopover,
  76. ElButton
  77. },
  78. data() {
  79. return {
  80. visible: false
  81. };
  82. },
  83. computed: {
  84. displayConfirmButtonText() {
  85. return this.confirmButtonText || t('el.popconfirm.confirmButtonText');
  86. },
  87. displayCancelButtonText() {
  88. return this.cancelButtonText || t('el.popconfirm.cancelButtonText');
  89. }
  90. },
  91. methods: {
  92. confirm() {
  93. this.visible = false;
  94. this.$emit('confirm');
  95. },
  96. cancel() {
  97. this.visible = false;
  98. this.$emit('cancel');
  99. }
  100. }
  101. };
  102. </script>