2021-5-17记录

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',
    ],