Vue-Cli的生命周期写法,methods要与data()平级,生命周期函数要与methods平级

简介: Vue-Cli的生命周期写法,methods要与data()平级,生命周期函数要与methods平级

写法案例

<template>
  <h2>复制或剪切图片后以ctrl + V 粘贴</h2>
   <img id="img" src="" alt="">
</template>
 
<script>
export default {
  methods: {
    setPasteImg(){
            //粘贴事件
            document.addEventListener('paste', function(event){
                if (event.clipboardData || event.originalEvent) {
                    var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                    if(clipboardData.items){
                        var  blob;
                        for (var i = 0; i < clipboardData.items.length; i++) {
                            if (clipboardData.items[i].type.indexOf("image") !== -1) {
                                blob = clipboardData.items[i].getAsFile();
                            }
                        }
                        var render = new FileReader();
                        render.onload = function (evt) {
                            //输出base64编码
                            var base64 = evt.target.result;
                            document.getElementById('img').setAttribute('src',base64);
                        }
                        render.readAsDataURL(blob);
                    }
 
                }
 
            })
        }
  },
  mounted(){
    this.setPasteImg()
  }
}
</script>
 
<style>
      #img{
            width: 800px;
            box-shadow: 0 0 5px blue;
        }
</style>
目录
打赏
0
0
0
0
45
分享
相关文章
【C语言】循环结构程序设计(第二部分 -- 习题讲解)
【C语言】循环结构程序设计(第二部分 -- 习题讲解)
121 1
【workerman】uniapp+thinkPHP5使用GatewayWorker实现实时通讯
上述为之前给公司做内部通讯软件时个人整理内容,水平有限,如有错误之处,望各位园友不吝赐教!如果觉得不错,请点击推荐和关注!谢谢~๑•́₃•̀๑ [鲜花][鲜花][鲜花]
317 0
java ics解析ical4j
java ics解析ical4j
282 0
基于springboot+vue.js+uniapp的大学生勤工助学管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生勤工助学管理系统附带文章源码部署视频讲解等
124 0
JS 中数组的交集、并集、补集问题
JS 中数组的交集、并集、补集问题
241 0
简单两步实现 Jacoco+Android 代码覆盖率的接入!(最新最全版)(一)
简单两步实现 Jacoco+Android 代码覆盖率的接入!(最新最全版)
1665 0
简单两步实现 Jacoco+Android 代码覆盖率的接入!(最新最全版)(一)
浅析自动机器学习(AutoML)工具NNI(下)
NNI 简介 NNI (Neural Network Intelligence) 是一个轻量级但功能强大的自动机器学习(AutoML)工具包,可帮助用户自动化特征工程、神经架构搜索、超参数调优和模型压缩,并支持单机、本地多机、云等不同的运行环境。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等