vue中的mixin传参（混入）的用法

项目场景：

提示：这里简述项目相关背景：

在项目开发的过程中总会遇到一些需要复用的事件和逻辑，我们可以将其单独的抽离出来，放到一个js文件中，在需要的地方进行引入，比如通过mixin混入实现。用于实现把多个组件共用的配置提取成一个混入对象

今天在做uniapp是遇到一个问题，uniapp在做微信小程序的时候背景图class中的background-image不生效，需要在标签中使用style，且路径需要base64编码。这个背景图多个地方都有使用，所以就想到了使用mixin 混入。

---

mixin描述

官方文档是这么讲述的：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

 官方文档示例：

// 定义一个 mixin
var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

//组件中使用
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

---

mixin传参的使用：

提示：这里填写该问题的具体解决方案：

1：创建mixin文件

/*
可能有不同的图片路径 转换成 base64 编码 所以使用 工厂函数模式
url：图片转base64/base64转图片   
type：1 ---图片转base64  2---base64code转图片路径
*/ 
// 引入 图片转base64/base64转图片 的方法  npm i image-tools --save
import { pathToBase64, base64ToPath } from 'image-tools'

export function myChange(url,type){
	return {
		data() {
		  return {
            //定义变量接收转换成base64的编码 将在引入组件后在标签style中使用
		    resBase64Code:"",
			imgSrc:"",
		  };
		},
		created() {
			// 1 ---图片转base64  2---base64code转图片路径
			if(type==1){
				this.imgBse64();
			}else if(type==2){
				this.base64Img()
			}
		},
		methods: {
		  imgBse64() {
		    pathToBase64(url).then(res=>{
		    	this.resBase64Code=res;
		    })
		  },
			base64Img() {
		    base64ToPath(url).then(res=>{
		    	this.imgSrc=res;
		    })
		  },
		},
	}
}

2：在当前需要的文件引入

import {myChange} from '@/components/imgBase64Code/index.js';

export default {
  mixins:[myChange("/static/img/318.png",1)],
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
	console.log("引入mixin转换后的编码=======",this.resBase64Code)
  }
}

3：在标签style中使用

    
        ......