canvasFun.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <el-row id="canvas-actions-box" :class="{'isEdit':config.isEdit}">
  3. <!-- <div :class="{'active':active=='move'}">
  4. <i class="iconfont icon-move" @click="moveCanvas"></i>
  5. </div> -->
  6. <div v-if="config.isEdit&&config.groupSelect" :class="{'active':active=='groupSelect'}">
  7. <i class="iconfont icon-shuxingxuanze" @click="groupSelect"></i>
  8. </div>
  9. <div>
  10. <i class="iconfont icon-maximize" @click="fitToWindow"></i>
  11. </div>
  12. <div v-if="!config.isEdit">
  13. <el-dropdown size="mini" placement="top-start" @command="handleCommand">
  14. <i class="el-icon-download" style="font-size:20px;color:#fff;"></i>
  15. <el-dropdown-menu slot='dropdown'>
  16. <el-dropdown-item command="savePng">保存为png</el-dropdown-item>
  17. <el-dropdown-item command="saveSvg">保存为svg</el-dropdown-item>
  18. <el-dropdown-item command="saveJson">保存为Json</el-dropdown-item>
  19. </el-dropdown-menu>
  20. </el-dropdown>
  21. </div>
  22. <div v-if="config.isEdit&&config.divide" :class="{'active':active=='divide'}">
  23. <el-dropdown size="mini" placement="top-start" @command="handleDivideCommand" :hide-on-click="false">
  24. <i class="iconfont icon-edit1" @click="divide"></i>
  25. <el-dropdown-menu slot='dropdown'>
  26. <el-dropdown-item command="savePng">
  27. 吸附<el-switch v-model="isSwitch"></el-switch>
  28. </el-dropdown-item>
  29. </el-dropdown-menu>
  30. </el-dropdown>
  31. </div>
  32. <div v-if="config.isEdit&&config.divide">
  33. <i class="iconfont icon-Erase" @click="clearDivide"></i>
  34. </div>
  35. <div v-if="config.isEdit">
  36. <i class="iconfont icon-Cancel" @click="undo"></i>
  37. </div>
  38. <div v-if="config.isEdit">
  39. <i class="iconfont icon-Anti-cancel" @click="redo"></i>
  40. </div>
  41. <div>
  42. <i class="iconfont icon-narrow" @click="reduce"></i>
  43. </div>
  44. <div class="line">
  45. <el-slider tooltip-class="tooltip-class" :min="min" v-model="sliderVal" :show-tooltip="false" @input="scale"></el-slider>
  46. </div>
  47. <div>
  48. <i class="iconfont icon-zoom" @click="plus"></i>
  49. </div>
  50. </el-row>
  51. </template>
  52. <script>
  53. export default {
  54. data() {
  55. return {
  56. sliderVal: 1, // 滑块值
  57. active: '',
  58. min: 1,
  59. everyScale: 1, // 每份的放大倍数
  60. isSwitch: false, // 是否开启吸附
  61. }
  62. },
  63. props: {
  64. config: {
  65. type: Object,
  66. default: {
  67. isEdit: false,
  68. divide: true,
  69. groupSelect: false
  70. }
  71. }
  72. },
  73. computed: {
  74. },
  75. methods: {
  76. // 移动画布
  77. // moveCanvas() {
  78. // this.active = this.active != "move" ? "move" : '';
  79. // this.$emit('move', this.active == 'move');
  80. // },
  81. //
  82. groupSelect() {
  83. this.active = 'groupSelect';
  84. this.$emit('groupSelect');
  85. },
  86. // 适配大小
  87. fitToWindow() {
  88. this.$emit('fit');
  89. },
  90. // 下拉菜单
  91. handleCommand(command) {
  92. this.$emit(command)
  93. },
  94. // 是否开启吸附
  95. handleDivideCommand(commond) {
  96. this.$emit('changeAbsorb', this.isSwitch);
  97. },
  98. // 切割编辑
  99. divide() {
  100. this.active = 'divide';
  101. this.$emit('divide');
  102. },
  103. // 清除编辑
  104. clearDivide() {
  105. this.active = '';
  106. this.$emit('clearDivide');
  107. },
  108. // 撤销
  109. undo() {
  110. this.$emit('undo');
  111. },
  112. // 反撤销
  113. redo() {
  114. this.$emit('redo');
  115. },
  116. // 减
  117. reduce() {
  118. this.sliderVal /= 1.1;
  119. if (this.sliderVal < this.min) {
  120. this.sliderVal = this.min;
  121. }
  122. this.scale(this.sliderVal);
  123. },
  124. // 缩放
  125. scale(val) {
  126. // 换算
  127. let scale = val * this.everyScale / 10;
  128. this.$emit('scale', scale);
  129. },
  130. // 加
  131. plus() {
  132. this.sliderVal *= 1.1;
  133. if (this.sliderVal > this.maxScale) {
  134. this.sliderVal = this.maxScale;
  135. }
  136. this.scale(this.sliderVal);
  137. }
  138. }
  139. }
  140. </script>
  141. <style lang="less" scoped>
  142. #canvas-actions-box {
  143. min-width: 542px;
  144. & > div {
  145. float: left;
  146. font-size: 20px;
  147. padding: 0 10px;
  148. color: #fff;
  149. background-color: #6da60f;
  150. i {
  151. cursor: pointer;
  152. color: #fff;
  153. }
  154. }
  155. & > div:active {
  156. background-color: #4b7902;
  157. }
  158. & > div.active {
  159. background-color: #4b7902;
  160. }
  161. &.isEdit > div {
  162. background-color: #02a7f0;
  163. }
  164. &.isEdit > div:active {
  165. background-color: #027db4;
  166. }
  167. &.isEdit > div.active {
  168. background-color: #027db4;
  169. }
  170. & > div.line {
  171. width: 200px;
  172. height: 40px;
  173. padding: 0;
  174. /deep/.el-slider__runway {
  175. margin: 18px 0;
  176. height: 4px;
  177. .el-slider__bar {
  178. background-color: #fff;
  179. height: 4px;
  180. }
  181. }
  182. }
  183. }
  184. </style>