wenjfaa 2021-08-17 14:25 采纳率: 100%
浏览 698
已结题

vue中index.js:978 ReferenceError: h is not defined

编译后h is not defined

<template>
    <div class="alert-box-item">
        <div class="bigImg-div" @click="toGetImg"><img class="bigImg" :src="valueUrl" v-if="valueUrl" /></div>
        <view id="app">
            <button @click="onOff">渐变</button>
            <message v-show="isShow" />
        </view>
    </div>
</template>

<script>
    <remote-script src="../../js/velocity.min.js"></remote-script>;
    <remote-script src="../../js/vue.js"></remote-script>;
    // import '../../js/velocity.min.js' 
    // import '../../js/vue.js'
// <remote src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" />;
// <remote src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js" />
let message = {
    template: `
        <transition name="fade"
        :css="false"
        @before-enter="beforeEnter"
        @enter="enter"
        @before-leave="beforeLeave"
        @leave="leave">
        <div style="width:100px; height:100px; background: red"> 我显示了 </div>
        </transition>
        `
};

let inputElement = null;
export default {
    
    data() {
        return {
            valueUrl: ''
        };
    },
    methods: {
        // diyfun:function(){
        //     realconsole();
        // },
        onOff() {
            this.isShow = !this.isShow;
        },
        beforeEnter(el) {
            el.style.opacity = 0;
        },
        enter(el, done) {
            Velocity(
                el,
                {
                    opacity: 1
                },
                {
                    duration: 50000,
                    complete: done
                }
            );
        },
        beforeLeave(el) {
            el.style.opacity = 1;
        },
        leave(el, done) {
            Velocity(
                el,
                {
                    opacity: 0
                },
                {
                    duration: 500,
                    complete: done
                }
            );
        },
        onOff() {
            this.isShow = !this.isShow;
        },
        toGetImg() {
            if (inputElement === null) {
                // 生成文件上传的控件
                inputElement = document.createElement('input');
                inputElement.setAttribute('type', 'file');
                inputElement.style.display = 'none';

                if (window.addEventListener) {
                    inputElement.addEventListener('change', this.uploadFile, false);
                } else {
                    inputElement.attachEvent('onchange', this.uploadFile);
                }

                document.body.appendChild(inputElement);
            }
            inputElement.click();
        },
        uploadFile(el) {
            if (el && el.target && el.target.files && el.target.files.length > 0) {
                console.log(el);
                const files = el.target.files[0];
                const isLt2M = files.size / 1024 / 1024 < 2;
                const size = files.size / 1024 / 1024;
                console.log(size);
                // 判断上传文件的大小
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                } else if (files.type.indexOf('image') === -1) {
                    //如果不是图片格式
                    // this.$dialog.toast({ mes: '请选择图片文件' });
                    this.$message.error('请选择图片文件');
                } else {
                    const that = this;
                    const reader = new FileReader(); // 创建读取文件对象
                    reader.readAsDataURL(el.target.files[0]); // 发起异步请求,读取文件
                    reader.onload = function() {
                        // 文件读取完成后
                        // 读取完成后,将结果赋值给img的src
                        that.valueUrl = this.result;
                        console.log(this.result);
                        // 数据传到后台
                        //const formData = new FormData()
                        //formData.append('file', files); // 可以传到后台的数据
                    };
                }
            }
        }
    },
    beforeDestroy() {
        if (inputElement) {
            if (window.addEventListener) {
                inputElement.removeEventListener('change', this.onGetLocalFile, false);
            } else {
                inputElement.detachEvent('onchange', this.onGetLocalFile);
            }
            document.body.removeChild(inputElement);
            inputElement = null;
            console.log('========inputelement destroy');
        }
    }
};
let vm = new Vue({
    el: '#app',
    data: {
        isShow: false //控制动画 true:显示
    },
    components: {
        message
    }
});

</script>

<style>
.alert-box-item {
    overflow: hidden;
}

.bigImg-div {
    width: 800px;
    height: 800px;
    /* border-radius: 100%; */
    overflow: hidden;
    border: 1px solid #ddd;
}

.bigImg {
    display: block;
    width: 800px;
    height: 800px;
    /* border-radius: 100%; */
}
</style>


运行结果index.js:978 ReferenceError: h is not defined

Hbuilderx vue.js
没有解答思路
Hbuilderx vue.js

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2021-08-17 14:41
    关注

    报错截个图看看。这个应该不是你代码里的问题吧

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 9月17日
  • 已采纳回答 9月9日
  • 创建了问题 8月17日

悬赏问题

  • ¥15 数据库数据成问号了,前台查询正常,数据库查询是?号
  • ¥15 算法使用了tf-idf,用手肘图确定k值确定不了,第四轮廓系数又太小才有0.006088746097507285,如何解决?(相关搜索:数据处理)
  • ¥15 彩灯控制电路,会的加我QQ1482956179
  • ¥200 相机拍直接转存到电脑上 立拍立穿无线局域网传
  • ¥15 (关键词-电路设计)
  • ¥15 如何解决MIPS计算是否溢出
  • ¥15 vue中我代理了iframe,iframe却走的是路由,没有显示该显示的网站,这个该如何处理
  • ¥15 操作系统相关算法中while();的含义
  • ¥15 CNVcaller安装后无法找到文件
  • ¥15 visual studio2022中文乱码无法解决