12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <template>
- <div class="wandaEditer">
- <!-- 顶部工具栏 -->
- <div class="top_toolbar">
- <topToolbar></topToolbar>
- </div>
- <div class="content">
- <!-- 左侧工具栏 -->
- <div class="left_toolbar">
- <leftToolbar @setCmdType="setCmdType" :cmdType="cmdType" @toolActionClick="toolActionClick"></leftToolbar>
- </div>
- <!-- 绘制界面 -->
- <div class="baseEdit">
- <baseEditer
- ref="graphy"
- :cmdType="cmdType"
- @setCmdType="setCmdType"
- @changeFocusItem="changeFocusItem"
- ></baseEditer>
- <!-- <baseEditertest ref="graphy"></baseEditertest> -->
- <!-- <baseEditerzy ref="graphy"></baseEditerzy> -->
- </div>
- <!-- 右侧工具栏 -->
- <div class="right_toolbar">
- <rightToolbar :focusItemList="focusItemList"></rightToolbar>
- </div>
- </div>
- </div>
- </template>
- <script>
- import baseEditer from "@/components/baseEditer.vue";
- import leftToolbar from "@/components/edit/left_toolbar.vue";
- import topToolbar from "@/components/edit/top_toolbar.vue";
- import rightToolbar from "@/components/edit/right_toolbar.vue";
- import bus from "@/bus";
- export default {
- name: "wandaEditer",
- data() {
- return {
- cmdType: "choice",
- focusItemList: null
- };
- },
- components: {
- baseEditer,
- leftToolbar,
- topToolbar,
- rightToolbar
- },
- methods: {
- // 左侧工具栏 点击事件
- toolActionClick(item) {
- this.cmdType = item.Type;
- bus.$emit("setLenged", item);
- },
- setCmdType(cmdType) {
- this.cmdType = cmdType;
- },
- changeFocusItem(item) {
- this.focusItemList = item;
- }
- }
- };
- </script>
- <style lang="less" scoped>
- .wandaEditer {
- width: 100%;
- height: 100%;
- .top_toolbar {
- width: 100%;
- height: 60px;
- background: rgba(255, 255, 255, 1);
- box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.1);
- }
- .content {
- width: 100%;
- height: calc(100% - 60px);
- display: flex;
- position: relative;
- .baseEdit {
- flex: 1;
- }
- .right_toolbar {
- height: 100%;
- background: #fff;
- }
- .left_toolbar {
- position: absolute;
- height: 100%;
- z-index: 1001;
- /*left: 12px;*/
- /*top: 12px;*/
- }
- }
- }
- </style>
|