alert.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <ui-dialog>
  3. <template #header>
  4. <span>{{ title }}</span>
  5. <i v-if="showCloseIcon" class="iconfont icon-close" @click="close" />
  6. </template>
  7. <div v-html="content" />
  8. <template v-if="showFooter" #footer>
  9. <ui-button type="submit" @click="close">{{ okText }}</ui-button>
  10. </template>
  11. </ui-dialog>
  12. </template>
  13. <script lang="ts">
  14. import { defineComponent } from 'vue'
  15. import { isFunction, omit } from '@kankan-components/utils'
  16. export default defineComponent({
  17. name: 'UIAlert',
  18. props: {
  19. showCloseIcon: {
  20. type: Boolean,
  21. default: true,
  22. },
  23. showFooter: {
  24. type: Boolean,
  25. default: true,
  26. },
  27. title: {
  28. type: String,
  29. default: '提示',
  30. },
  31. okText: {
  32. type: String,
  33. default: '确定',
  34. },
  35. func: Function,
  36. content: String,
  37. destroy: Function,
  38. },
  39. setup(props) {
  40. const close = () => {
  41. if (isFunction(props.func) && props.func() === false) {
  42. return
  43. }
  44. isFunction(props.destroy) && props.destroy()
  45. }
  46. return {
  47. ...omit(props, 'destroy', 'func'),
  48. close,
  49. }
  50. },
  51. })
  52. </script>