前端 - 简易开发点记录
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;
//将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：
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图标过小调整：
// 修改 loading的图标的大小
.el-loading-spinner {
font-size: 30px;
}
5. echarts tooltip显示，超出图表显示范围，添加 confine参数即可
tooltip: {
trigger: 'axis',
confine: true
},
6. vue div中style设置背景图片
:style="{'background-image': `url(${require('@/assets/image/xxx.png')})`}"
7. css3 背景图片铺满
background-size: cover;
8. 修改背景图片 渐变动画
-webkit-transition-property: background-color;
-webkit-transition-duration: 3s;
-webkit-transition-timing-function: ease;
background-color: #xxx;
9. vue 直接设置组件的参数为Int
:interval="10"
10. dom的字符串转node
parseElement(htmlString) {
return new DOMParser().parseFromString(htmlString, 'text/html').body
.childNodes[0]
},
11. 附加node时，添加为第一位child（vue 写法）
this.$refs.refName.insertBefore(
this.parseElement('Node字符串'),
this.$refs.refName.firstChild
)
12. svg 设置渐变色（线性，径向）
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504141680.html
13. svg高斯模糊
<?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 判断变量是否是字符串
typeof res == 'string'
15. 使用input选择image图片文件，并获取其base64字符串
<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 就可以安装成功了
let a = this.$route.query.a;
19. 楷体 font-family
font-family: 'KaiTi';
20. div内文本垂直显示，从上到下
writing-mode:tb-rl;
21. html a标签去掉默认显示的文本底部的下划线：css
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: 闭合路径命令，会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后
比较全一点的:
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. 动画，
<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的示例
<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
