前端 - 简易开发点记录

1.IE浏览器提示"Internet Explorer 已经限制此网页运行脚本或Activex控件"
在html标签下面，head上面添加<!-- saved from url=(0014)about:intenert -->即可

2.纯js在前端使用接口获取byte[]，并显示为图片
先把byte[]转为base64，然后使用xxx.src = 'data:image/png;base64,' + base64Str;

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

//将byte[]转化为流 function arrayBufferToBase64(buffer) { var binary = ''; var bytes = new Uint8Array(buffer); var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary); // return binary; }   var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); oReq.responseType = "arraybuffer"; oReq.onload = function (oEvent) { var arrayBuffer = oReq.response; if (arrayBuffer) { var byteArray = new Uint8Array(arrayBuffer); var baseStr = arrayBufferToBase64(byteArray); document.getElementById('aaa').src = 'data:image/png;base64,' + baseStr; } };   oReq.send(null);

　　

 3.vue热重载：更新了新版的程式，用户访问还是旧版的页面，需要热重载解决问题，原本项目配置文件用的vue.config.js，所以新增了一个webpack.config.js：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

let HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {     plugins: [ // 数组 放着所有的webpack插件         new HtmlWebpackPlugin({             template: './src/index.html', // 打包的模板路径             filename: 'index.html', // 打包之后的文件名             minify: { // 格式化html文件                 removeAttributeQuotes: true, // 去除掉双引号                 collapseWhitespace: true // 变成1行             },             hash: true // 会在 js后面加上 [? + 哈希]         })     ],     output: {         filename: 'index.[hash:8].js' // 这个地方也是在名字上加上哈希 后面的:8表示8位     } }

4. element ui 的loading图标过小调整：

?

1 2 3 4

// 修改 loading的图标的大小 .el-loading-spinner {   font-size: 30px; }

 5. echarts tooltip显示，超出图表显示范围，添加 confine参数即可

?

1 2 3 4

tooltip: {   trigger: 'axis',   confine: true },

　　

 6. vue div中style设置背景图片

?

1	:style="{'background-image': `url(${require('@/assets/image/xxx.png')})`}"

7. css3 背景图片铺满

?

1	background-size: cover;

 8. 修改背景图片 渐变动画

?

1 2 3 4

-webkit-transition-property: background-color; -webkit-transition-duration: 3s; -webkit-transition-timing-function: ease; background-color: #xxx;

9. vue 直接设置组件的参数为Int

?

1	:interval="10"

10. dom的字符串转node

?

1 2 3 4

parseElement(htmlString) {       return new DOMParser().parseFromString(htmlString, 'text/html').body         .childNodes[0] },

11. 附加node时，添加为第一位child（vue 写法）

?

1 2 3 4

this.$refs.refName.insertBefore(       this.parseElement('Node字符串'),       this.$refs.refName.firstChild )

 12. svg 设置渐变色（线性，径向）

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504141680.html

13. svg高斯模糊

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">   <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">   <defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> </filter> </defs>   <path d="M150 0 L50 100 Z"   stroke-width="20" stroke="red"  filter="url(#Gaussian_Blur)"/>   </svg>

14. js 判断变量是否是字符串

?

1	typeof res == 'string'

15. 使用input选择image图片文件，并获取其base64字符串

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<input             type="file"             accept="image/*"             ref="file"             @change="upload"             multiple           />       upload() {       let data = this.$refs.file.files[0]       let imgFile = new FileReader()       imgFile.readAsDataURL(data)       imgFile.onload = (res) => {         console.log(res)         this.imageStr = res.target.result       }     },

　

16. 将数组打印为字符串

JSON.stringify(data)

17. vue npm install 报错：

　　已有设定

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
但是安装还是报错，最后使用yarn install 就可以安装成功了

18.vue 获取xxx?a=1参数的值

　　let a = this.$route.query.a; 

 19. 楷体 font-family

font-family: 'KaiTi';

 20. div内文本垂直显示，从上到下

writing-mode:tb-rl;

 21. html a标签去掉默认显示的文本底部的下划线：css

?

1	text-decoration: none;

　　

 

 

 

 

-SVG- 基础知识

1. path

　　示例：M 0,0 L10,10 L20,20 Z

　　基础单元释义：

　　　　M: Move To，作为路径的起始点，移动画笔位置

　　　　L: Line to 在点之间划线，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段

　　　　H: 绘制水平线

　　　　V: 绘制垂直线

　　　　Z: 闭合路径命令，会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后　　

比较全一点的:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

 

 2. 动画，

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<circle  cx="20" cy="20"  r="20" fill="red">     <animate              attributeName="r"              values="20;0;20;0;"              dur="4s"              repeatCount="1"              />      <animateMotion              calcMode="linear"            path="m 0,0 l 75,75 "            dur="2s"            begin="4s"          fill="freeze"              repeatcount="1"          />     <animate              attributeName="r"              values="20;0;20;0;20"              dur="2s"              begin="6s"              repeatCount="1"              />  </circle>

3. 带keyPoints和KeyTimes的示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"      viewBox="0 0 300 200">   <circle rx="50" ry="50" r="5" fill = "red">   <animateMotion                   calcMode="linear"                  fill="freeze"                  calcMode = "linear"                  path="M 50,50 100,100"                 dur="1s"                 keyTimes="0;0.5;0.9;1"                 keyPoints="0;0.1;0.1;1"/>       </circle>      </svg>

　　

转载地址列表:

https://blog.csdn.net/qq_29025955/article/details/108090379；

https://blog.csdn.net/weixin_41884153/article/details/101368267