surveyMaker/src/components/Element/FrameElement.vue

<template>
  <div class='element' @mousedown="mousedown" @mouseup="mouseup"  @mouseover="mouseover" @mouseleave="mouseleave">
    <!--<div style="height: 100%;width: 100%;" @dragstart="dragstart">-->
        <!--2134654867-->
    <!--</div>-->
    <Operate class="operate" v-show="element === editingElement || show" :element="element"
             @mousedown.native.stop="scaleMousedown" @mouseup.native.stop="scaleMouseup" @mousemove.native.stop="scaleMousemove"/>
    <section class="content">
      <div :class="'animated ' + this.element['animatedName']" :style="styleAnime">
        <div :style="styleBasic">{{ element.text }}</div>
        <template v-for="element in element.children">
          <div>
            <!-- 单图元素 -->
            <PicElement :stopEvent="true" :type="type" v-if="element.type==='pic'" :class="[element.playing?'animated ' + element.animatedName:'',element.loop?'infinite':'']" :element="element"
                        :style="{transform:'rotate('+element.transform+'deg)','z-index':element.zindex,opacity:element.opacity/100,width:element.width+'px',height:element.height+'px',top:element.top+'px',left:element.left + 'px','animation-duration':element.duration + 's','-webkit-animation-duration':element.duration + 's','animation-delay':element.delay + 's','-webkit-animation-delay':element.delay + 's'}">
              <img style="width:100%;height:100%;" :src="element.imgSrc">
            </PicElement>
            <!-- 字体元素 -->
            <FontElement :stopEvent="true" class="element" v-if="element.type === 'text'" :element="element" :style="elementPosition(element)"></FontElement>
            <!-- 形状元素 -->
            <ShapesElement :stopEvent="true" v-if="element.type==='icon'" :iconKey="element.iconKey" :element="element" :style="{fill:'#fff',transform:'rotate('+element.transform+'deg)','z-index':element.zindex,opacity:element.opacity/100,width:element.width+'px',height:element.height+'px',top:element.top+'px',left:element.left + 'px','animation-duration':element.duration + 's','-webkit-animation-duration':element.duration + 's','animation-delay':element.delay + 's','-webkit-animation-delay':element.delay + 's'}" :class="[element.playing?'animated ' + element.animatedName:'']"></ShapesElement>

            <!-- 多图左右滑动元素 -->
            <MorePicElement :stopEvent="true" :type="type" v-if="element.type==='morePic'" :class="[element.playing?'animated ' + element.animatedName:'',element.loop?'infinite':'']" :element="element"
                            :style="{transform:'rotate('+element.transform+'deg)','z-index':element.zindex,opacity:element.opacity/100,width:element.width+'px',height:element.height+'px',top:element.top+'px',left:element.left + 'px','animation-duration':element.duration + 's','-webkit-animation-duration':element.duration + 's','animation-delay':element.delay + 's','-webkit-animation-delay':element.delay + 's'}">

              <mt-swipe :auto="4000" class="swiper-img data-img3 data-img" style="height: 100%;width: 100%">
                <mt-swipe-item v-for="pic in element.morePic">
                  <img :src="pic.filePath"  style='height: 100%;width: 100%'/>
                </mt-swipe-item>
              </mt-swipe>
              <!--<img style="width:100%;height:100%;" :src="element.imgSrc">-->
            </MorePicElement>
            <!-- 单图元素 -->
            <ButtonElement :stopEvent="true" :type="type" v-if="element.type==='button'" :class="[element.playing?'animated ' + element.animatedName:'',element.loop?'infinite':'']" :element="element"
                        :style="{transform:'rotate('+element.transform+'deg)','z-index':element.zindex,opacity:element.opacity/100,width:element.width+'px',height:element.height+'px',top:element.top+'px',left:element.left + 'px','animation-duration':element.duration + 's','-webkit-animation-duration':element.duration + 's','animation-delay':element.delay + 's','-webkit-animation-delay':element.delay + 's'}">
              <img style="width:100%;height:100%;" :src="element.imgSrc">
            </ButtonElement>
            <!--<FrameElement :stopEvent="true" class="element" v-if="element.type === 'frame'" :element="element" :children="element.children" :style="elementPosition(element)">-->
              <!--<div style="width:394px;height:394px;"></div>-->
            <!--</FrameElement>-->
          </div>
        </template> 
      </div>
    </section>
  </div>
</template>

<script>
  import Operate from '../Operate'
  import appConst from '../../util/appConst'
  import PicElement from './PicElement'
  import ButtonElement from './ButtonElement'
  import FontElement from './FontElement'
  import ShapesElement from './ShapesElement'
  import MorePicElement from './morePicElement'
  
  export default{
    props: {
      element: {
        type: Object,
        require: true
      },
      showOperate: {
        type: Boolean
      },
      children: {
        type: Array
      },
      stopEvent: {
        type: Boolean
      },
      type: ''
    },
    computed: {
      elementPosition () {
        return (ele) => {
          return {
            zIndex: ele['zindex'],
            top: ele['top'] + 'px',
            left: ele['left'] + 'px'
          }
        }
      },
      editingElement () {
        return this.$store.getters['editingElement']
      },
      styleAnime () {
        return {
          animationIterationCount: this.element['loop'] ? 'infinite' : 'initial',
          animationDuration: this.element['duration'] + 's',
          animationDelay: this.element['delay'] + 's'
        }
      },
      styleBasic () {
        return {
          height: this.element['height'] + 'px',
          width: this.element['width'] + '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' + ')',
          border: this.element['border'],
          'vertical-align': this.element['verticalAlign'],
          display: this.element['display'],
          'text-indent': this.element['textIndent'] + 'em',
          'letter-spacing': this.element['letterSpacing'] + 'em'
        }
      }
    },
    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
      }
    },
    methods: {
      // 处理元素拖动
      move () {
        document.querySelector('.editor').onmousemove = (event) => {
          var e = event || window.event
          if (this.flag) {
            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
            this.element.left = 0
          }
        }
      },
      // 处理元素伸缩
      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
            switch (this.direction) {
              // 左边
              case 'w':

                // var percentage= this.element.width/(parseInt(this.width) - disX)
                // this.element.children.forEach(function (child) {
                //   child.width=child.width/percentage
                //   child.left=child.left/percentage
                //   // child.fontSize=child.fontSize/percentage
                // })
                // this.element.width = parseInt(this.width) - disX
                // this.element.left = parseInt(this.left) + disX
                break
              // 右边
              case 'e':
                // var percentage= this.element.width/(parseInt(this.width) + disX)
                // this.element.children.forEach(function (child) {
                //   child.width=child.width/percentage
                //   child.left=child.left/percentage
                //   // child.fontSize=child.fontSize/percentage
                // })
                // this.element.width = parseInt(this.width) + disX
                break
              // 上边
              case 'n':
                // var percentage= this.element.height/(parseInt(this.height) - disY)
                // this.element.children.forEach(function (child) {
                //   child.height=child.height/percentage
                //   child.top=child.top/percentage
                //   child.fontSize=child.fontSize/percentage
                // })
                this.element.height = parseInt(this.height) - disY
                this.element.top = parseInt(this.top) + disY
                break
              // 下边
              case 's':
                // var percentage= this.element.height/(parseInt(this.height) + disY)
                // this.element.children.forEach(function (child) {
                //   child.height=child.height/percentage
                //   child.top=child.top/percentage
                //   child.fontSize=child.fontSize/percentage
                // })
                this.element.height = parseInt(this.height) + disY
                break
              // 左上
              case 'nw':
                // var percentage1= this.element.height/(parseInt(this.height) - disY)
                // var percentage2= this.element.width/(parseInt(this.width) - disX)
                // this.element.children.forEach(function (child) {
                //   child.height=child.height/percentage1
                //   child.top=child.top/percentage1
                //   child.width=child.width/percentage2
                //   child.left=child.left/percentage2
                //   child.fontSize=child.fontSize/percentage1
                // })
                // this.element.width = parseInt(this.width) - disX
                // this.element.left = parseInt(this.left) + disX
                this.element.height = parseInt(this.height) - disY
                this.element.top = parseInt(this.top) + disY
                break
              // 左下
              case 'sw':
                // var percentage1= this.element.width/(parseInt(this.width) - disX)
                // var percentage2= this.element.height/(parseInt(this.height) + disY)
                // this.element.children.forEach(function (child) {
                //   child.height=child.height/percentage2
                //   child.top=child.top/percentage2
                //   child.width=child.width/percentage1
                //   child.left=child.left/percentage1
                //   child.fontSize=child.fontSize/percentage2
                // })
                // this.element.width = parseInt(this.width) - disX
                // this.element.left = parseInt(this.left) + disX
                this.element.height = parseInt(this.height) + disY
                break
              // 右上
              case 'ne':
                // var percentage1= this.element.width/(parseInt(this.width) + disX)
                // var percentage2= this.element.height/(parseInt(this.height) - disY)
                // this.element.children.forEach(function (child) {
                //   child.height=child.height/percentage2
                //   child.top=child.top/percentage2
                //   child.width=child.width/percentage1
                //   child.left=child.left/percentage1
                //   child.fontSize=child.fontSize/percentage2
                // })
                this.element.height = parseInt(this.height) - disY
                this.element.top = parseInt(this.top) + disY
                // this.element.width = parseInt(this.width) + disX
                break
              // 右下
              case 'se':
                // var percentage1= this.element.width/(parseInt(this.width) + disX)
                // var percentage2= this.element.height/(parseInt(this.height) + disY)
                // this.element.children.forEach(function (child) {
                //   child.height=child.height/percentage2
                //   child.top=child.top/percentage2
                //   child.width=child.width/percentage1
                //   child.left=child.left/percentage1
                //   child.fontSize=child.fontSize/percentage2
                // })
                this.element.height = parseInt(this.height) + disY
                // this.element.width = parseInt(this.width) + disX
                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()
        document.addEventListener('mouseup', this.mouseup)
      },
      mouseup (e) {
        this.$store.state.user.operationFlag=true;
        this.flag = false
        this.scaleFlag = false
        document.querySelector('.editor').onmousemove=null;
        document.removeEventListener('mouseup', this.mouseup)
      },
      mouseover (e) {
        this.show = true
      },
      mouseleave(e){
        this.show = false
      },
      scaleMousedown (e) {
        this.$store.state.user.operationFlag=false;
        this.scaleFlag = 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
      },
      dragstart (event) {
        event.preventDefault()
      }
    },
    components: {
      Operate,PicElement, FontElement, ShapesElement, MorePicElement,ButtonElement
    }
  }
</script>

<style lang='less' scoped>
  .wrap {
    position: absolute;
    cursor: move;
  }

  .wrap img {
    position: absolute;
    user-select: none;
    /*-webkit-user-drag: none;*/
  }
  div{
       -webkit-animation-fill-mode:none
     }
  .canvas {
    background-color: #fff;
    margin: 0 auto;
    position: relative;
  }
  .bg-layer{
    position:relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }
  .element {
    position: absolute;
  }
</style>