有传统script的安装方法吗？

xyxiao001 / vue-cropper

A simple picture clipping plugin for vue

https://github.xyxiao.cn/vue-cropper/docs/vue3.html

MIT License

4.32k stars 701 forks source link

有传统script的安装方法吗？ #73

Closed RainUUU closed 6 years ago

RainUUU commented 6 years ago

我们现在使用script的方式引入vue的，所以咱们的vue-cropper也有这种安装方法吗？

xyxiao001 commented 6 years ago

直接引入dist 目录下面的index.js就行

RainUUU commented 6 years ago

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript" src="assets/index.js"></script>
</head>
<body>
<div id="app">
    <div class="show-info">
        <vueCropper
                ref="cropper3"
                :img="example3.img"
                :autoCrop="example3.autoCrop"
                :autoCropWidth="example3.autoCropWidth"
                :autoCropHeight="example3.autoCropHeight"
                :fixedBox="example3.fixedBox"
        ></vueCropper>
        <button class="btn">preview(base64)</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return{
                example3: {
                    img: 'https://o90cnn3g2.qnssl.com/0C3ABE8D05322EAC3120DDB11F9D1F72.png',
                    autoCrop: true,
                    autoCropWidth: 200,
                    autoCropHeight: 200,
                    fixedBox: true
                }
            }
        },
        methods: {

        }
    })
</script>
</body>
</html>

现在是这样的，但是页面是空白的

xyxiao001 commented 6 years ago

外层容器需要宽度高度你看看控制台有报错吗

RainUUU commented 6 years ago

没有报错，我从控制台看dom，他显示： <vuecropper img="" outputsize="1" outputtype="png" info="true" canmove="true" canmovebox="true"></vuecropper> 应该是vuecropper没有被vue解析

xyxiao001 commented 6 years ago

你需要注册组件

RainUUU commented 6 years ago

对，我就是不知道如何注册我用Vue.use(vue-cropper/vueCropper/VueCropper)都是报错的。 Uncaught ReferenceError: vuecropper is not defined

RainUUU commented 6 years ago

我差了一下不对，use是使用插件，注册组件应该是

 new Vue({
        el: '#app',
        components: {
            'vueCropper':??
        },
});

上面的？？应该怎么写呢

xyxiao001 commented 6 years ago

vue.component('vue-cropper', window['vue-cropper'])

xyxiao001 commented 6 years ago

你引入的是index.js 需要这样注册

RainUUU commented 6 years ago

嗯可以了，复制的demo的app.vue的代码，改成下面的就好了 Vue.component('vuecropper', window['vue-cropper']); 谢谢哈

xyxiao001 commented 6 years ago

😈可以的