refactor(components): 重构 RenderCropper 组件

- 注释掉的代码被解除注释,引入 cropperjs 库
- 注释掉的组件被保留(暂时未使用)
- 添加了 cropper 实例化代码,解决之前存在的问题
This commit is contained in:
陈昱达
2025-04-30 17:24:40 +08:00
parent fa803bfd73
commit 6e77ecd5c5

View File

@@ -80,8 +80,15 @@
</div> </div>
</template> </template>
<script> <script>
// import Cropper from 'cropperjs' import Cropper from 'cropperjs'
// import {
// CropperCanvas,
// CropperImage,
// CropperShade,
// CropperHandle,
// CropperSelection,
// CropperViewer
// } from 'vue-cropper'
export default { export default {
name: 'index', name: 'index',
data() { data() {
@@ -119,7 +126,14 @@ export default {
deep: true deep: true
} }
}, },
components: {}, components: {
// CropperCanvas,
// CropperImage,
// CropperShade,
// CropperHandle,
// CropperSelection,
// CropperViewer
},
filters: {}, filters: {},
methods: { methods: {
handleRemove() { handleRemove() {
@@ -129,9 +143,9 @@ export default {
this.file = file this.file = file
this.fileList = [] this.fileList = []
this.visible = true this.visible = true
// setTimeout(() => { setTimeout(() => {
// this.cropper = new Cropper('#image', {}) this.cropper = new Cropper('#image', {})
// }, 300) }, 300)
}, },
confirm() { confirm() {
this.$refs.selection.$toCanvas().then(canvas => { this.$refs.selection.$toCanvas().then(canvas => {