点击切图后, 有能不改变url的方法吗?

[sishen0112]

你好, 我每次执行finish时候, 都会 在我地址栏的url的#前加上一个 ? , 然后导致我的页面刷新, 请问是怎么回事儿? 我的finish中没有任何改动url的代码, 而且我看了你的源码, 好像也没这一块, 请问如何解决?

发现新情况, 我使用的iview的UI框架, 我把我的切图组件放在Modal里, 就出现这个问题。 当我把组件不放Modal里， 就没有这种问题。

<template>
  <section>
    <div v-if="option.img === ''" class="text-center">
      请先选择图片
    </div>
    <vueCropper v-else ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop" :autoCropWidth="option.width" :autoCropHeight="option.height" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :full="true" style="height:300px;"></vueCropper>
    <div class="text-center">
      <img class="preview" :src="output" v-if="output" alt="">
    </div>
    <input style="display:inline-block" type="file" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg">
    <button @click="finish()" class="btn btn-info">确定裁切</button>
  </section>

</template>

<script>
import vueCropper from 'vue-cropper'
export default {
  components: {
    vueCropper
  },
  props: {
    resetimg: String,
    width: Number,
    height: Number
  },
  data() {
    return {
      option: {
        img: '',
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 300,
        autoCropHeight: 250,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [this.width || 85, this.height || 54]
      },
      output: ''
    }
  },
  watch: {
    resetimg: function (value, oldValue) {
      this.option.img = value
      this.output = ''
    }
  },
  methods: {
    uploadImg(e) {
      // 上传图片
      // this.option.img
      var file = e.target.files[0]
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }
      var reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        this.option.img = data
      }
      reader.readAsArrayBuffer(file)
    },
    finish() {
      this.$refs.cropper.getCropData(
        (data) => {
          this.output = data
          console.log('切图')
          this.$emit('imgBase64', this.output)
          this.$refs.cropper.clearCrop()   // 清除切图
        })
    }
  }
}
</script>
<style lang="stylus" scoped>
.preview {
  width: 325px;
}
</style>
`

[xyxiao001]

什么意思 url

[xyxiao001]

你是说图片的url 嘛

[sishen0112]

@xyxiao001 不是啊, 是地址栏的URL, 我重新描述了问题

[xyxiao001]

你这个emit 触发的是啥

[sishen0112]

@xyxiao001 emit就是把图片的base64传到父组件中。 我这边发现新情况, 我使用的iview的UI框架, 我把我的切图组件放在Modal里, 就出现这个问题。 当我把组件不放Modal里， 就没有这种问题。

[xyxiao001]

是不是因为modal里面有什么事件触发 导致页面跳转

[sishen0112]

@xyxiao001 目前没有, 我只点开了Modal, 然后点了我的组件中的"确定裁切", 然后url中就加了?, 页面就自动刷新了。 在加了?的页面进行同样的操作, 就不会有任何问题.

[xyxiao001]

this.$emit('imgBase64', this.output) 这个注释掉呢 还会不会跳转

[sishen0112]

注释掉还是会跳转, 现在发现在父组件中, 我把裁切器放在了

中才导致了这个bug

[xyxiao001]

[sishen0112]

就把裁切器放form外卖就好了........

[sishen0112]

可以关闭这个issue了...