vue封装公共方法

2022年01月15日 阅读数:5
这篇文章主要向大家介绍vue封装公共方法,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

vue封装公共方法

​ 🎲🎲🎲vue

  • vue 封装公共方法this

    • 🪶 在 src/utils 文件夹下,建立 js 文件prototype

      // 以图片转换 base64 格式为例
      // 1.在 src/utils 目录下建立 base64.js 文件
      // 2.文件中写入方法
      export default {
          getBase64(file) {
          	return new Promise(function (resolve, reject) {
          		const reader = new FileReader();
          		let imgResult = '';
          		reader.readAsDataURL(file)
          		reader.onload = function () {
          			imgResult = reader.result;
          		}
          		reader.onerror = function (error) {
          			reject(error);
          		}
          		reader.onloadend = function () {
          			resolve(imgResult);
          		}
          	})
          }
      }
      
    • 🪶 main.js 中引用,全局挂载code

      // 引入须要的 js 文件,注意路径
      import base64 from '@/utils/date';
      // 全局挂载方法
      Vue.prototype.base64 = base64;
      
    • 🪶 在须要的页面中直接使用图片

      <script>
        export default {
          methods: {
            uploadImg(file) {
      				this.base64.getBase64(file.file).then(res => {
                console.log(res);
      				})
      			},
          }
        }
      </script>