vue工作知识点

阳光穿透心脏的1/2处 2022-09-12 10:48 163阅读 0赞

## 滚动条触底 ##

<div class="innerBox" @scroll="scrollEvent">
         <div class="item" @click.stop="onTarget(item.custName)" v-for = "item in NewItems">{ { item.custName}}</div>
    </div>
    
    
    //滚动条触发事件
    scrollEvent(e) { 
       console.log(e)
       if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight ) { 
           console.log("嘿嘿我在底部触发了")
       }
    },

## 定时30秒请求数据 ##

window.setInterval(() => { 
    setTimeout(() => { 
    ///调取接口
    }, 0)
    }, 30000)
    //setTimeout是自带清除定时器

## 下载视频音频 ##

function downloadIamge (imgsrc, name) {  // 下载图片地址和图片名
    			  var canvas = document.createElement('canvas')
    			  var img = document.createElement('img')
    			  img.onload = function(e) { 
    				canvas.width = img.width
    				canvas.height = img.height
    				var context = canvas.getContext('2d')
    				context.drawImage(img, 0, 0, img.width, img.height)
    				canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height)
    				canvas.toBlob((blob) => { 
    				  const link = document.createElement('a')
    				  link.href = window.URL.createObjectURL(blob)
    				  link.download = name
    				  link.click()
    				}, 'image/jpeg')
    			  }
    			  img.setAttribute('crossOrigin', 'Anonymous')
    			  img.src = imgsrc
    			}
    		function downBlob(){ 
    			fetch('http://test.oss.carlinx.cn/west-lake-radio/wx/mp/picture/632933320929447936.jpeg').then(res => res.blob().then(blob => { 
    				var a = document.createElement('a');
    				var url = window.URL.createObjectURL(blob);
    				var filename = '632933320929447936.jpeg';
    				a.href = url;
    				a.download = filename;
    				a.click();
    				window.URL.revokeObjectURL(url);
    			}))
    		}

## 数字超出后无法换行 ##

<p style="word-break: break-all; "></p>

## 动态改变高度，适配 ##

height: calc(100% - 70px)；

## 鼠标手样式 ##

<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
    <span style="cursor:auto">auto</span><br>
    <span style="cursor:crosshair">crosshair</span><br>
    <span style="cursor:default">default</span><br>
    <span style="cursor:e-resize">e-resize</span><br>
    <span style="cursor:help">help</span><br>
    <span style="cursor:move">move</span><br>
    <span style="cursor:n-resize">n-resize</span><br>
    <span style="cursor:ne-resize">ne-resize</span><br>
    <span style="cursor:nw-resize">nw-resize</span><br>
    <span style="cursor:pointer">pointer</span><br>
    <span style="cursor:progress">progress</span><br>
    <span style="cursor:s-resize">s-resize</span><br>
    <span style="cursor:se-resize">se-resize</span><br>
    <span style="cursor:sw-resize">sw-resize</span><br>
    <span style="cursor:text">text</span><br>
    <span style="cursor:w-resize">w-resize</span><br>
    <span style="cursor:wait">wait</span><br>

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue基础知识点

1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点:

小鱼儿/ 2022年11月26日 11:00/ 0 赞/ 180 阅读

相关 vue相关知识点

1、插槽slot 插槽使组件具有更强的扩展性，抽取共性，保留不同在子组件中，使用特殊的元素slot就可以为子组件开启一个插槽（可设置默认值），该插槽插入什么内容取决于

骑猪看日落/ 2022年11月01日 04:29/ 0 赞/ 260 阅读

相关 vue工作知识点

滚动条触底 <div class="innerBox" @scroll="scrollEvent"> <div class="item" @cl

阳光穿透心脏的1/2处/ 2022年09月12日 10:48/ 0 赞/ 164 阅读

相关 Vue常见知识点

MVVM是什么？ MVVM是Model-View-ViewModel的缩写。Model代表数据模型，View代表UI页面组件，用于展现给用户的，ViewModel是监听模型数

迈不过友情╰/ 2022年05月12日 11:46/ 0 赞/ 310 阅读

相关 vue--知识点总结

vue--知识点总结：目录 1. v-if与v-show的区别 2. Vue的双向数据绑定原理 3. Vue的生命周期 4. 封装 vue 组件的过程 5.

青旅半醒/ 2022年05月12日 03:38/ 0 赞/ 241 阅读

相关 vue知识点汇总

Vue面试中，经常会被问到的面试题/Vue知识点整理一、对于MVVM的理解？ MVVM 是 Model-View-ViewModel 的缩写。 Mo

青旅半醒/ 2022年03月07日 11:52/ 0 赞/ 396 阅读

相关 vue 基础知识点

1.指令 v-html:会覆盖内部内容会有xss攻击不要用在用户提交的时候 <p v-html="inHtml"><span>aaaa</span></p>

骑猪看日落/ 2021年08月28日 16:39/ 0 赞/ 507 阅读

相关 Vue知识点（1）

为什么要用VUE? 1.1 性能更好 1.2 视图数据分离 1.3 维护成本低哪些操作会影响WEB性能？操作DOM影响性能，因为操作DOM是十分昂贵的

向右看齐/ 2021年07月25日 14:29/ 0 赞/ 537 阅读

相关 Vue知识点汇总

一、MVVM的理解 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双

àì夳堔傛蜴生んèń/ 2021年07月24日 19:38/ 0 赞/ 545 阅读

相关 vue知识点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3

た入场券/ 2021年07月24日 12:55/ 0 赞/ 579 阅读