operateGraphyItem.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <div id="operateGraphyItem">
  3. <div class="div-box" @click="openDrag">
  4. <i class="el-icon-rank"></i>
  5. </div>
  6. <div class="div-box" @click="suitableRatio">
  7. <i class="el-icon-rank"></i>
  8. </div>
  9. <div class="div-box" @click="downImg">
  10. <i class="el-icon-download"></i>
  11. </div>
  12. <div class="div-box" @click="removeRatio">
  13. <i class="el-icon-remove-outline"></i>
  14. </div>
  15. <div class="line">
  16. <el-slider tooltip-class="tooltip-class" :max="0.02" :min="0.004" v-model="sliderValue" @change="adjustRatio"></el-slider>
  17. </div>
  18. <div class="div-box" @click="addRatio">
  19. <i class="el-icon-circle-plus-outline"></i>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import eventBus from "./bus.js";
  25. export default {
  26. data() {
  27. return {
  28. sliderValue: 0.004,
  29. isopenDrags:false ,//是否鼠标左键移动图片
  30. };
  31. },
  32. methods: {
  33. // 开启拖动
  34. openDrag() {
  35. this.isopenDrags = !this.isopenDrags;
  36. eventBus.$emit('openDrags',this.isopenDrags)
  37. },
  38. //合适比例
  39. suitableRatio() {
  40. eventBus.$emit("suitableRatios");
  41. },
  42. // 滑块调整比例
  43. adjustRatio(val) {
  44. this.sliderValue = val;
  45. eventBus.$emit("changeRatios", this.sliderValue);
  46. },
  47. //增加比例
  48. addRatio() {
  49. if (this.sliderValue >= 0.02) {
  50. this.sliderValue = 0.02;
  51. } else {
  52. this.sliderValue = this.sliderValue + 0.001;
  53. }
  54. eventBus.$emit("changeRatios", this.sliderValue);
  55. },
  56. //减少比例
  57. removeRatio() {
  58. if (this.sliderValue <=0.004) {
  59. this.sliderValue = 0.004;
  60. } else {
  61. this.sliderValue = this.sliderValue - 0.001;
  62. }
  63. eventBus.$emit("changeRatios", this.sliderValue);
  64. },
  65. // 下载图片
  66. downImg(){
  67. eventBus.$emit("downImgs");
  68. }
  69. },
  70. mounted() {
  71. let that = this;
  72. eventBus.$on('viewScale',function(scale){
  73. console.log(scale,'scalescale')
  74. that.sliderValue = scale;
  75. })
  76. },
  77. };
  78. </script>
  79. <style lang="less">
  80. #operateGraphyItem {
  81. display: flex;
  82. position: relative;
  83. border: 1px #ddd solid;
  84. border-radius: 5px;
  85. overflow: hidden;
  86. z-index: 999;
  87. .div-box {
  88. font-size: 24px;
  89. width: 40px;
  90. height: 40px;
  91. background: #67c23a;
  92. display: flex;
  93. justify-content: center;
  94. align-items: center;
  95. color: #fff;
  96. cursor: pointer;
  97. border-right: 1px #ddd solid;
  98. }
  99. .line {
  100. width: 200px;
  101. font-size: 12px;
  102. display: block;
  103. background: #67c23a;
  104. border-right: 1px #ddd solid;
  105. .tooltip-class {
  106. width: 100%;
  107. background-color: #409eff;
  108. }
  109. }
  110. }
  111. </style>