index.vue

<template>
  <div class="hsAction hsButtonBox" :id='elId' style="{width:100%;height:100%}">
      <el-button
        class="buttonSearch"
        @click="_click(this)"
        @dblclick.native='_doublelclick'
        :type='buttonProps.type'
        :size='buttonProps.size'
        ref='hsButton'>
         {{buttonText}}
      </el-button>
      <jsoneditor v-model='jsoneditorVisible'
                :elInfo='elInfo'
                :layout='layout'
                :jsoneditorCloseAfter='jsoneditorCloseAfter'
                :jsoneditorOpenAfter='jsoneditorOpenAfter'
               >
    </jsoneditor>
  </div>
</template>
<script>
import jsoneditor from '../common/jsoneditor'
import ucComponent from '../ucClass/uc_component'
import uuidv1 from 'uuid/v1'
export default {
  mixins: [ucComponent],
  components: {
    jsoneditor
  },
  name: 'hsAction',
  props: {
    elInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },
    value: '',
    jsoneditorCloseAfter: {
      type: Function
    },
    jsoneditorOpenAfter: {
      type: Function
    },
    layout: {},
    active_manager: {}
  },
  watch: {
    allSourceData: {
      handler: function(newVal, oldVal) {
        const { config } = newVal
        if (config) {
          this.buttonProps = Object.assign(this.buttonProps, config.buttonProps)
        }
      },
      deep: true
    }
  },
  data() {
    return {
      elId: '',
      jsoneditorVisible: false,
      buttonText: '操作',
      clickTimer: null,
      buttonProps: {
        type: 'primary',
        size: 'mini',
        plain: false,
        round: false,
        circle: false,
        loading: false,
        disabled: false,
        autofocus: false,
        native_type: 'button'
      }
    }
  },
  created() {
    this.elId = uuidv1() // 获取随机id
  },
  mounted() {
    const { config } = this.allSourceData
    this.setTheme(config.buttonProps)
    this.buttonText = config.text
    const that = this
    setTimeout(function() {
      const keys = Object.keys(that.active_manager)
      keys.forEach(item => {
        const sing = item.split('_')
        if (sing.length < 2) return
        const position = sing[0].slice(1)
        const text = sing[1]
        const method = sing[2]
        if (position === that.elInfo.position && text === that.buttonText) {
          // 注册事件
          that[`hsAction_${method}`] = function() { that.active_manager[item](this) }
        }
      })
    }, 2000)
  },
  methods: {
    setTheme(buttonProps = {}) {
      this.buttonProps = Object.assign(this.buttonProps, buttonProps)
    },
    // 单击
    hsAction_click() {},
    // 双击
    hsAction_dblclick() {},
    _click(sender) {
      const that = this
      if (this.clickTimer) {
        window.clearTimeout(this.clickTimer)
        this.clickTimer = null
      }

      this.clickTimer = window.setTimeout(function() {
        that.hsAction_click()
      }, 300)
    },
    _doublelclick() {
      if (this.clickTimer) {
        window.clearTimeout(this.clickTimer)
        this.clickTimer = null
      }
      this.hsAction_dblclick()
    },
    initMethods(id, method, type) {
      const container = document.getElementById(id)
      container.addEventListener(type, method)
    }
  }
}
</script>
<style scoped>
.hsButtonBox{
  padding: 2px 1px 1px 1px;
  width:90%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .buttonSearch{
    width: 100%;
    height: 100%;
} */
</style>