editer.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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. },
  59. changeFocusItem(item) {
  60. this.focusItemList = item;
  61. }
  62. }
  63. };
  64. </script>
  65. <style lang="less" scoped>
  66. .wandaEditer {
  67. width: 100%;
  68. height: 100%;
  69. .top_toolbar {
  70. width: 100%;
  71. height: 60px;
  72. background: rgba(255, 255, 255, 1);
  73. box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.1);
  74. }
  75. .content {
  76. width: 100%;
  77. height: calc(100% - 60px);
  78. display: flex;
  79. position: relative;
  80. .baseEdit {
  81. flex: 1;
  82. }
  83. .right_toolbar {
  84. height: 100%;
  85. background: #fff;
  86. }
  87. .left_toolbar {
  88. position: absolute;
  89. height: 100%;
  90. z-index: 1001;
  91. /*left: 12px;*/
  92. /*top: 12px;*/
  93. }
  94. }
  95. }
  96. </style>