topToolBar.vue 5.6 KB

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