|
@@ -2,68 +2,19 @@
|
|
|
<template>
|
|
|
<div class="lengend-list">
|
|
|
<!-- 基础图例 -->
|
|
|
- <div class="lengend-item">
|
|
|
- <span class="legend-title">基础组件</span>
|
|
|
- <div class="legend-content">
|
|
|
- <div class="title">通用元素</div>
|
|
|
+ <div class="lengend-item" v-for="(item,index) in baseEditItems" :key="index">
|
|
|
+ <span class="legend-title">{{item.title}}</span>
|
|
|
+ <div class="legend-content" v-for="(itemList,i) in item.itemList" :key="i">
|
|
|
+ <div class="title">{{itemList.title}}</div>
|
|
|
<ul>
|
|
|
- <li>
|
|
|
+ <li
|
|
|
+ :class="{ 'btn-active': choiceLegend== baseItem.id }"
|
|
|
+ v-for="(baseItem,k) in itemList.itemList"
|
|
|
+ :key="k"
|
|
|
+ @click="drawItem(baseItem.id)"
|
|
|
+ >
|
|
|
<div class="icon"></div>
|
|
|
- <span>线条</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>文本框</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>图片</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>批注</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="legend-content">
|
|
|
- <div class="title">图形</div>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>矩形</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>三角形</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>圆形</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>箭头</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="legend-content">
|
|
|
- <div class="title">图标</div>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>锚</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>矫正</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>面积</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="icon"></div>
|
|
|
- <span>箭头</span>
|
|
|
+ <span>{{baseItem.name}}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
@@ -71,9 +22,23 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import { baseEditItems } from "./data";
|
|
|
+import { mapMutations, mapState } from "vuex";
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ baseEditItems
|
|
|
+ // choiceLegend: "" //选中绘制类型
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(["choiceLegend"])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations(["SETCHOICELEHEND"]),
|
|
|
+ drawItem(item) {
|
|
|
+ this.SETCHOICELEHEND(item);
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
@@ -123,6 +88,9 @@ export default {
|
|
|
li:hover {
|
|
|
background: #e1f2ff;
|
|
|
}
|
|
|
+ .btn-active {
|
|
|
+ background: #e1f2ff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|