canvasFun.vue 4.7 KB

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