- 博客(39)
- 收藏
- 关注
RSS订阅原创 vue el-input/el-input-number中禁止输入表情符号
问题描述：项目中测试提出问题，在Input输入框中输入表情后，后台会报错，于是想着在前端输入的时候禁止输入表情，或者点击win10输入法后面的表情时，禁止输入表情分析问题：一开始使用了排除法，让input只能输入数字、字母。但是测试在用不同电脑测试，联想的笔记本电脑用"window+;"还是可以输入，通过复制表情查看，发现是字母。用简单的js去除就解决不了这个问题解决问题：在main.js中加入一些代码，自定义一个清除表情的属性。首先npm install emoji-regeximport emo
2022-05-06 08:48:46
737
原创 el-input/el-input-number在vue中优雅实现禁止输入特殊字符
问题描述：前端提交form表单要求el-input/el-input-number，不能输入 @#¥%……&*……分析问题：在事件或者方法中把字符串替代成空解决问题：1）在mian.js中添加【vue原型上添加方法，便于全局使用】Vue.prototype.validForbid = function (value, number = 255) { value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]
2022-05-06 08:38:24
1314
原创 vscode无法关联git问题
问题描述：vscode提示重新加载或者排除故障。点击排除故障后一串地址+Git installation not found分析问题：可能是路径不对引发读取不到git.解决思路：第一种：文件=>首选项=>设置=>输入命令“git.path”=>点击“在settings.json中编辑”。第二种：左下角设置=>输入命令“git.path”=>点击“在settings.json中编辑”。先找到设置文件的地方。根据地址去找git会发现没有这文件，但是又不知道g
2022-05-06 08:27:03
1792
原创 ie浏览器地址栏跟请求不变，访问304报错解决刷新问题
出现问题IE某个页面从服务端加完数据，刷新一直没办法出现最新数据分析问题网站304的错误状态代码是当客户端试图访问服务器互相的信息提示。如果第二次访问期间页面内容没有更改，服务器将返回304状态代码。严格来说，这不是一个错误。解决在拦截器里加上拼接地址，让IE刷新、但是注意拼接方式，如果你的地址栏本来就有参数，需要判断用？还是&。当然用随机数也行。只要能解决问题就行//加上时间戳 if(method == 'get' || method == 'GET'){ apiurl.i
2022-02-15 14:51:29
1187
原创 ie11不兼容复制功能
遇到ie11不兼容复制功能。谷歌正常复制，ie复制后无反应。查询资料ie要调用剪切板，跟谷歌不一样1、先对谷歌跟IE做区分// 判断是否是IE if (!!window.ActiveXObject || "ActiveXObject" in window) { } else { }2、当你浏览器是IE的时候 if (window.clipboardData) { //清空操作系统粘贴板
2022-02-15 14:09:25
525
原创 ie不兼容html2Canvas截图并
之前是引用vue-qr。发现ie里会报错，后改成html2Canvas.1、首先是安装引用html2Canvas、canvas。百度很多2、先把要截图的东西线放在容器里，然后截取 let that = this //创建一个新的canvas var canvas2 = document.createElement("canvas"); let _canvas = this.$refs.imageWrapper; var w = parse
2022-02-15 14:05:39
711
原创 JavaScript带小数点的运算出现多位小数点的问题及解决办法
***问题：***今天在计算{{93.1-140}}的时候一直会出现下图多位小数点，如果有toFixed(2)会出现46.89。与测试想要的46.90有差异***分析：***在通过查阅资料后原来js本身就存在这样一个问题，是底层导致的，底层基础决定上层建筑***解决：***有两种方法解决这个问题1.假如你的测试没有那么精益求精，你可以直接toFixed()保留对应的小数点2.假如你的测试跟我们一样锱铢必争。推荐使用(num1 * m+ num2 * m) / m。这里的m取决于你自己num1和nu
2022-02-09 13:48:43
1491
原创 Git提交时出现Merge branch ‘master‘ of ...之解决方法
多人协作开发项目，在上传代码时通常会先pull一下远程代码，使本地与远程同步更新，但是如果远程此时与自己代码存在冲突，在解决冲突后提交有时会出现“Merge branch ‘master’ of …”这条信息。这是因为pull其本质是fetch+Merge的结合。通常会分为以下两种情况：1.如果远程分支超前于本地分支，并且本地也没有commit操作，此时pull会采用’fast-forward’模式，该模式不会产生合并节点，也即不产生"Merge branch ‘master’ of …"信息。2.如果
2021-12-21 11:16:39
5386
转载 videoJS页面定位，点击播放后会到页面最左上角
成品demo ：v.cqutbbs.cn描述：.net+MVC+SQLSERVER+LayUI+Ueditor，利用ueditor把视频上传到网站，后台开设一个static的静态类作为保存待转换视频的存储列表。FFmpeg4作为切割视频的工具，开线程依次从列表中的视频地址，把视频切片为.ts格式，并且最终生成.M3U8格式的播放列表，待前台的videoJS插件调用。源代码：https://gitee.com/squall001/VideoOnline参考：https://download.csdn.n
2021-12-17 16:16:23
387
原创 let和const是什么，差别在哪里
let声明变量ES5 只有全局作用域和函数作用域，没***有块级作用域***，这带来很多不合理的场景，在ES6之前，大部分人会选择使用闭包来解决这个问题，今天我们使用ES6提供的let来解决这个问题。注：ES6明确规定，如果区块中存在let命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。所以在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。const声
2021-11-23 17:31:22
1883
原创 关于render函数应用
下面代码通过level的prop动态生成heading标签的组件。代码相对于冗余，需要不断重复slot。<!-- HTML --><script type="text/x-template" id="anchored-heading-template"> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-else-if="level ==
2021-11-23 17:22:52
1627
原创 css让div左右滑动
<div class="minVideoViewBox"> <div class="miniStreamView" v-for="(item,key) in list"></div></div>.minVideoViewBox{ width:100%; overflow-x: auto; overflow-y: hidden; white-space:nowrap; &::-webkit-scrol
2021-11-23 16:36:02
4673
原创 深拷贝浅拷贝
JS这门语言没有提供深拷贝的内建方法，诸如slice, concat, Object.assign这些方法其实都是对象的浅拷贝，修改深层次引用时就会变更原始数据，这在一些必须使用深拷贝的场景是无法接受的，所以如何实现一个有用又靠谱的深拷贝方法变得至关重要。如果不想搞得太复杂，可以直接使用这个懒汉大法：JSON.parse(JSON.stringify(target))它的思路很简单，先序列化再反序列化，得到一个全新的对象。而事实上，在只包含原始数据类型和对象的数据结构中，这种大法是完全可用的。
2021-09-10 09:46:24
43
原创 物理返回键无效或者返回路径问题
1.添加监听js//定义SINBAD.addBackListener = function(callback) { var cfg = { callback: callback } window.sinbadCallAsync("addBackListener", cfg)}//调用var listenerId = SINBAD.addBckListener(function(){ if(yourlogic){ SINBAD.gotoBack()' })}SINBAD.re
2021-09-10 09:34:14
113
原创 2021-06-10
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
2021-06-10 14:19:39
45
原创 2021-06-09 Vue的样式绑定
Vue的样式绑定1.Boolean值切换<div id="app"> <div @click="handleClick" :class=" { activted: isActivated } " > Hello </div></div><script> var vm = new Vue({ el: '#app', data: { isActivated: false
2021-06-09 14:32:54
46
原创 uni-app怎么引入在项目里面引入echart
在uniapp项目中，没有所谓的标签，只有对应的组件，这里就要借助 renderjs-echarts-demo ，它能把对应的JS和HTML转换为对应的组件，只支持H5和APP第一步 ：引入renderjs-echarts-demo在插件市场找到renderjs-echarts-demo第二步，在所需的页面加入渲染代码创建一个vue页面, 添加多一个script，module=“echarts” lang=“renderjs”<script module="echarts" lang="r
2021-03-30 17:40:39
611
原创 uni-app选项卡
<template> <view class="end-title"> <view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)"> {{item}} </view> </view> <view class="end-co
2021-03-12 15:59:09
187
原创 水平居中和竖直居中
竖直居中<view class="aaa"> <view>123</view> <view>123</view></view><style>.aaa{ width: 100%; height: 150px; border: 1px solid #0000FF; display: flex; flex-direction: column; justify-content: center;}</
2021-03-12 15:57:46
85
原创 element-ui简单方法实现自定义表头(render-header)
:render-header="renderHeader"使用renderHeader这个方法<el-table-column prop="postingAmt" label="已过账金额（元）" align="center" show-overflow-tooltip :render-header="renderHeader" width="160" ><template slot-scope="props">{{ $number2money(props
2021-02-02 17:57:07
563
原创 JS优化小技巧
1.多个IF条件的判断简写// 冗余if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {}// 简洁if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {}2.if…else…// 冗余let test: boolean;if (x > 100) { test = true;} else { test = false;}// 简洁let test
2021-02-01 20:42:12
62
原创 @blur赋值里反向给v-model赋值无法实现
1.赋值的时候没法渲染上，@blur里的参数有执行this.$set(this.testArr,0, this.testArr[0]+1);this.$set.(要赋值的对象，要改变的位置，要赋值的值)
2021-01-21 12:37:56
356
原创 element添加日期限制
一、单个日期框<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>情景1: 设置选择今天以及今天之后的日期data (){ return { pickerOptions: { disabledDate(ti
2021-01-06 14:40:45
81
原创 v-model修饰词
v-model的修饰符v-model.lazy 只有在input输入框发生一个blur时才触发v-model.trim 将用户输入的前后的空格去掉v-model.number 将用户输入的字符串转换成number在input textarea select中使用在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而
2021-01-06 14:22:04
120
原创 wangeditor光标闪烁在首位或者换车换行问题
前言wangEditor在默认情况下，父组件给其设置内容后光标会处于首端，不符合需求。网上找的直接通过js操作的方法经过尝试没有作用(也可能是没写对)，官方文档也没找到合适的方法。最终经过一番尝试后成功解决，特此记录，希望能帮到有类似需求的人。解决方法在父组件与wangEditor通信的双向绑定数据value的watch方法中，增加一句：watch: { content(val) { if (val !== this.editor.txt.html()) {
2020-12-17 20:57:39
2760
1
原创 vue赋值一直相等。深度拷贝
1.问题：遇到身体问题this.deliveryList.forEach(element => { element.bulkShippings = [this.batchExpressForm];})首先是把一个对象指向给一个数组里多个对象里某个对象值发现当你改变某个值的时候。全部值跟着改变再排除各种赋值，取值后发现就是这行代码出现问题了。因为所有的值都指向这个等于的对象。需要使用深度拷贝this.deliveryList.forEach(element => {
2020-12-16 21:47:22
304
原创 wangeditor+vue使用
1.首先npm install wangeditor安装下wangeditor2.载components文件里引用下组件。<template> <!-- 富文本组件 --> <div ref="editor"></div></template><script> import E from 'wangeditor'; export default { name: "editor",
2020-12-15 09:05:57
4118
原创 el-table动态监听改变值
1.可以运算table里的值<el-table-column label="红包拨出范围"> <template slot-scope="scope"> {{`${scope.row.a*scope.row.b/100}~${scope.row.a*scope.row.pricc/100}`}} </template></el-table-column>
2020-12-10 15:41:44
2547
原创 关于文件导出前端遇到问题。例如文件流，乱码等等
文件导出前端大致有两种方式1.后端转成URL地址。前端直接使用const link = document.createElement("a");link.style.display = "none";link.href = URL.createObjectURL(URL);link.download = "订单";document.body.appendChild(link);link.click();document.body.removeChild(link);后端返回的URL直接放
2020-12-10 14:02:55
765
原创 关于路由跳转params和query传值方式不显示问题
首先路由跳转有两种方式1.通过 <router-link></router-link> 实现2.通过 this.$router.push({}）然后this.$router.push({}又有多种传值方式。其中主要是这两种1.this.$router.push({ name: 'order', params: { id: id } })2.this.$router.push({ path: 'order', query: { id: id } })**注：**肯定有不少小
2020-11-28 09:57:08
1190
原创 vue中el-input赋值后不能编辑
接口数据给el-input赋值成功后不能编辑原因：在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新解决：this.$set(val1,val1.val2,val3)this.$set(this.convenForm, 'orPrice', this.convenForm.orPrice);注：this.convenForm是对象，orPrice是对象里字段，最后一个是赋值...
2020-11-25 12:17:36
3486
原创 vue组件可以通过v-model绑定值
vue可以通过v-model访问。子组件通过value接受值父组件<Upload v-model="convenForm.imgData"></Upload>子组件 props: { value: String },
2020-11-17 09:43:49
352
原创 公共原生链问题。vue中引用公共的js
1.utils文件下创建自己文件。例如until.js代码如下exports.install = function(vue){ vue.prototype.text1 = function(){ console.info('你是谁') }; vue.prototype.text2 = function(){ console.info('你好吗') };}2.在main.js里引用import utils from './utils/u
2020-11-13 14:48:00
76
原创 后端返回数据动态标题拼接静态标题，拼接数据
1.首先看下后端返回数据结构、data下一条数据里包含table标题跟一组数据。<el-table :data="stockList" border style="width: 100%;"> <el-table-column :prop="item.value" :label="item.name" v-for="(item,index) in tableColumnList" :key="index">
2020-11-11 14:31:44
448
原创 请求数据接口data和params问题
1.get请求用params，post请求用data/*** 获取平台列表*/export function getPlatformSort() { return request({ url: '/shop/merchandiseFront/getPlatform', method: 'GET', params: '' })}/*** 获取平台列表*/export function getPlatformSort()
2020-11-10 10:48:20
593
原创 vue接后端接口
vue接后端接口1.首先安装axiosnpm install axios2.main.js:导入import axios from 'axios' Vue.prototype.$http = axios Vue.prototype.$http.defaults.baseURL = '' // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL3.配置api里引用request文件。创建一个实例import axios from 'axios'im
2020-11-10 10:44:29
1955
原创 Quill安装及使用
富文本编辑器。首先从选择开始https://blog.csdn.net/davidhzq/article/details/100842866对每个富文本的选择跟优缺点涵盖比较完整的，为了稳定最后还是选择Quill.没有选择TinyMCE，TinyMCE的功能比较强大。客户需求多的可以使用。1、安装npm install vue-quill-editor --save2、引用html引用模块<div> <quill @on-change="changeValue" :open
2020-11-03 16:56:06
3734
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人