editer.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <div class="wandaEditer">
  3. <!-- 顶部工具栏 -->
  4. <div class="top_toolbar">
  5. <topToolbar></topToolbar>
  6. </div>
  7. <div class="content">
  8. <!-- 左侧工具栏 -->
  9. <div class="left_toolbar">
  10. <leftToolbar @setCmdType="setCmdType" :cmdType="cmdType" @toolActionClick="toolActionClick"></leftToolbar>
  11. </div>
  12. <!-- 绘制界面 -->
  13. <div class="baseEdit">
  14. <baseEditer
  15. ref="graphy"
  16. :cmdType="cmdType"
  17. @setCmdType="setCmdType"
  18. @changeFocusItem="changeFocusItem"
  19. ></baseEditer>
  20. <!-- <baseEditertest ref="graphy"></baseEditertest> -->
  21. <!-- <baseEditerzy ref="graphy"></baseEditerzy> -->
  22. </div>
  23. <!-- 右侧工具栏 -->
  24. <div class="right_toolbar">
  25. <rightToolbar :focusItemList="focusItemList"></rightToolbar>
  26. </div>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. import baseEditer from "@/components/baseEditer.vue";
  32. import leftToolbar from "@/components/edit/left_toolbar.vue";
  33. import topToolbar from "@/components/edit/top_toolbar.vue";
  34. import rightToolbar from "@/components/edit/right_toolbar.vue";
  35. import bus from "@/bus";
  36. export default {
  37. name: "wandaEditer",
  38. data() {
  39. return {
  40. cmdType: "choice",
  41. focusItemList: null
  42. };
  43. },
  44. components: {
  45. baseEditer,
  46. leftToolbar,
  47. topToolbar,
  48. rightToolbar
  49. },
  50. methods: {
  51. // 左侧工具栏 点击事件
  52. toolActionClick(item) {
  53. this.cmdType = item.Type;
  54. bus.$emit("setLenged", item);
  55. },
  56. setCmdType(cmdType) {
  57. this.cmdType = cmdType;
  58. console.log(cmdType,'12313')
  59. },
  60. changeFocusItem(item) {
  61. this.focusItemList = item;
  62. }
  63. }
  64. };
  65. </script>
  66. <style lang="less" scoped>
  67. .wandaEditer {
  68. width: 100%;
  69. height: 100%;
  70. .top_toolbar {
  71. width: 100%;
  72. height: 60px;
  73. background: rgba(255, 255, 255, 1);
  74. box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.1);
  75. }
  76. .content {
  77. width: 100%;
  78. height: calc(100% - 60px);
  79. display: flex;
  80. position: relative;
  81. .baseEdit {
  82. flex: 1;
  83. }
  84. .right_toolbar {
  85. height: 100%;
  86. background: #fff;
  87. }
  88. .left_toolbar {
  89. position: absolute;
  90. height: 100%;
  91. z-index: 1001;
  92. /*left: 12px;*/
  93. /*top: 12px;*/
  94. }
  95. }
  96. }
  97. </style>