canvasFun.vue 4.7 KB

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