canvasFun.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <template>
  2. <div>
  3. <div class='action-box'>
  4. <div class='small-block'>
  5. <el-dropdown size='mini' placement='top-start' @command='handleCommand'>
  6. <i>
  7. <img src='../../assets/imgs/dl.png' alt />
  8. </i>
  9. <el-dropdown-menu slot='dropdown'>
  10. <el-dropdown-item command='savePng'>保存为png</el-dropdown-item>
  11. <el-dropdown-item command='saveSvg'>保存为svg</el-dropdown-item>
  12. </el-dropdown-menu>
  13. </el-dropdown>
  14. </div>
  15. <div class='small-block' @click="showText">
  16. <i>
  17. <img src='../../assets/imgs/er.png' alt />
  18. </i>
  19. </div>
  20. <div class='small-block' @click='fitToWindow'>
  21. <i>
  22. <img src='../../assets/imgs/qp.png' alt />
  23. </i>
  24. </div>
  25. <div class='small-size' @click='reduce'>
  26. <i>-</i>
  27. </div>
  28. <div class='small-slide'>
  29. <el-slider tooltip-class='tooltip-class' :min='min' v-model='sliderVal' :show-tooltip='false' @input='scale' :max='max'></el-slider>
  30. </div>
  31. <div class='small-size' @click='plus'>
  32. <i>+</i>
  33. </div>
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {
  41. sliderVal: 1, // 滑块值
  42. active: '',
  43. min: 1,
  44. max: 1000,
  45. everyScale: 1, // 每份的放大倍数
  46. isSwitch: false // 是否开启吸附
  47. }
  48. },
  49. methods: {
  50. // 适配大小
  51. fitToWindow() {
  52. this.$emit('fit')
  53. },
  54. // 下拉菜单
  55. handleCommand(command) {
  56. this.$emit(command)
  57. },
  58. // 是否开启吸附
  59. handleDivideCommand(commond) {
  60. this.$emit('changeAbsorb', this.isSwitch)
  61. },
  62. // 切割编辑
  63. divide() {
  64. this.active = 'divide'
  65. this.$emit('divide')
  66. },
  67. // 清除编辑
  68. clearDivide() {
  69. this.active = ''
  70. this.$emit('clearDivide')
  71. },
  72. // 减
  73. reduce() {
  74. this.sliderVal /= 1.1
  75. if (this.sliderVal < this.min) {
  76. this.sliderVal = this.min
  77. }
  78. this.scale(this.sliderVal)
  79. },
  80. // 缩放
  81. scale(val) {
  82. // 换算
  83. let scale = (val * this.everyScale) / 10
  84. this.$emit('scale', scale)
  85. },
  86. // 加
  87. plus() {
  88. this.sliderVal *= 1.1
  89. if (this.sliderVal > this.maxScale) {
  90. this.sliderVal = this.maxScale
  91. }
  92. this.scale(this.sliderVal)
  93. },
  94. showText() {
  95. this.$emit('showText')
  96. }
  97. }
  98. }
  99. </script>
  100. <style lang="less" scoped>
  101. .action-box {
  102. width: 400px;
  103. height: 40px;
  104. background: rgba(255, 255, 255, 1);
  105. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  106. border-radius: 2px;
  107. margin: 0 auto;
  108. display: flex;
  109. align-items: center;
  110. overflow: hidden;
  111. .small-block {
  112. border-right: 1px solid #e4e5e7;
  113. padding: 12px;
  114. cursor: pointer;
  115. i {
  116. width: 16px;
  117. height: 16px;
  118. display: inline-block;
  119. img {
  120. width: 100%;
  121. height: 100%;
  122. }
  123. }
  124. }
  125. .small-size {
  126. cursor: pointer;
  127. padding: 12px;
  128. font-size: 28px;
  129. }
  130. .small-slide {
  131. flex: 1;
  132. height: 100%;
  133. padding: 0 8px;
  134. margin-top: 10px;
  135. border-left: 1px solid #e4e5e7;
  136. border-right: 1px solid #e4e5e7;
  137. }
  138. }
  139. </style>
  140. <style lang="less">
  141. .action-box {
  142. .el-slider__button {
  143. width: 13px;
  144. height: 13px;
  145. }
  146. .el-slider__runway {
  147. height: 3px;
  148. background-color: #e4e7ed;
  149. background: rgba(0, 0, 0, 0.45);
  150. border-radius: 1px;
  151. }
  152. .el-slider__button-wrapper {
  153. top: -17px;
  154. }
  155. .el-slider__bar {
  156. height: 3px;
  157. background-color: #025baa;
  158. border-top-left-radius: 1px;
  159. border-bottom-left-radius: 1px;
  160. }
  161. }
  162. </style>