组件中混入js，并进行对象样式的相关操作

一、在混入的js中可以操作组件的data和computed

1.:style加入多个对象样式

这是一个 Diagram.vue组件
<div
      ref="content"
      class="my-go-diagram__content"
      :style="[contentStyle, myCursor]"
    ></div>

这是它的引入，以及computed
import factory from '../mixins/factory'

export default {
  name: 'Diagram',
  mixins: [
    factory(),// 混入
    layout,
    finder
  ],
  computed: {
	contentStyle () {
      const { left, top, bottom, right } = this.rect
      return {
        left: `${left}px`,
        top: `${top}px`,
        bottom: `${bottom}px`,
        right: `${right}px`
      }
    }
}

2.在factory中进行操作

这是factory.js
export default function (ClassName, defaultOptions, ref) {
  return {
    props: {
      options: [Object, Function],
      nodes: {
        type: Array,
        default() {
          return []
        }
      },
      links: {
        type: Array,
        default() {
          return []
        }
      },
      // modelData
      data: {
        type: Object,
        default() {
          return {}
        }
      },
      myStatus: {
        type: String,
        default: 'indicator'
      }
  },
    data() {
      return {
        loading: true,
        myCursor: 'cursor:Auto'
      }
    },
    methods: {
    	bind(diagram) {
		this.myCursor = {cursor: 'crosshair'}// 控制factory的js中的data，这个myCursor 是能够在组件中直接使用的
            console.log(this.contentStyle);
            Object.assign(this.contentStyle, {cursor: 'crosshair'})//给计算属性的对象添加一项
            this.contentStyle.cursor = undefined // 将计算属性对象的指定项删除
            this.myCursor = 'cursor:crosshair'
}
    }    

组件与混入js中的数据是共享的