surveyMaker/src/components/Element/ButtonElement.vue

<template>
  <div class='wrap' @mouseover="mouseover" @mouseleave="mouseleave" @dragstart="dragstart" @mousedown="mousedown"
    @mouseup="mouseup">
    <template v-if="!element.eleCanvas">
      <img :style="{'z-index':1,width:'100%',height:'100%','border-radius': element.circular+'%'}"
        :src="element.backgroundUnselectedImg">

      <img
        src="https://dm.static.elab-plus.com/launchTemplate/0a3b783c-c54a-4e13-ba50-8f0ac6bb35f4-%E6%92%AD%E6%94%BE.png"
        v-show="element.videoEditable"
        style="z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);display: block" />

      <section class="content">
        <!-- 默认属性动画 -->
        <div :class="'animated ' + this.element['animatedName']" :style="styleAnime" v-if="element['animatedFont']">
          <myfont :duration="element.duration" :delay="element.delay" :loop="element.loop"
            :fonts="element.text.replace(/\n/g,'^').split('')" :class="element['animatedFont']"
            :fontstyle="element['animatedFont']" :highLightDelimitId="isOverView?'':element.nodeId"
            :elabEditable="element['elabEditable']||true" :style="styleBasic">{{ element.text }}</myfont>
        </div>
        <div :class="'animated ' + this.element['animatedName']" :style="styleAnime"
          v-else-if="this.element['animatedType']==0">
          <div :highLightDelimitId="isOverView?'':element.nodeId" :elabEditable="element['elabEditable']||true"
            :style="styleBasic" :class="this.element['animatedFont'] ">{{ element.text }}</div>
        </div>
        <div :class="'animated ' + this.element['animatedName']" :style="styleAnime" v-else>
          <div :highLightDelimitId="isOverView?'':element.nodeId" :elabEditable="element['elabEditable']||true"
            :style="styleBasic" :class="this.element['animatedFont'] ">{{ element.text }}</div>
        </div>
      </section>
    </template>
    <elab-background-canvas v-else-if="element.eleCanvas=='WaterRipple'" :width="element.width" :height="element.height"
      :cstyle="`position:absolute;z-index: 1;border-radius:${element.circular+'%'}`" :type="element.eleCanvas"
      :picSrc="element.backgroundUnselectedImg">
    </elab-background-canvas>

    <Operate v-show="showOperate || show|| $store.state.editor.complexEditorElement.indexOf(element)>-1"
      @mousedown.native.stop="scaleMousedown" @mouseup.native.stop="scaleMouseup"
      @mousemove.native.stop="scaleMousemove" />
  </div>
</template>

<script>
  import Operate from '../Operate'
  import appConst from '../../util/appConst'
  import myfont from '../font/font'
  import elabBackgroundCanvas from '../../util/canvas/elabBackgroundCanvas'
  var body = document.body;

  export default {
    props: {
      element: {
        type: Object,
        require: true
      },
      showOperate: {
        type: Boolean
      },
      stopEvent: {
        type: Boolean
      },
      type: '',
      isOverView:Boolean
    },

    data() {
      return {
        left: 0,
        top: 0,
        width: 0,
        height: 0,
        currentX: 0,
        currentY: 0,
        flag: false,
        scaleFlag: false,
        direction: '',
        http: appConst.BACKEND_DOMAIN,
        show: false
      }
    },
    mounted() {
      window.addEventListener("mouseup", () => {

        this.$store.state.user.operationFlag = true;
        this.flag = false
        this.scaleFlag = false
      })
    },
    methods: {
      // 处理元素拖动
      move() {
        var body = document.body;
        // var editor = document.querySelector('.editor')
        document.querySelector('body').onmousemove = (event) => {
          var e = event || window.event
          if (this.flag && !this.scaleFlag) {
            let nowX = e.clientX
            let nowY = e.clientY
            let disX = nowX - this.currentX
            let disY = nowY - this.currentY
            if (this.$store.state.editor.complexEditorElement.indexOf(this.element) > -1 && this.$store.state.editor.complexEditorElement.length > 1) {
              this.$store.state.editor.complexEditorElement.forEach((ele, index) => {
                ele['top'] = disY + this.startTopArr[index]
                ele['left'] = ele.type == 'frame' ? 0 : disX + this.startLeftArr[index]
              });
              return;
            }
            this.element.top = parseInt(this.top) + disY
            this.element.left = parseInt(this.left) + disX
          }
        }
      },
      // 处理元素伸缩
      scaleMousemove() {
        document.querySelector('.editor').onmouseup = (event) => {
          this.scaleFlag = false
        }
        document.querySelector('.editor').onmousemove = (event) => {
          var e = event || window.event
          if (this.scaleFlag) {
            let nowX = e.clientX
            let nowY = e.clientY
            let disX = nowX - this.currentX
            let disY = nowY - this.currentY
            let ratio = this.width / this.height
            switch (this.direction) {
              // 左边
              case 'w':
                this.element.width = parseInt(this.width) - disX
                // this.element.height = parseInt(((this.width) - disX)/ratio)
                this.element.left = parseInt(this.left) + disX
                break
              // 右边
              case 'e':
                this.element.width = parseInt(this.width) + disX
                // this.element.height = parseInt(((this.width) + disX)/ratio)
                break
              // 上边
              case 'n':
                this.element.height = parseInt(this.height) - disY
                // this.element.width = parseInt(((this.height) - disY)*ratio)
                this.element.top = parseInt(this.top) + disY
                break
              // 下边
              case 's':
                this.element.height = parseInt(this.height) + disY
                // this.element.width = parseInt(((this.height) + disY)*ratio)
                break
              // 左上
              case 'nw':
                // this.element.width = parseInt(this.width) - disX
                this.element.width = parseInt(((this.height) - disY) * ratio)
                // this.element.left = parseInt(this.left) + disX
                this.element.left = parseInt(this.left + disY * ratio)
                this.element.height = parseInt(this.height) - disY
                this.element.top = parseInt(this.top) + disY
                break
              // 左下
              case 'sw':
                // this.element.width = parseInt(this.width) - disX
                this.element.width = parseInt(((this.height) + disY) * ratio)
                // this.element.left = parseInt(this.left) + disX
                this.element.left = parseInt(this.left - disY * ratio)
                this.element.height = parseInt(this.height) + disY
                break
              // 右上
              case 'ne':
                this.element.height = parseInt(this.height) - disY
                this.element.top = parseInt(this.top) + disY
                // this.element.width = parseInt(this.width) + disX
                this.element.width = parseInt(((this.height) - disY) * ratio)
                break
              // 右下
              case 'se':
                this.element.height = parseInt(this.height) + disY
                // this.element.width = parseInt(this.width) + disX
                this.element.width = parseInt(((this.height) + disY) * ratio)
                break
            }
          }
        }
      },
      mousedown(e) {
        this.$store.state.user.operationFlag = false;
        if (this.element.locked) {
          return false;
        }
        if (this.stopEvent) {
          return false
        }
        this.flag = true
        this.currentX = e.clientX
        this.currentY = e.clientY
        if (this.$store.state.editor.complexEditorElement.indexOf(this.element) > -1 && this.$store.state.editor.complexEditorElement.length > 1) {
          this.startTopArr = this.$store.state.editor.complexEditorElement.map(v => v.top)
          this.startLeftArr = this.$store.state.editor.complexEditorElement.map(v => v.left)
        }
        this.top = this.element.top
        this.left = this.element.left
        this.move()
      },
      mouseup(e) {
        this.$store.state.user.operationFlag = true;
        this.flag = false
        this.scaleFlag = false
      },
      mouseover(e) {
        if (this.$store.state.editor.editorPage.elements.indexOf(this.element) == -1) {
          return
        }
        this.show = true
      },
      mouseleave(e) {
        this.show = false
      },
      scaleMousedown(e) {
        this.$store.state.user.operationFlag = false;
        this.scaleFlag = true
        this.flag = true
        this.currentX = e.clientX
        this.currentY = e.clientY
        this.top = this.element.top
        this.left = this.element.left
        this.width = this.element.width
        this.height = this.element.height
        this.direction = e.target.getAttribute('data-direction')
        this.scaleMousemove()
      },
      scaleMouseup(e) {
        this.$store.state.user.operationFlag = true;
        this.scaleFlag = false
        this.flag = false
      },
      dragstart(event) {
        event.preventDefault()
      }
    },
    components: {
      Operate,
      myfont,
      elabBackgroundCanvas
    },
    computed: {
      editingElement () {
        return this.$store.getters['editingElement']
      },
      styleAnime () {
        var playing = this.element['playing']
        //粒子滚动效果
        if (this.element['animatedType'] == 1) {
          ////粒子滚动效果，如果设置了延迟播放大小，则进行判断，默认是不延迟,默认的虚线宽度是70
          if (this.element['delay'] ==0) {
            if (playing) {
              return {
                animationName: this.element['animatedName'],
                animationDuration: this.element['duration']+'s',
                animationTimingFunction: 'linear',
                animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
              }
            }
            //stroke动画不动的情况，stroke填充线条
            return {
              // animationName: this.element['animatedName'],
              strokeDasharray: '300 400',
              animationDuration: this.element['duration']+'s',
              animationTimingFunction: 'linear',
              animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
            }
          }
          return {
            animationName: this.element['animatedName'],
            animationDuration: this.element['duration']+'s',
            animationTimingFunction: 'linear',
            animationDelay: this.element['delay'] + 's',
            animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
          }
        } else if (this.element['animatedType'] == 2) { //类似抖音抖动动画
          var sharksScroll = {
            animationDirection: 'reverse',
            animationFillMode: 'none',
            animationPlayState: 'running',
            animationTimingFunction: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
            animationDelay: this.element['delay'] + 's',
            animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
            animationDuration: this.element['duration']+'s',
            animationDelay: this.element['delay'] + 's',
          };
          if (playing) {
            sharksScroll = {
              animationDirection: 'reverse',
              animationFillMode: 'none',
              animationPlayState: 'running',
              animationName: this.element['animatedName'],
              animationTimingFunction: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
              animationDelay: this.element['delay'] + 's',
              animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
              animationDuration: this.element['duration']+'s',
              animationDelay: this.element['delay'] + 's',
            }
          }
          return sharksScroll;
        }
        return {
          animationIterationCount: this.element['loop'] ? 'infinite' : 'initial',
          animationDuration: this.element['duration'] + 's',
          animationDelay: this.element['delay'] + 's'
        }
      },

      styleBasic () {
        return {
          width: this.element['width'] + 'px',
          height: this.element['height'] + 'px',
          lineHeight: this.element['lineHeight'],
          color: this.element['color'],
          backgroundColor: this.element['allTransparent'] || this.element['backgroundColor'],
          textAlign: this.element['textAlign'],
          fontSize: this.element['fontSize'] + 'px',
          fontWeight: this.element['fontWeight'],
          'font-family': this.element['fontFamily'],
          opacity: this.element['opacity'] / 100,
          transform: 'rotate(' + this.element['transform'] + 'deg' + ')',
          'vertical-align': this.element['verticalAlign'],
          display: this.element['display'],
          'text-indent': this.element['textIndent'] + 'em',
          'letter-spacing': this.element['letterSpacing'] + 'em',
          'writing-mode' : this.element['verticalFont'],
          'white-space' : this.element['verticalFont'] ? 'pre' : 'pre-wrap'
        }
      }
    },
  }
</script>

<style lang='less' scoped>
  .content {
    /*white-space: pre-wrap;*/
    word-wrap: break-word;
    position: absolute;
    top: 0;
    z-index: 3;
  }

  .wrap {
    position: absolute;
    cursor: move;
  }

  .wrap img {
    position: absolute;
    user-select: none;
    /*-webkit-user-drag: none;*/
  }
</style>