![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
codeXml
web developer
展开
-
文字超出部分以省略号(...)代替,并显示tooltip,未超出不显示
文字超出部分以省略号(...)代替,并显示tooltip,未超出不显示原创 2022-08-02 15:46:58 · 2060 阅读 · 0 评论 -
基于xterm.js + socket.js的Web SSH
xterm.js 作为终端面板,以 socket.js + stompjs 实现消息通信。效果如下:代码:<template> <div> <div ref="terminalContainer"></div> </div></template><script lang="ts">import {Vue, Component, Prop } from "vue-property-dec.原创 2022-03-16 17:18:31 · 2466 阅读 · 4 评论 -
字体大小随容器宽度自适应变化 - vue
需求:固定宽高的容器,内部文字长度不固定,字号大小需要随着文字数量的变化而变化,使得文字始终以一行撑满容器。效果如图:实现思路:拿到文字所在dom的水平宽度 childWidth,并取得其父级dom的水平宽度 parentWidth。这里需要对超出父级容器的部分缩小,所以可以用:parentWidth / childWidth = scalcVal如果文字长度超出父容器,则会得到一个介于0 ~ 1之间的值,这个值可以直接作为缩放比例使用,再结合css3的transform:scale(x.原创 2022-01-07 15:25:26 · 6364 阅读 · 1 评论 -
图片加载失败后显示默认图片
加载失败后显示默认图:<img :src="`${img}.png`" onerror="javascript:this.src='logo.png'"/>也可以在图片加载失败后弹出提示:<img src="image.gif" onerror="alert('图片不能被加载。')">扩展小知:img除了支持加载失败的回调,也支持加载中断及加载成功的回调。用法:onabort:<img src="image_w3default.gif" onabort原创 2022-01-06 10:22:20 · 4305 阅读 · 0 评论 -
draggable拖拽组件的使用
背景:左右两个数据栏,左侧为数据源,右侧为组建的目标数据。要实现左侧和右侧可以互相拖拽,但是左侧拖拽到右侧后源数据不变,右侧拖拽到左侧时,无论丢在左侧哪里都回到源数据原来的分组下;并且,左侧和右侧内部都可以上下拖拽调整位置。效果图:如下,左侧有分组,每一组可以直接通过拖拽A(xxx应用)、B(xxx应用)等上下调整组的位置,组内可以上下拖拽调整先后顺序。代码:import Draggable from "vuedraggable";components: { Draggable,.原创 2021-10-21 14:33:41 · 1219 阅读 · 0 评论 -
uniapp使用canvas绘制卡片并下载到本地
效果:简介最多显示3行,超过3行部分用省略号(…)代替。代码:<canvas style="width: 100%; height: 409px;" canvas-id="myCanvas"></canvas>// 绘制图片createImg (qrcode) { uni.showLoading({ title: '生成中' }) const that = this; const ctx = uni.createCanvasContext('myCanvas原创 2021-10-21 13:44:16 · 665 阅读 · 0 评论 -
js调TSC打印机
1、将TSCActiveX.dll和TSCLIB.dll放入C:\Windows\SysWOW64目录下,32位系统放入:C:\Windows\System322、以管理员身份运行命令行工具,直接执行下面命令:32位系统:regsvr32 TSCActiveX.dll64位系统:regsvr32 C:\Windows\SysWOW64\TSCActiveX.dll3、ie浏览器配置启用ActiveX控件和插件 var TSCObj = new ActiveXObject("TSCActiv.原创 2021-01-18 21:23:08 · 1437 阅读 · 0 评论 -
canvas文字换行处理
项目中需要用到canvas绘图,关于文字换行的处理一直没找到合适的解决方案,于是自己动手撸了一个。函数实现的功能:1、设置最大行数(最多多少行),超出部分用省略号(…)表示。2、最大行数(lineNum)传入-1,实现自动换行效果。参数说明: * 参数解析: * * ctx: canvas绘图上下文 * str: 需要绘制的文本内容 * draw_width: 绘制后的文字显示宽度 * lineNum: 最大行数,多出部分用'...'表示, 如原创 2020-12-11 14:50:59 · 6472 阅读 · 6 评论 -
wangeditor渲染不出来,报错xxx of undefined
原配置: var editor = new E('#div') editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片 editor.create()改为:var editor = new E('#div')// 兼容老版本let config = editor.customConfig ? editor.customConfig : editor.confg;config .uploadImgShowBas原创 2020-11-25 13:29:24 · 2586 阅读 · 2 评论 -
instanceof原理解析
原理:当A的原型链中包含B的显式原型则匹配成功,否则失败。什么是隐式原型(__proto__)什么是显式原型(prototype)?1.函数的prototype属性:在函数定义时自动添加的,默认值是一个空的object对象2.对象的__proto__属性:创建对象时自动添加对的默认值为构造函数的prototype属性值3.程序员可以直接操作显式原型,但是不能直接操作隐式原型(ES6之前)对象的隐式原型为其对应构造函数的显式原型的值什么是原型链呢?可以看这篇介绍代码实现:functio.原创 2020-11-05 18:19:44 · 227 阅读 · 0 评论 -
js的日期时间组件方法
getTime()返回表示日期的毫秒数;与valueOf()方法返回的值相同setTime(毫秒)以毫秒数设置日期,会改变整个日期getFullYear()取得4位数的年份(如2007而非仅07)getUTCFullYear()返回UTC日期的4位数年份setFullYear(年)设置日期的年份。传入的年份值必须是4位数字(如2007而非仅07) setUTCFullYear(...原创 2020-04-02 22:02:37 · 955 阅读 · 0 评论 -
js的迭代方法
ECMAScript 5 为数组定义了 5 个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响 this 的值。传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。以下是这 5 个迭代方法的作用:every():对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true。filter()...原创 2020-04-02 21:43:21 · 190 阅读 · 0 评论 -
html2canvas爬坑
背景情况:由于项目需要,需在点击按钮时触发一个弹窗,将弹窗内的东西绘制成图片供用户保存到本地。弹窗内有图片有文字,当弹窗的图片为类似于http://www.test.com/xxx/xxx.jpg的网络路径时会提示跨域错误。1、首先设置useCORS: true,有的人会同时设置allowTaint。其实没有必要,这两个会互相覆盖的,设置一个就成。2、设置跨域域名proxy:'图片域名'’3...原创 2020-03-04 16:04:22 · 464 阅读 · 2 评论 -
vue倒计时(天时分秒)
直接上代码,复制可用。1、html部分<p style="line-height: 1.5rem;" v-html="countTxt"></p>2、script部分import { formateTimeStamp } from '@/util/tools.js'export default { props: { infos: { type: [A...原创 2020-02-24 15:56:52 · 3142 阅读 · 1 评论 -
vue在列表中使用倒计时
应用场景:订单列表中每个待支付订单的有效时长倒计,或者拼团的倒计时,如下1、html仅展示主要部分,这里limit_time 的值为一个具体时长,如:86400秒,可以根据自己的实际情况进行换算。<div v-for="(spellGroup, index) in groups" :key="index"> <p >剩余 {{spellGroup.limit_ti...原创 2020-02-24 15:49:21 · 5226 阅读 · 6 评论 -
html2canvas生成的图片偏移不完整
问题背景:生成的图片在一个弹窗里面,如果页面没有滚动条就是正常的,但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边,如下:解决办法:楼主查了很多资料,也用了很多方法都没能解决这个问题,一气之下打算研究研究html2canvas的配置参数,果不其然,在配置参数RenderOptions下找到如下配置眼尖的楼主立马发现了scrollY这个东西。...原创 2020-02-16 17:03:34 · 7879 阅读 · 2 评论 -
vue-cli中使用jquery
vue-cli3.x的目录结构很简单,去掉了2.x中的build目录和config目录,只有一个vue.config.js文件用于项目配置。1、首先引入jquery npm install --save jquery2、添加如下配置到vue.config.jsconst webpack = require('webpack')module.exports = { configu...原创 2019-12-16 11:21:44 · 173 阅读 · 0 评论 -
js调取原生app方法
1、js调ios方法(只需替换iosFun方法名即可)传参时var data = {test: 'test'};window.webkit.messageHandlers.iosFun.postMessage(data);不传参时(一定要传空字符串)window.webkit.messageHandlers.iosFun.postMessage("");2、js调安卓方法(andr...原创 2019-11-01 14:43:24 · 1449 阅读 · 0 评论 -
微信网页静默授权获取用户信息——koa2.x
1、获取code2、通过code获取用户openid3、拿着用户的openid换取用户信息1、构造请求url如下(只能在公众号内打开):https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8888888888888888&redirect_uri=http://mascot.duapp.com/oauth2....原创 2019-06-20 15:12:37 · 2003 阅读 · 0 评论 -
vue2.x v-for下当点击某一个item时添加class 样式,类似于单选
动态添加class的关键是判断条件,点击某个item时设置isAdd为当前索引,以使得index == isAdd为true,就能成功添加class到我们点击的item上 <p v-for="(sel, index) in selection" :key="index" :class="{ tavActive:index == isAdd}" @click="tabCheck(ind...原创 2019-05-22 19:37:46 · 1620 阅读 · 0 评论 -
vue导航图标为图片时怎么加载激活图片
如果当前路由和导航中的路由一致,则加载激活状态的图片,否则,加载非激活图片<template> <el-footer> <el-row> <el-col :span="6" v-for="(item,index) in paths" :key="index"> <router-link :to="item.path">...原创 2019-05-21 20:52:07 · 378 阅读 · 0 评论 -
vue爬坑——先到a页面浏览后,跳转到b页面,发现b页面的位置自动跳转到a页面浏览的位置
可以通过监听路由变化解决如下:watch:{ '$route':function(to, from){ document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }}原创 2019-05-21 20:16:29 · 2275 阅读 · 2 评论 -
vue使用clipboard.js实现点击复制功能
1、安装引用npm install clipboard --save2、在main.js全局注册import clipboard from 'clipboard'// 注册到vue原型上Vue.prototype.clipboard = clipboard3、在要使用的vue组件中引用如下,我在copy方法中加了一个3s的延时是因为,提示用户复制成功的弹窗默认展示3s,防止用户多...原创 2019-07-25 16:24:19 · 1145 阅读 · 0 评论 -
vue-video-player视频播放器的使用和配置
1、安装npm install vue-video-player -save2、在main.js中添加import VueVideoPlayer from 'vue-video-player' // 视频播放器import 'video.js/dist/video-js.css'Vue.use(VueVideoPlayer)3、新建一个vueVideoPlayer.vue组件供调...原创 2019-08-05 12:22:55 · 13149 阅读 · 2 评论 -
js添加事件和移除事件:addEventListener()与removeEventListener()
转自原文链接转载 2019-08-09 09:54:34 · 1247 阅读 · 0 评论 -
js判断移动端和pc端(ios还是安卓)
判断是移动端还是pc端 if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { alert('移动端') } else { alert('pc端') }判断是ios还是安卓// 判断是否为ios端访问function _IsIOS () { if (/(iPhone|iPad|iPod|iOS)/i...原创 2019-08-30 09:54:38 · 812 阅读 · 0 评论 -
js常用工具函数
一、与时间有关的方法1、将当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”function getNowTimesFormate (s1, s2, date) { if (date == null) { date = new Date() } var seperator1 = '-' if (s1 != null) { seperator1 = s...原创 2019-09-20 11:31:20 · 354 阅读 · 1 评论 -
js调用异步函数,间歇性报错fun is not defined
问题描述:一个异步函数调用另一个异步函数时,内部的函数一会儿报错fun is not defined,有时又不报错。解决思路:一般出现这种情况,说明我们的引入方式没错,有时不报错,说明我们的用法是对的。导致这一问题的根本原因是两个异步函数的执行时间问题。例如,function a(){ b();}假如a和b都是异步函数,a执行完成需要20ms,而b执行完成只需要15ms,...原创 2019-02-22 10:56:53 · 1306 阅读 · 0 评论