安装中的bind()方法正在工作,但是在按钮点击时通过挂载调用我没有工作我正在使用croppie的vue包装器。和vue2 有没有人知道我是否可以直接在模板中使用这个。$ refs.croppieRef.bind()?
<script>
// import Vue from 'vue'
// import VueCroppie from 'vue-croppie'
// Vue.use(VueCroppie)
export default {
mounted () {
console.log('hojhojoh')
this.$refs.croppieRef.bind({
url: 'http://i.imgur.com/fHNtPXX.jpg'
})
this.$refs.croppieRef.rotate(90)
this.$refs.croppieRef.rotate(90)
console.log('hojhojoh')
},
// bind () {
// console.log('yoyoyoyoy')
// },
data () {
return {
cropped: null,
images: [
'http://i.imgur.com/fHNtPXX.jpg',
'http://i.imgur.com/ecMUngU.jpg',
'http://i.imgur.com/7oO6zrh.jpg',
'http://i.imgur.com/miVkBH2.jpg'
]
}
},
methords: {
bind () {
console.log('hihihihi')
this.croppie.bind({
url: 'http://i.imgur.com/ecMUngU.jpg'
})
},
crop () {
this.$refs.croppieRef.result((output) => {
this.cropped = output
})
},
rotate: function (rotationAngle) {
this.$refs.croppieRef.rotate(rotationAngle)
}
}
}
</script>
<template>
<div>
<vue-croppie
ref=croppieRef
resultType="base64"
:enableOrientation="true">
</vue-croppie>
<img v-bind:src="cropped">
<button v-on:click="bind()">Bind</button>
<!-- Rotate angle is Number -->
<button v-on:click="rotate(-90)">Rotate Left</button>
<button @click="rotate(90)">Rotate Right</button>
<button @click="crop()">Crop</button>
</div>
</template>