canvasFun.vue 3.4 KB

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