canvasFun.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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/yl.png' alt />
  19. </el-tooltip>
  20. <el-tooltip v-else effect='dark' content='显示店铺名称' placement='top'>
  21. <img src='../../assets/imgs/er.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: 200,
  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. mounted() {}
  106. }
  107. </script>
  108. <style lang="less" scoped>
  109. .action-box {
  110. width: 400px;
  111. height: 40px;
  112. background: rgba(255, 255, 255, 1);
  113. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  114. border-radius: 2px;
  115. margin: 0 auto;
  116. display: flex;
  117. align-items: center;
  118. overflow: hidden;
  119. .small-block {
  120. border-right: 1px solid #e4e5e7;
  121. padding: 12px;
  122. cursor: pointer;
  123. i {
  124. width: 16px;
  125. height: 16px;
  126. display: inline-block;
  127. img {
  128. width: 100%;
  129. height: 100%;
  130. }
  131. }
  132. }
  133. .small-size {
  134. cursor: pointer;
  135. padding: 12px;
  136. font-size: 28px;
  137. }
  138. .small-slide {
  139. flex: 1;
  140. height: 100%;
  141. padding: 0 8px;
  142. margin-top: 10px;
  143. border-left: 1px solid #e4e5e7;
  144. border-right: 1px solid #e4e5e7;
  145. }
  146. }
  147. </style>
  148. <style lang="less">
  149. .action-box {
  150. .el-slider__button {
  151. width: 13px;
  152. height: 13px;
  153. border: 2px solid #025baa;
  154. }
  155. .el-slider__runway {
  156. height: 3px;
  157. background-color: #e4e7ed;
  158. background: rgba(0, 0, 0, 0.45);
  159. border-radius: 1px;
  160. }
  161. .el-slider__button-wrapper {
  162. top: -17px;
  163. }
  164. .el-slider__bar {
  165. height: 3px;
  166. background-color: #025baa;
  167. border-top-left-radius: 1px;
  168. border-bottom-left-radius: 1px;
  169. }
  170. .action-box .el-slider__runway {
  171. background-color: #e8e8e8 !important;
  172. background: #e8e8e8 !important;
  173. }
  174. }
  175. </style>