canvasFun.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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" :max="max"></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. max: 1000,
  60. everyScale: 1, // 每份的放大倍数
  61. isSwitch: false, // 是否开启吸附
  62. }
  63. },
  64. props: {
  65. config: {
  66. type: Object,
  67. default: {
  68. isEdit: false,
  69. divide: true,
  70. groupSelect: false
  71. }
  72. }
  73. },
  74. computed: {
  75. },
  76. methods: {
  77. // 移动画布
  78. // moveCanvas() {
  79. // this.active = this.active != "move" ? "move" : '';
  80. // this.$emit('move', this.active == 'move');
  81. // },
  82. //
  83. groupSelect() {
  84. this.active = 'groupSelect';
  85. this.$emit('groupSelect');
  86. },
  87. // 适配大小
  88. fitToWindow() {
  89. this.$emit('fit');
  90. },
  91. // 下拉菜单
  92. handleCommand(command) {
  93. this.$emit(command)
  94. },
  95. // 是否开启吸附
  96. handleDivideCommand(commond) {
  97. this.$emit('changeAbsorb', this.isSwitch);
  98. },
  99. // 切割编辑
  100. divide() {
  101. this.active = 'divide';
  102. this.$emit('divide');
  103. },
  104. // 清除编辑
  105. clearDivide() {
  106. this.active = '';
  107. this.$emit('clearDivide');
  108. },
  109. // 撤销
  110. undo() {
  111. this.$emit('undo');
  112. },
  113. // 反撤销
  114. redo() {
  115. this.$emit('redo');
  116. },
  117. // 减
  118. reduce() {
  119. this.sliderVal /= 1.1;
  120. if (this.sliderVal < this.min) {
  121. this.sliderVal = this.min;
  122. }
  123. this.scale(this.sliderVal);
  124. },
  125. // 缩放
  126. scale(val) {
  127. // 换算
  128. let scale = val * this.everyScale / 10;
  129. this.$emit('scale', scale);
  130. },
  131. // 加
  132. plus() {
  133. this.sliderVal *= 1.1;
  134. if (this.sliderVal > this.maxScale) {
  135. this.sliderVal = this.maxScale;
  136. }
  137. this.scale(this.sliderVal);
  138. }
  139. }
  140. }
  141. </script>
  142. <style lang="less" scoped>
  143. #canvas-actions-box {
  144. min-width: 542px;
  145. & > div {
  146. float: left;
  147. font-size: 20px;
  148. padding: 0 10px;
  149. color: #fff;
  150. background-color: #6da60f;
  151. i {
  152. cursor: pointer;
  153. color: #fff;
  154. }
  155. }
  156. & > div:active {
  157. background-color: #4b7902;
  158. }
  159. & > div.active {
  160. background-color: #4b7902;
  161. }
  162. &.isEdit > div {
  163. background-color: #02a7f0;
  164. }
  165. &.isEdit > div:active {
  166. background-color: #027db4;
  167. }
  168. &.isEdit > div.active {
  169. background-color: #027db4;
  170. }
  171. & > div.line {
  172. width: 200px;
  173. height: 40px;
  174. padding: 0;
  175. /deep/.el-slider__runway {
  176. margin: 18px 0;
  177. height: 4px;
  178. .el-slider__bar {
  179. background-color: #fff;
  180. height: 4px;
  181. }
  182. }
  183. }
  184. }
  185. </style>