金包银是喵桑-CSDN博客

项目要求用户能够在svg图片上动态绘制矩形框，就需要获取鼠标在svg上的位置尝试直接用getBoundingClientRect()获取宽高，通过viewBox（x，y，width,hieght）里面的width和height去计算比例后，在与offsetX、offsetY相乘，虽然确实能绘制框，但是当svg图经过缩放后就不准确了，所以就记录一下，pass掉。var pageScale = { x: viewBox.width/ thissvg.getBoundingClientRect().w

2022-05-07 16:30:10 929

原创 vue 给纯数组的第n个下标赋值

注意：直接用x[0] = 3这种语句改变不了下标为0的值const x = [1]this.$set(x, 0 , 2); // 给第0个下标值赋值为2console.log(x) // [2]

2022-04-01 09:22:45 543

原创 elementui 表格出现多余横线

出现如下图所示的渲染问题在全局样式表里面添加以下代码即可.el-table::after,.el-table::before { display: none;}

2022-03-24 11:06:47 1336

原创 el-form验证整数，ip

var validateIP = (rule, value, callback) => { var reg = /^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/ if (reg.test(value)) { callback() } else { callback(new Error('请输入正确的格式')) } } // 验证正整数 var

2022-03-15 10:28:26 483

原创获区svg在页面中显示的宽高

dom.getBoundingClientRect().widthdom.getBoundingClientRect().height

2022-02-28 15:06:00 276

原创 vue用iframe播放海康视频

由于项目需要同时显示两个相机的视频，使用上一篇文章封装的组件无法完成，因为当时webVideoCtrl.js是直接定义在全局的，$相当于一整个项目的window,无论怎么使用都只能在第一次定义的dom位置显示视频（如果有更好的方法欢迎评论区告知），因此使用了iframe隔离window。1.在public地址下添加iframe.html2.iframe.html<!doctype html><html><head> <title></

2022-02-28 09:54:11 2933 24

原创 vue 封装和使用海康视频组件，使用了海康的webVideoCtrl.js

1.需要先在public文件下引入webVideoCtrl.js和jquery文件在该目录下的 index.html 里面添加script标签引入文件2.创建海康视频处理组件<template> <div class="video-player"> <div id="divPlugin" class="divPlugin"></div> </div></template><script>exp

2022-02-24 17:06:14 3033 2

原创 vue父组件更新数据，子组件没有变化

是子组件的watch写的不对添加immediate: truewatch: { taskId: { immediate: true, // 必须！ handler (val) { ... } }},

2022-02-22 14:26:16 1363

原创 vue elementUI下拉框select动态设置默认选中第一个后无法切换值

添加一个 @change=“handleSelectChange”，然后使用this.$forceUpdate()即可<el-select v-else v-model="formData[i]" @change="handleSelectChange"> xxxx</el-select> handleSelectChange () { this.$forceUpdate() },

2022-02-15 16:42:37 2097

原创坑：this.$refs[xxx].validate is not a function

elementui 表单验证的坑this.$refs[xxx].validate is not a function改为：this.$refs[xxx][0].validate

2022-02-09 09:46:31 643

原创 vue vlc插件的使用

公司要求使用vlc插件播放rtsp实时视频<object :id="item.id" class="vlc" type="application/x-vlc-plugin" events="True" width="100%" height="100%" pluginspage="http://www.videolan.org"> <param name="mr

2022-01-21 16:30:35 7835 8

原创 elementui tree树获取所有叶子节点

var allNodes = this.$refs.treeRef.store._getAllNodes()var leafNodes = allNodes.filter(item => item.isLeaf)但是由于我赋值给tree数据之后马上执行这些语句，allNodes 会返回空数组，所以需要在外层加上this.$nextTickthis.$nextTick(() => { var allNodes = this.$refs.treeRef.store._getAllNod

2022-01-18 09:56:12 2621

原创 JS自定义属性名更换

// 数组内的对象属性名更换export const changeProp = function (prop, data) { var arr = [] data.forEach((item, index) => { var renameObj = {} for (var key in item) { var obj = {} if (prop[key]) { obj = { [`${prop[key]}`]: it

2022-01-12 18:45:42 545

原创自用封装处理pcd文件的vue组件

<template> <div id="three" style="height: 100%;width: 100%;"></div></template><script>import * as THREE from 'three'import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js' // 注意是examples/jsmimport { OrbitCo

2022-01-11 15:46:21 557 7

原创 three.js渲染本地pcd文件报错 TypeError: result2 is null

出现以上错误是由于pcd文件地址不对，执行以下操作即可1.将pcd文件放在public目录下2.将地址改成${process.env.BASE_URL}xxx.pcd即可,process.env.BASE_URL是指向public的无需更改

2022-01-10 17:15:14 454

原创 vue引入three.js打开pcd文件报错 ‘PCDLoader‘ is not defined

在.vue文件中使用 * 引入后three后，new THREE.PCDLoader()会报错，其他的loader也是这样import * as THREE from 'three'var loader = new THREE.PCDLoader()查询文档过后发现只需要在引入中修改为以下代码即可import * as THREE from 'three'import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js' //

2022-01-10 16:58:57 1065

原创 easyui单独验证

单独验证一个字段：var isValid=$(’#passwd’).textbox(“isValid”);//true为验证通过验证表单里所有字段：var isValid = $(’#form’).form(‘validate’);//所有字段有效返回true

2022-01-07 10:49:16 404

原创 css 边框四角样式

background: linear-gradient(to top, #3cc5e4, #3cc5e4) left top no-repeat,/*上左*/ linear-gradient(to right, #3cc5e4, #3cc5e4) left top no-repeat,/*左上*/ linear-gradient(to left, #3cc5e4, #3cc5e4) right top no-repeat,/*上右*/ linear-gradient(to b

2021-12-27 17:03:02 489

原创 js控制输入框input只能输入数字、小数、负数

export const getNAN = function (val) { const t = val.charAt(0) // 转化为数字形式--包含小数，负数 // 先把非数字的都替换掉，除了数字和. val = val.replace(/[^\d.]/g, '') // 必须保证第一个为数字而不是. val = val.replace(/^\./g, '') // 保证只有出现一个.而没有多个. val = val.replace(/\.{2,}/g, '.')

2021-12-16 15:57:24 3138

原创 js遍历对象，获得键和值（key和value）

let obj = { label:'aaa', name:'bbb' }for (let i in obj) { // 获取key值 console.log(i); //label name // 获取value值 console.log(obj[i]); //aaa bbb}

2021-12-16 13:43:38 7383

原创 vue中在DOM中添加鼠标滚动事件（获取滚轮方向）,兼容火狐

<div @mousewheel="Wheel" @DOMMouseScroll="FireFoxWheel"></div>// IE、chromnWheel(e) { // 滚轮方向 e.wheelDelta}// FireFoxFireFoxWheel (e) { // 滚轮方向 e.detail}

2021-12-08 16:17:12 1219

原创 vue子组件封装弹框只能执行一次的mounted问题

封装了一个子组件来处理弹框内容，发现只能执行一次，在父组件添加一个 v-if 即可，当每次弹框关闭的时候销毁掉该组件就没有问题了。贴一下简易代码：父组件：<add-dialog v-if="addVisible" :dialogVisible="addVisible" @addClose="addClose"></add-dialog>addClose () { this.addVisible = false}子组件：<template> <

2021-12-06 11:18:24 1976

原创 flex布局时justify-content:space-around最后一个不对齐的解决方法（css,less）

当使用flex弹性布局时，设置属性justify-content:space-around变成以下效果，但是我希望最后一行也是左对齐的。解决方法：在设置justify-content:space-around的父节点加上after伪类1.css.father{ display: flex; flex-wrap: wrap; justify-content: space-around; }.father:after{ content: ''; width: 30%;

2021-11-19 11:24:46 4586 1

原创 elementui el-checkbox全选

一.html结构<el-checkbox class="allCheck" :indeterminate="item.isIndeterminate" v-model="item.isCheckAll" @change="handleCheckAllChange(item.isCheckAll,i)">全选</el-checkbox><el-checkbox-group v-model="item.value" @change="handleCheckedChange(i

2021-11-10 10:42:08 1838

原创 easyUI 表格datagrid通过checkbox禁选某行，解决checkbox不能完全禁选的问题

一：需求及问题描述项目中需要根据某个值判断表格中的某行是否能够被选择删除，因此在.datagrid里面使用了以下代码将表格头中的checkbox禁选了。onLoadSuccess: function (data) { var ds = data.rows; $.each(ds, function (rowIndex, rowData) { if (rowData.time == 0) { // 禁选该行 $(".datag

2021-10-26 15:04:54 2278

原创 easyui输入框正则校验数值，小数值，ip地址

一、校验方法1.IP地址正则校验var reg = /^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/2.正数（可小数点）正则校验var reg = /^\d+(.\d+)?$/;3.数值（可负数，小数），isNaN()方法校验var val = isNaN(value) // true:非数值，false:数值二、easyui使用校验1.html<input id="ip校验"

2021-10-12 15:35:38 1249

原创 js实现WebSocket 连接

一.WebSocket 简单介绍1.HTTP和WebSocket的区别http：通信只能由客户端发起；WebSocket：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种；在webSocket协议下客服端和浏览器可以同时发送信息。2.WebSocket应用场景数据推送：webSocket可以代替ajax轮询（即客户端通过一定的时间间隔不断向服务器发起请求获得数据，因此会占用许多带宽和服务器资源），但是webSocket不一样，当建立T

2021-10-08 15:11:03 22063

原创在vue-cli 3中使用jquery

1.npm安装jquerynpm install jquery --save-dev2.在main.js中引入jqueryconst $ = require('jquery')window.$ = $3.即使这样我eslint还是会报$未定义的错，解决方法：在项目根目录下新建 .eslintrc.js 文件，配置代码如下：module.exports = { root: true, env: { node: true, jquery: true //此处配置意思

2021-09-29 11:25:45 450

原创在Vue项目中引入外部js文件，并在Vue的外部js中引用this

一.外部js脚本示例const submitForm = function () {}export { submitForm}二.在Vue项目中引入外部js文件import { submitForm } from './assets/js/gloabal'三.由于在vue的外部js中使用的this并非当前vue实例，所以我们需要传递thisjs示例如下：vueObject即传递过来的this// 表单预处理判断const submitForm = function (formN

2021-09-23 09:50:29 3060

空空如也

touchcancel怎么同时触发两个