main.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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. {{cancelButtonText}}
  24. </el-button>
  25. <el-button
  26. size="mini"
  27. :type="confirmButtonType"
  28. @click="confirm"
  29. >
  30. {{confirmButtonText}}
  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. default: t('el.popconfirm.confirmButtonText')
  50. },
  51. cancelButtonText: {
  52. type: String,
  53. default: t('el.popconfirm.cancelButtonText')
  54. },
  55. confirmButtonType: {
  56. type: String,
  57. default: 'primary'
  58. },
  59. cancelButtonType: {
  60. type: String,
  61. default: 'text'
  62. },
  63. icon: {
  64. type: String,
  65. default: 'el-icon-question'
  66. },
  67. iconColor: {
  68. type: String,
  69. default: '#f90'
  70. },
  71. hideIcon: {
  72. type: Boolean,
  73. default: false
  74. }
  75. },
  76. components: {
  77. ElPopover,
  78. ElButton
  79. },
  80. data() {
  81. return {
  82. visible: false
  83. };
  84. },
  85. methods: {
  86. confirm() {
  87. this.visible = false;
  88. this.$emit('onConfirm');
  89. },
  90. cancel() {
  91. this.visible = false;
  92. this.$emit('onCancel');
  93. }
  94. }
  95. };
  96. </script>