5a638264be03b45d69aeefdc065ff424b082c33b.svn-base 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <a-modal
  3. title="分屏"
  4. :width="modalWidth"
  5. :visible="visible"
  6. :bodyStyle="bodyStyle"
  7. style="top: 0px;"
  8. @ok="handleOk"
  9. @cancel="handleCancel"
  10. cancelText="关闭">
  11. <split-pane :min-percent='20' :default-percent='50' split="vertical">
  12. <template slot="paneL">
  13. <split-panel-a></split-panel-a>
  14. </template>
  15. <template slot="paneR">
  16. <split-panel-b></split-panel-b>
  17. </template>
  18. </split-pane>
  19. </a-modal>
  20. </template>
  21. <script>
  22. import splitPane from 'vue-splitpane'
  23. import SplitPanelA from './SplitPanelA'
  24. import SplitPanelB from './SplitPanelB'
  25. export default {
  26. name: "SplitPanelModal",
  27. components:{
  28. splitPane,
  29. SplitPanelA,
  30. SplitPanelB
  31. },
  32. data () {
  33. return {
  34. visible: false,
  35. bodyStyle:{
  36. padding: "0",
  37. height:(window.innerHeight-150)+"px"
  38. },
  39. modalWidth:800,
  40. }
  41. },
  42. created () {
  43. this.modalWidth = window.innerWidth-0;
  44. },
  45. methods: {
  46. show () {
  47. this.visible = true;
  48. },
  49. handleOk(){
  50. },
  51. handleCancel () {
  52. this.visible = false;
  53. },
  54. }
  55. }
  56. </script>
  57. <style scoped>
  58. </style>