editer.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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 @toolActionClick="toolActionClick"></leftToolbar>
  11. </div>
  12. <!-- 绘制界面 -->
  13. <div class="baseEdit">
  14. <!-- <baseEditer ref="graphy"></baseEditer> -->
  15. <baseEditertest ref="graphy"></baseEditertest>
  16. <!-- <baseEditerzy ref="graphy"></baseEditerzy> -->
  17. </div>
  18. <!-- 右侧工具栏 -->
  19. <div class="right_toolbar">
  20. <rightToolbar></rightToolbar>
  21. </div>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. import baseEditer from "@/components/baseEditer.vue";
  27. import baseEditertest from "@/components/baseEditertest.vue";
  28. import baseEditerzy from "@/components/baseEditerzy.vue";
  29. import leftToolbar from "@/components/edit/left_toolbar.vue";
  30. import topToolbar from "@/components/edit/top_toolbar.vue";
  31. import rightToolbar from "@/components/edit/right_toolbar.vue";
  32. export default {
  33. name: "wandaEditer",
  34. components: {
  35. baseEditer,
  36. baseEditertest,
  37. baseEditerzy,
  38. leftToolbar,
  39. topToolbar,
  40. rightToolbar
  41. },
  42. methods: {
  43. // 左侧工具栏 点击事件
  44. toolActionClick(name) {
  45. this.$refs.graphy.changeStatus(name);
  46. }
  47. }
  48. };
  49. </script>
  50. <style lang="less" scoped>
  51. .wandaEditer {
  52. width: 100%;
  53. height: 100%;
  54. .top_toolbar {
  55. width: 100%;
  56. height: 60px;
  57. background: rgba(255, 255, 255, 1);
  58. box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
  59. }
  60. .content {
  61. width: 100%;
  62. height: calc(100% - 60px);
  63. display: flex;
  64. position: relative;
  65. .baseEdit {
  66. flex: 1;
  67. // position: relative;
  68. }
  69. .right_toolbar {
  70. height: 100%;
  71. background: #fff;
  72. }
  73. .left_toolbar {
  74. position: absolute;
  75. left: 12px;
  76. top: 12px;
  77. }
  78. }
  79. }
  80. </style>