设置vue-cropper有点问题，能不能帮我看下是哪里出现的问题？

[zhangwei900808]

<template>
  <div class="edit-teacher-container">
        <Card>
                <div slot="title">
                    <Button type="text" icon="reply" @click.native="returnTeacherPage">返回</Button>
                </div>          
                <Button slot="extra" type="primary" icon="plus-round" @click.native="saveTeacher">保存</Button>
                <Row :gutter="16">
                    <Col span="10">
                        <Card style="height:500px">
                            <p slot="title">
                                <Icon type="person"></Icon>
                                设置老师头像
                            </p>
                                <Button type="primary" @click="modal1 = true">上传文件</Button>

                        </Card>
                    </Col>
                </Row>
        </Card>

        <Modal
            v-model="modal1"
            title="设置老师头像"
            width=800
            @on-ok="ok"
            @on-cancel="cancel">
            <vueCropper
                ref="cropper2"
                :img="example2.img"
                :outputSize="example2.size"
                :outputType="example2.outputType"
                :info="example2.info"
                :canScale="example2.canScale"
                :autoCrop="example2.autoCrop"
                :autoCropWidth="example2.width"
                :autoCropHeight="example2.height"
                :fixed="example2.fixed"
                :fixedNumber="example2.fixedNumber"
            ></vueCropper>
    </Modal>
  </div>
</template>
<script>
import vueCropper from 'vue-cropper'

export default {
    components:{
        vueCropper
    },
data () {
    return {
        modal1: false,
        example2: {
                img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
                info: true,
                size: 1,
                outputType: 'jpeg',
                canScale: false,
                autoCrop: true,
                // 只有自动截图开启 宽度高度才生效
                autoCropWidth: 300,
                autoCropHeight: 300,
                // 开启宽度和高度比例
                fixed: true,
                fixedNumber: [1, 1]
            }
    }
}
</script>

[xyxiao001]

有什么问题

[xyxiao001]

你需要在组件上设置v-if 因为是弹框 所以需要弹窗出现后 去渲染组件

[zhangwei900808]

我试试哈

[zhangwei900808]

设置了， 还是不行

[xyxiao001]

vue-cropper 外层div需要设置宽度 高度

[xyxiao001]

需要

vuecropper

外面设置下宽度高度

[zhangwei900808]

恩，可以了，可是你的例子代码没有设置宽高度所以我也不知道，希望你能加上去，方便操作

[xyxiao001]

好的 我会去加上的

[zhangwei900808]

@xyxiao001 我想设置这个截取框的宽度和高度如何设置啊，默认就500px X 500px了

[xyxiao001]

[zhangwei900808]

不行啊，不管我怎么设置都是500*500

example2: {
                img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
                info: true,
                size: 1,
                outputType: 'jpeg',
                canScale: false,
                autoCrop: true,
                // 只有自动截图开启 宽度高度才生效
                autoCropWidth: 10,
                autoCropHeight: 10,
                // 开启宽度和高度比例
                fixed: true,
                fixedNumber: [1, 1]
            },

[xyxiao001]

上面属性和下面没对应

[xyxiao001]

我例子里面写错了 sorry 我去改正

[zhangwei900808]

好吧

[zhangwei900808]

可以了，谢了