topToolBar.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <div id="topToolBar">
  3. <div class="left">
  4. <ul>
  5. <li @click="topoUndo">
  6. <img
  7. class="lock"
  8. :src="require(`./../../assets/images/undo.png`)"
  9. alt
  10. />
  11. <span>撤销</span>
  12. </li>
  13. <li @click="topoRedo">
  14. <img
  15. class="lock"
  16. :src="require(`./../../assets/images/redo.png`)"
  17. alt
  18. />
  19. <span>重做</span>
  20. </li>
  21. <li @click="copy">
  22. <img
  23. class="lock"
  24. :src="require(`./../../assets/images/copy.png`)"
  25. alt
  26. />
  27. <span>复制</span>
  28. </li>
  29. <li @click="paste">
  30. <img
  31. class="lock"
  32. :src="require(`./../../assets/images/past.png`)"
  33. alt
  34. />
  35. <span>粘贴</span>
  36. </li>
  37. <li @click="deleteItem">
  38. <img
  39. class="lock"
  40. :src="require(`./../../assets/images/delete.png`)"
  41. alt
  42. />
  43. <span>删除</span>
  44. </li>
  45. <li>
  46. <span class="lock icon iconfont">&#xe66d;</span>
  47. <span>组合</span>
  48. </li>
  49. <li>
  50. <span class="icon iconfont">&#xe66e;</span>
  51. <span>打散</span>
  52. </li>
  53. <li @click="setOrder('Top')">
  54. <span class="icon iconfont icon-zhiding"></span>
  55. <span>置顶</span>
  56. </li>
  57. <li @click="setOrder('Bottom')">
  58. <span class="icon iconfont">&#xe66a;</span>
  59. <span>置底</span>
  60. </li>
  61. <li @click="setLock()">
  62. <i :class="isLock ? 'el-icon-lock' : 'el-icon-unlock'" />
  63. <span>{{ !isLock ? "解锁" : "锁定" }}</span>
  64. </li>
  65. </ul>
  66. </div>
  67. <div class="rght">
  68. <!-- 待定 -->
  69. </div>
  70. </div>
  71. </template>
  72. <script>
  73. import bus from "@/bus/bus";
  74. export default {
  75. data() {
  76. return {
  77. isLock: false,
  78. itemList: null,
  79. };
  80. },
  81. methods: {
  82. //撤销
  83. topoUndo() {
  84. bus.$emit("topoUndo");
  85. },
  86. // 重做
  87. topoRedo() {
  88. bus.$emit("topoRedo");
  89. },
  90. // 删除item
  91. deleteItem() {
  92. bus.$emit("deleteItem");
  93. },
  94. // 复制
  95. copy() {
  96. bus.$emit("copy");
  97. },
  98. // 粘贴
  99. paste() {
  100. bus.$emit("paste");
  101. },
  102. setOrder(val) {
  103. bus.$emit("setOrder", val);
  104. },
  105. // 设置锁定
  106. setLock() {
  107. this.isLock = !this.isLock;
  108. if (!this.itemList) return;
  109. this.itemList.forEach((item) => {
  110. item.moveable = this.isLock;
  111. });
  112. },
  113. emitChoice(itemList) {
  114. if (!itemList.length) {
  115. this.isLock = false;
  116. this.itemList = null;
  117. } else {
  118. this.isLock = itemList[0].moveable;
  119. this.itemList = itemList;
  120. }
  121. },
  122. },
  123. mounted() {
  124. bus.$on("emitChoice", this.emitChoice);
  125. bus.$on("tooltipLock", this.setLock);
  126. },
  127. };
  128. </script>
  129. <style lang="less">
  130. ul,
  131. li {
  132. margin: 0;
  133. padding: 0;
  134. list-style-type: none;
  135. }
  136. #topToolBar {
  137. width: 100%;
  138. height: 48px;
  139. background: rgba(255, 255, 255, 1);
  140. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  141. display: flex;
  142. align-items: center;
  143. justify-content: center;
  144. padding: 0 24px 0 24px;
  145. box-sizing: border-box;
  146. .left {
  147. ul {
  148. display: flex;
  149. li {
  150. display: flex;
  151. justify-content: center;
  152. flex-direction: column;
  153. /*width: 62px;*/
  154. padding: 0 7px;
  155. margin-left: 7px;
  156. font-size: 12px;
  157. align-items: center;
  158. text-align: center;
  159. cursor: pointer;
  160. img {
  161. width: 16px;
  162. height: 16px;
  163. }
  164. .percentage {
  165. display: inline-block;
  166. width: 35px;
  167. border-bottom: 1px solid #c3c7cb;
  168. margin: 0 13px;
  169. font-size: 14px;
  170. }
  171. .dropdown-flex {
  172. display: flex;
  173. align-items: center;
  174. .down-icon {
  175. margin-left: 12px;
  176. }
  177. }
  178. }
  179. }
  180. }
  181. }
  182. </style>