前端相关
js+css+html+vue
AsBefore麦小兜
热爱可抵岁月漫长....
展开
-
Vue 项目更新,浏览器不需强制刷新就可更新版本! 防止缓存
禁止index 页面的缓存原创 2022-07-01 15:37:13 · 3227 阅读 · 1 评论 -
Js 文件图片URL 转Bolb 格式方法
// url 转bolb urlToBlob(the_url, callback) { let xhr = new XMLHttpRequest(); xhr.open('get', the_url, true); xhr.responseType = 'blob'; xhr.onload = function () { if (this.status == 200) { if (callback) {...原创 2022-02-11 22:10:55 · 1231 阅读 · 0 评论 -
连接字符串 换行
数组链接成字符串常用,连接'\r\n'let str = array.join('\r\n')展示出来的字符串可直接换行用作tooltip 展示时候的换行原创 2022-01-17 18:53:29 · 959 阅读 · 0 评论 -
底部操作菜单的吸底组件
因为样式问题底部菜单需要一直在视图内但界面的最下有一部分间隔空间于是使用吸底部的这个方式实现思想:找当前吸底的组件包含的dom 元素,是否在当前视图内,如果没在当前视图范围内,则需要设置position = 'fixed',bottom=0来实现布局,和吸顶是一样的思想<template> <div ref="stickyArea" :style="{ height: height + 'px', zIndex: zIndex }"> <原创 2022-01-06 19:41:43 · 616 阅读 · 0 评论 -
吸顶组件 开发
吸顶组件:页面滚动,顶部的标题要一直停留在当前页面页面滚动 这个标题吸顶组件实现思想是设置当前组件的position = 'fixed'组件:Sticky.vue<template> <div ref="stickyArea" :style="{ height: height + 'px', zIndex: zIndex }"> <div :class="className" :style="{ top:原创 2022-01-06 19:34:44 · 531 阅读 · 0 评论 -
关于列表的表单效验---根据不同种类,效验范围不同
当前这个表单是一个列表数据,列表里面的item都要根据第一个参数值的具体类型,来设置第三个参数值的的数据范围列如:当前后台需要的传输的数据类型是如下:[ { "monitorType": "CpuUsageAmount", "operator": 1, "value": 1, "durationTime": 1, "frequencyTime": 10 }, { "durationTime": 1, "f...原创 2022-01-06 19:23:28 · 716 阅读 · 0 评论 -
动态更新table的列或表头,table显示问题
问题记录:原本在table上,会根据不通的参数 使用一个表格,将一列数据进行显示和隐藏使用if 的时候 table 渲染的闪动体验太差于是使用自定义表头和内容但表头数据不会根据外部参数值变动最后的解决方案:给当前tabke 加一个key 属性使每一次渲染该表格都保证key 不同这样 就可以动态的变更当table 的列数在类型变化时,使key 自加...原创 2021-08-22 14:10:07 · 619 阅读 · 0 评论 -
from 表单效验 动态参数值的对比
问题记录:表单类型;效验规则: request的输入框内容数值不能大于limit 输入框的数值但from表单一般都是类似于这样的方法 只能接收到当前输入值于是将效验规则的方法bind(this )就可以在当前方法中使用 cpuMemoryRule: { requests: { cpu: [ { required: false, message: '请填写', trigger: ...原创 2021-08-22 14:01:28 · 262 阅读 · 0 评论 -
效验list 类型的from 表单方法
本周做了最大的表单的提交,对于必填和部分内容的表单做了完整的效验因为表单内容较多我这边封装了很多组件,对每一种类型都做了校验,所以在最外层的父组件使用$refs 找到子组件在找到子组件的from 表单进行效验当前表单含有list 类型的校验做下记录:表单大约分为常用的表单类型1、list类型当前组件是一个列表类型输入框 效验变量key 和value 值具体代码:实例图组件代码:<template> <div...原创 2021-08-22 13:53:47 · 797 阅读 · 1 评论 -
Table 动态添加列,from 表单列表效验无效
使用场景:变更上面的类型 要再table 表格上加一列最差使用如果只是对当前行 进行v-if 视图渲染的时候又闪动,体验很差,列表的的效验规则,对变动的那一列并不生效,解决方案:给table 加一个动态的key 属性保证每次变更视图 ,都渲染新的table完美解决!!!!...原创 2021-08-20 21:14:41 · 224 阅读 · 0 评论 -
switch的文字在内部显示效果
代码: <el-switch class="tableScopeSwitch" active-value="Y" inactive-value="N" @change="handleStatusChange(child_data)" active-text="开启" inactive-text="冻结" v-model="data.enable"> </el-switch>css 修改样式<style lan...原创 2021-07-25 15:33:14 · 492 阅读 · 0 评论 -
实现3D 图片轮播样式(触摸一体机浏览器存在滑动问题)
<div id="drag-container_view" class="padding_draw"> <div id="drag-container"> <div id="spin-container"> <div v-for="image in crbList" :key="image.id" class="image_item_div" :style="{backgr...原创 2021-07-25 15:25:29 · 233 阅读 · 0 评论 -
时间格式转换
时间格式转换//转换时间类型 timeConversion(time) { let time_new = new Date(time); var a = [ time_new.getFullYear(), time_new.getMonth() + 1, time_new.getDate(), time_new.getHours(), time_new.getMinutes...原创 2021-05-26 09:09:27 · 70 阅读 · 0 评论 -
Raw 图像转png
当前时封装了一个组件专门用于原水图像转png 图像全局引入pngtoy库 然后直接在组件中使用浏览器不支持显示16bit的原先是图像需要用到pngtoy 这个库 链接:https://github.com/xgds/pngtoy组件代码rawtopng.vue<template> <div> <canvas style="display:none" id="c"></canvas> <img...原创 2021-04-04 13:10:50 · 583 阅读 · 0 评论 -
vue 组件之间的传值
1,props、事件$emit 父组件向子组件传值(props)2、$emit、$on (Bus)通过新建Vue实例(Bus)作为中央事件总线(事件中心),用它来触发事件($emit)和监听事件($on),巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级。当我们的项目比较大时,可以选择更好的状态管理解决方案vuex。3,$attrs、$listeners(属性,事件)多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。但如果仅仅是传递数据,而不做中...原创 2021-04-01 12:37:47 · 744 阅读 · 0 评论 -
前端面试:webpack构建之loader与plugin的区别是什么
从功能区分loader是文件加载器能够加载资源文件并对这些文件进行统一的处理,诸如编译,压缩 最终一起打包在制定的文件夹中处理一个文件可以使用多个loader loader的执行顺序和配置顺序整好相反第一个执行的loader的返回值接收源文件内容做参数其他的loader接收前一个执行的loader的返回值作为参数 最后执行的loader会返回次模块的js源码编写zijipluginplugin的功能更加强大,loader不能做的,plugin都能做plugin..原创 2021-04-01 10:36:37 · 237 阅读 · 0 评论 -
前端面试:import 和 require 区别
1、遵循的规范不同require 是AMD规范引入方式import 是es6的一个语法标准,兼容浏览器要转换成es52、调用时间require是运行时调用,require是个函数所以require理论上可以运用在代码的任何地方import是编译时调用,所以必须放在文件开头 且放在全局中引入3、本质require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量import是解构过程,但是目前所有的引擎都还没有实现im.原创 2021-04-01 09:08:44 · 1513 阅读 · 0 评论 -
vue 界面 滚动监听
<template> <div> <Carousel :carousel-data='carouselData' /> <sticky :z-index="10" class-name="sub-navbar"> <!-- 导航区域 --> <div class="navs"> .原创 2021-03-29 17:08:09 · 461 阅读 · 1 评论 -
vue 吸顶组件封装
主页面: <sticky :z-index="10" class-name="sub-navbar"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="功能介绍" name="first"></el-tab-pane> <el-tab-pane label="功能演示" name="second"&g原创 2021-03-29 17:02:57 · 302 阅读 · 0 评论 -
web 实时播放 whammy.js
先在当前播放视频的页面混入wfsMixins.js/* eslint-disable no-undef */import '@/utils/statics/wfs';// import Wfs from '@/views/project/Dashboard/Mixin/wfs';export default { data() { return { wfs: new Wfs() }; }, watch: { windowHidden(val) .原创 2021-03-29 16:35:50 · 488 阅读 · 2 评论 -
JS 对UTC 时间格式(2020-11-27T02:58:41.000000Z)转换成正常时间显示
timeChange(UTCDateString) { if (!UTCDateString) { return '-'; } function formatFunc(str) { return str > 9 ? str : '0' + str } var date2 = new Date(UTCDateString); console.log('时间', date2) var year = date2.getFull.原创 2020-11-30 09:23:16 · 1720 阅读 · 0 评论 -
js正则表达式过滤表情,输入法表情无法匹配,则反向判断
因为输入法表情正则无法匹配,那就匹配当前文本中,不是数字,标点,英文,汉字的字符,做基本的文本格式处理我这里用到的是替换,标点匹配不够全面,自行添加即可 var mytextarea = e.detail.value.mytextarea; mytextarea = mytextarea.replace(/[^\u4e00-\u9fa5a-zA-Z\d,\.,??.<>''"":;{}[\|、】【、‘;“”‘’;:。,)(*&……%¥#@!~。]+/g, "..原创 2020-10-28 11:27:41 · 1197 阅读 · 0 评论 -
canvas -实现扇形的选择拖拽
效果图<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>实现扇形的选择拖拽</title> <style> body{margin: 0;overflow: hidden} #canvas{background: antiquewhite;} </style>&l.原创 2020-09-26 17:12:27 · 192 阅读 · 0 评论 -
粒子时钟--发射动态--canvas 画布制作
效果图:具体代码:复制可运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>粒子时钟-完整版</title> <style> body { margin: 0; overflow: hidden } ..原创 2020-09-26 17:09:04 · 206 阅读 · 0 评论 -
实现刮刮乐动态效果
效果图代码:全部粘贴复制 可运行<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no"> <title>刮刮乐-用鼠标擦除动态效果</title> <style> ...原创 2020-09-26 16:51:56 · 859 阅读 · 0 评论 -
CSV文件解析,成html表格table
<el-table :data="file_detail.tabledata"> <el-table-column v-for="(i,index) in file_detail.labeldata" :prop="'_'+index" :key="i" :label="i" ></el-table-co...原创 2020-08-12 14:03:16 · 1506 阅读 · 0 评论 -
搜狗浏览器,对bmp图片,深度图片不显示问题的解决
本html可以直接实现上传bmp图片文件,在搜狗浏览器中显示。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .inputoutput { float: left; margin: 10px; } </style> <原创 2020-08-03 19:51:25 · 430 阅读 · 0 评论 -
下载json文件,解决浏览器对JSON文件链接直接打开问题
一般下载都是在a标签里面防止文件链接,就可以直接下载,但对于text,json东风文件的链接,浏览器自动在新窗口打开,所以,想要下载,需要右键另存,当前这篇 主要事解决这个问题首先,建一个js文件 导出其中的方法 我是在vue项目于里面使用download.js//download.js v3.0, by dandavis; 2008-2014. [CCBY2] see http://danml.com/download.html for tests/usage// v1 l...原创 2020-08-03 14:59:56 · 6840 阅读 · 1 评论 -
css加载背景图片和img加载图片的区别?
1、写在html里的是以标签形式存在的2、写在css里面的图片是以背景图片的形式存在的,3、网页会先加载<img>标签的内容,再加载背景图片。4、css管装饰,也就是显示效果,5、html管结构,内容结构的划分,这样代码要简洁易维护一些。6、css加载图片可以重复class调取;img需要多次添加标签调取;在大型网站有资源浪费。7、css放置装饰类图片,比如:花边,img放置内容性的图片。8、当前网络卡的的时候,img标签会显示占位的错误图片标识;而背景图片什么也不显原创 2020-07-16 18:58:11 · 1424 阅读 · 0 评论 -
csv 文件内容读取显示在html表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="http://libs.baidu.com/jquery...原创 2020-07-15 15:21:19 · 3773 阅读 · 0 评论 -
3D轮播旋转视图
成品代码demo<!DOCTYPE html><html ondragstart="return false"><!--不可拖拽--><head> <meta charset="UTF-8"> <meta name="keywords" content="3D相册"> <meta name="description" content="旋转相册"> <...原创 2020-07-15 14:48:54 · 1045 阅读 · 0 评论 -
JS 根据文件URL读取其文件 内容并显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> .原创 2020-07-13 15:10:17 · 8354 阅读 · 0 评论 -
js中的with语句作用及使用方法
作用: 将代码的作用域设置到一个特定的对象中。2. with语句的语法with(expression) {statement;}3. 示例varfoo = 1;varbar = {foo : 2}with(bar) {alert(foo);foo = 3;alert(foo);varfoo = 4;alert(foo)}alert(bar.foo);aler...原创 2020-06-27 13:10:04 · 299 阅读 · 0 评论 -
js-----in 运算符
1、如果第二个运算数为对象,则in运算符用来检测第一个运算数是否是第二个运算数的属性名。是,返回true,否则返回false。 例: var obj = {x:1,y:2}; “x” in obj // 返回true “y” in obj // 返回true “1” in obj // 返回false 2、如果第二个运算数为数组,则in运算符用来检测第一个运算数是否为数组包含的索引之一。 例: var arr = [23,99,7...原创 2020-06-27 12:28:17 · 392 阅读 · 0 评论 -
钉钉扫码登录接入WEB第三方系统---前端 vue 后台golang
1、首先在钉钉开放平台,配置移动接入应用的登录,域名,获取appid 和appSecret,(后台服务需要)2、我在前端的登录页面放置了钉钉的扫码登录的二维码,login.vue代码<template> <div class="login-container"> <div id="login_container" class="dingding_scan" ></div> </div></t...原创 2020-05-29 18:05:06 · 4949 阅读 · 0 评论 -
报错:please transfer a valid prop path to form item!
错误主要在 el-form-item 设置 prop 的时候出错el-form-item 里面的循环prop名字,需要 和form列表中的属性名称一致,这样才能确保组件的统一性。<template v-for="(person,index) in temp"> <el-form-item prop="name"> <el-in...原创 2019-12-26 17:47:35 · 87697 阅读 · 0 评论 -
canvas清除画布方法
首先:定义画布长宽 data() { return { cWidth: 1000, cHeight: 600, }; },1、canvas每当高度或宽度被重设时,画布内容就会被清空 cleanCanves() { let canvas = document.getElementById("myCanves"); ...原创 2019-07-23 14:20:16 · 3540 阅读 · 0 评论 -
ES6 find 和 filter 的区别
发现有个find,测试一番之后发现const list = [{'name':'1',index:1},{'name':'2'},{'name':'1'}]let list2 = list.find(i=>i.name==='1')let list3 = list.filter(i=>i.name==='1')console.log(list);[ { name: ...原创 2018-10-16 11:43:05 · 300 阅读 · 0 评论 -
JS动态添加属性
// 编辑表格内容 addItem() { const item = { editing: true, uid: uid++ } // 动态设置对象 for (let index = 0; index < this.columns.length; index++) { var ke...原创 2019-05-14 09:40:15 · 5147 阅读 · 0 评论 -
字符串和三元表达式连接使用时,需要在三元表达式上加括号
通过接口获取数据后,返回的参数想要添加在提示信息后面,需要添加括号 if (res.code === '1') { // 上传成功 this.$message.success(this.$t('dataManagement.successfulSubmis')+':'+ (res.data==null||''?'':res.data))...原创 2019-05-14 09:41:46 · 1228 阅读 · 0 评论