Confirm.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <ui-dialog>
  3. <template v-slot:header>
  4. <span>{{ title }}</span>
  5. <i class="iconfont icon-close" @click="close('no')"></i>
  6. </template>
  7. <template v-if="$slots.content">
  8. <slot name="content" />
  9. </template>
  10. <template v-else>
  11. <div class="message" v-html="content"></div>
  12. </template>
  13. <template v-slot:footer>
  14. <ui-button v-if="!single" type="cancel" @click="close('no')">{{ noText }}</ui-button>
  15. <ui-button type="primary" @click="close('ok')">{{ okText }}</ui-button>
  16. </template>
  17. </ui-dialog>
  18. </template>
  19. <script>
  20. import { defineComponent } from 'vue'
  21. import { isFunction, omit } from '../../utils'
  22. export default defineComponent({
  23. name: 'ui-confirm',
  24. props: {
  25. title: {
  26. type: String,
  27. default: '提示',
  28. },
  29. okText: {
  30. type: String,
  31. default: '确定',
  32. },
  33. noText: {
  34. type: String,
  35. default: '取消',
  36. },
  37. single: {
  38. type: Boolean,
  39. default: false,
  40. },
  41. func: Function,
  42. content: String,
  43. destroy: Function,
  44. },
  45. setup: function (props, ctx) {
  46. const close = result => {
  47. if (isFunction(props.func) && props.func(result) === false) {
  48. return
  49. }
  50. isFunction(props.destroy) && props.destroy()
  51. }
  52. return {
  53. ...omit(props, 'destroy', 'func'),
  54. close,
  55. }
  56. },
  57. })
  58. </script>