vue中v-html
<p domPropsInnerHTML={item.content}></p>
<p v-html={item.content}></p>
分类 Vue 下的文章
el-upload beforeUpload 使用async无法拦截
当使用 async await 包裹的情况下，return false 会失效，应使用 return Promise.reject()
ANSI 字体在前端展示 Jenkins日志
最近在做运维平台的开发，前端需要显示Jenkins的日志在前端，其中的ANSI字体就是如下示例。[92m192.168.134.39:服务启动，端口检测，等待第3秒[0m
[92m192.168.134.39:服务启动，端口检测，等待第6秒[0m
[92m192.168.134.39:服务启动，端口检测，等待第9秒[0m
[92m192.168.134.39:服务启动，端口检测，等待第12秒[0m
[92m192.168.134.39:服务启动，端口检测，等待第15秒[0m
[92m192.168.134.39:服务启动，端口...
获取视频某一秒的截图
const handleGetVideoThumb = async function (url, options = {}) {
if (typeof url !== "string") {
console.error("URL must be a string");
return;
}
// 默认参数
const ...
SSE（Server-Sent Events）
服务端const express = require("express");
const cors = require("cors");
const app = express();
const port = 6548;
app.use(cors());
app.get("/sse", (req, res) => {
res.set({
"Content-Type": "text/event-stream",
&quo...
elementui 动态生成的 el-form-item rules校验失效
<el-form-item key='studyTime' label="学习时长" prop="studyTime">添加一个 key='studyTime', key的内容唯一性就行
公式编辑器
自定义公式编辑器在线预览地址<template>
<div class="home">
<div class="calc-main">
<div
class="formulaView"
id="formulaView"
ref="formulaView"
@click.stop="recordPosition()...
TOTP otpauth
import * as OTPAuth from "otpauth"; let totp = new OTPAuth.TOTP({
// Provider or service the account is associated with.
issuer: "ACME",
// Account identifier.
label: "AzureDiamond",
// Algorithm used for the HMAC fu...
vuedraggable
在线预览<template>
<div class="c">
<vuedraggable
handle=".handle"
class="list-group"
tag="ul"
v-model="list"
v-bind="dragOptions"
@start="drag = true"
...
createDecorator 自定义装饰器
二次确认import { MessageBox } from 'element-ui'
import { createDecorator } from 'vue-class-component'
export function Confirm(msg: any) {
return createDecorator(function (opts, handler) {
if (!opts.methods)
throw new Error(
'This decorator ...
axios 设置了返回类型为文件流，但是不返回文件流
if (res.data.type === "application/json") {
let result = await res.data.text();
result = JSON.parse(reader);
}if (res.data.type === "application/json") {
const reader = new FileReader();
reader.readAsText(res.data, "utf-8");
r...
nuxt项目本地启动,多开标签一直显示加载中
本地npm run dev启动，多开几个标签页，会出现卡死或一直转圈的情况，如果关闭其中一个tab标签，卡死的tab标签页就会立即加载完成，控制台看不到任何错误信息。 因为浏览器对同一个主机有连接数限制。官方解释：https://github.com/nuxt/nuxt/issues/8190
Vue TransitionGroup 使用记要
列表的for循环渲染，key值不能为index，否则动画只会作用在最后一个元素
修改原型链导致前端预览PDF异常
添加/修改原型链，导致pdf.js解析异常， 可能此库对原型链做了防污染处理报错如下The `Array.prototype` contains unexpected enumerable properties: hasItem, removeItem; thus breaking e.g. `for...in` iteration of `Array`s其中 hasItem , removeItem 为自定义添加的内容解决方法 let unexpectedProperties = [], logArr = [];
for (let key...
移动端 pdfh5 预览pdf
import pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";let pdfH5Res = new pdfh5("#signpdf", {
pdfurl: resUrl,
responseType: "blob",
});报错异常The `Array.prototype` contains unexpected enumerable properties: hasItem, removeItem; ...
echarts 点击事件
通用点击事件 myChart.on('click', function (params: any) {
if (params.componentType == "xAxis") {
}
// if (params.componentType == "series") {
// }
})
不是数据的地方点击不触发 myChart.getZr().on('click', (params: any) =>...
一个项目不同版本的依赖包
"codemirror": "^6.0.1",
"codemirror5582": "npm:codemirror@5.58.2",npm install 别名@npm:包名@版本号
npm install codemirror5582@npm:codemirror@5.58.2
划词弹框
鼠标选中文本弹出悬浮框，计算选中文字的位置。@mouseup.stop="handleMouseUp"
<div class="cont" id="textareaCont">
<textarea @select.stop="onSelect" @keydown="onKeyDown" ref="origintext" v-model="origin"></textare...
qrcode
import QRCode from 'qrcode'
let canvas:any = document.getElementById('canvas')
QRCode.toCanvas(
canvas,
'text',
{ width: 150 },
function (error) {
...
浏览器内核判断
const userAgent = navigator.userAgent;
const isWechat = /MicroMessenger/.test(userAgent);
const isAlipay = /AlipayClient/.test(userAgent);
const isChrome = /Chrome/.test(userAgent) && /Google Inc/.test(navigator.vendor);
const isFirefox = /Firefox/.test(userAgent);
con...