1.修改浏览器滚动条样式
- 隐藏IE浏览器滚动条
/* IE 浏览器 */ .scrollbar { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; overflow: auto; }
- chrome & safari 浏览器修改样式
/* chrome & safari 浏览器 */ /*滚动条整体部分,必须要设置*/ .scrollbar::-webkit-scrollbar { width: 5px; height: 10px; background-color: #f8f8f8; border-radius: 5px; } /*滚动条的轨道*/ .scrollbar::-webkit-scrollbar-track { background-color: #f8f8f8; } /*滚动条的滑块按钮*/ .scrollbar::-webkit-scrollbar-thumb { border-radius: 0; background-color: #d4d4d4; // box-shadow: inset 0 0 5px #f00; } /*滚动条的上下两端的按钮*/ .scrollbar::-webkit-scrollbar-button { height: 0; }
2.前端base64编码转文件
- 方法
//将base64转换为blob // @param {*} dataurl为base64编码字符串 dataURLtoBlob(dataurl) { var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], { type: mime }) }, //将blob转换为file // @param {*} theBlob为转换后的blob // @param {*} fileName为转换后文件的名字 blobToFile(theBlob, fileName) { theBlob.lastModifiedDate = new Date() theBlob.name = fileName return theBlob },
- 调用
let blob = dataURLtoBlob(dataurl) let file = blobToFile(blob, "base64图片") //file即为图片文件
3.element异步调用图片预览组件
- 代码
<template> <div> <el-button @click="onPreview">预览</el-button> <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" /> </div> </template> <script> // 导入组件 import ElImageViewer from 'element-ui/packages/image/src/image-viewer' export default { name: 'Index', components: { ElImageViewer }, data() { return { showViewer: false, // 显示查看器 url: [], } }, methods: { onPreview() { setTimeOut(()=>{ this.url = [ "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg", "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", ] this.showViewer = true },1000) }, // 关闭查看器 closeViewer() { this.showViewer = false } } </script>
- 该组件接收的props数据
props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default: 2000 }, onSwitch: { type: Function, default: () => {} }, onClose: { type: Function, default: () => {} } }
4.解决vue项目在ie浏览器中语法不兼容问题
使用element的图片预览后在ie浏览器中出现了白屏问题,查看错误信息为语法错误,通过@babel/polyfill来解决语法兼容问题
- 安装
npm install --save @babel/polyfill
- 使用
- ①在main.js中顶端引入
import "core-js/stable"; import "regenerator-runtime/runtime"; ```
- ②在bable.config.js中添加
presets: [ "@vue/cli-plugin-babel/preset", [ "@babel/preset-env", { useBuiltIns: "entry", corejs: 3, }, ], ],
- ③在vue.config.js中添加
项目中因使用插件这些插件使用了ES6写法,导致出现的语法错误,把需要转换的插件名字添加在vue.config.js的transpileDependencies中
transpileDependencies: [ 'element-ui', ],
- ①在main.js中顶端引入