dialog.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import Vue from 'vue'
  2. export default function(component, options = { dialog: {}}, cb) {
  3. return new Promise(async(resolve, reject) => {
  4. const dialog = {
  5. appendToBody: true, // 对话框遮罩层是否插入至 body 元素上
  6. scrollToTop: false,
  7. ...options.dialog
  8. }
  9. // const footer = options.footer
  10. const template = Vue.extend({
  11. components: {
  12. 'ibps-dialog-component': component
  13. },
  14. data() {
  15. return {
  16. visible: true,
  17. wrap: null
  18. }
  19. },
  20. methods: {
  21. onSubmit(data) {
  22. resolve(this, data)
  23. },
  24. onCancel(data) {
  25. reject(this, data)
  26. },
  27. onClose(done) {
  28. done()
  29. this.onCancel()
  30. },
  31. scrollToTop() {
  32. if (this.wrap.scrollTop) {
  33. this.wrap.scrollTop -= 200
  34. requestAnimationFrame(this.scrollToTop)
  35. }
  36. },
  37. toTop() {
  38. this.wrap = document.querySelector('.el-dialog__wrapper')
  39. this.scrollToTop()
  40. }
  41. },
  42. render() {
  43. var h = arguments[0]
  44. return h('el-dialog', {
  45. 'attrs': {
  46. ...dialog,
  47. class: dialog.className,
  48. visible: this.visible,
  49. beforeClose: this.onClose
  50. }
  51. }, [h('ibps-dialog-component',
  52. {
  53. 'on': {
  54. 'submit': this.onSubmit,
  55. 'cancel': this.onCancel
  56. }
  57. })]
  58. )
  59. // (
  60. // <el-dialog
  61. // {...{ attrs: data }}
  62. // class={data.className}
  63. // visible={this.visible}
  64. // beforeClose={this.close}
  65. // >
  66. // <ibps-dialog-component onSubmit={this.submit} onCancel={this.cancel} {...options} />
  67. // <div v-if={footer} slot='footer' >
  68. // 测试
  69. // </div>
  70. // </el-dialog>
  71. // )
  72. }
  73. })
  74. cb && cb(template)
  75. })
  76. }