vue旋轉木馬組件demo怎么實現

本文小編為大家詳細介紹“vue旋轉木馬組件demo怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue旋轉木馬組件demo怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

實現步驟

1.確定組件類型

確定組件類型，如上圖設計，標準的旋轉木馬組件

2.選擇實現方式

1.1 使用swpier等現有的組件，進行css樣式覆蓋

• 優點：利用現有的組件進行樣式覆蓋，開發速度快

• 缺點：需覆蓋樣式較多，編寫混亂，css基礎不足，導致徒勞無功 1.2 自己編寫一個旋轉木馬公用組件（選用）

• 優點：鍛煉下自己插拔編程思想，方便后期復用，送人玫瑰，手留余香

3.功能需求分析

本次我們主要講述自己實現組件，分析后，需要滿足以下功能點：

• 3.1 構建空間，滿足3d外觀要求，并配有旋轉動畫、激活后的抖動（抖動暫未實現，有需要的可以自己追加css動畫接口）

• 3.2 可拖拽組件中子元素，拖拽結束后，激活選中的子元素

• 3.3 任意點擊子元素，激活點擊的子元素

4.話不多說，上代碼

復制下方的代碼，粘貼到vue文件中，即可使用。

<template>
  <div class="wapper">
    <main id="main">
      <div class="Trojan"
           :style="{
            'transform':'rotateX('+TrojanOptions.rotateX+'deg) rotateY('+(-TrojanOptions.activeChildSort*singleAngle)+'deg)' 
           }">
        <div v-for="(item,index) in TrojanOptions.data"
             :key="index"
             class="TrojanChild"
             :class="TrojanOptions.activeChildSort===item.sort?'activeChild TrojanChild':'TrojanChild'"
             :style=" {
              '--index': index+1,   
              'transform':'rotateY('+(singleAngle*index)+'deg) translateZ(320px)'
            } "
             @mousedown="handleDrapDown($event,item)"> <img :src="item.src">
          {{item.sort}}
        </div>
      </div>
    </main>
  </div>
</template>

<script> 
export default {
  name: 'demo',
  components: {},
  data () {
    return {
      // 旋轉木馬配置
      TrojanOptions: {
        //默認激活的子元素坐標
        activeChildSort: 0,
        //是否允許進行拖拽
        isDrop: false,
        //旋轉角度
        rotate: 0,
        // 向內傾斜角度
        rotateX: -12,
        // 旋轉木馬子元素
        data: [
          {
            sort: 0,
            src: require("@/assets/logo.png"),
          },
          {
            sort: 1,
            src: require("@/assets/logo.png"),
          },
          {
            sort: 2,
            src: require("@/assets/logo.png"),
          },
          {
            sort: 3,
            src: require("@/assets/logo.png"),
          },
          {
            sort: 4,
            src: require("@/assets/logo.png"),
          },
          {
            sort: 5,
            src: require("@/assets/logo.png"),
          },
        ],
      },
    }
  },
  watch: {
  },
  created () {
  },
  computed: {
    //單個元素占用的角度
    singleAngle () {
      return parseInt(360 / this.TrojanOptions.data.length)
    },
  },
  mounted () {
  },
  destroyed () {
  },
  methods: {
    //復位
    resetPosition () {
      if (this.TrojanOptions.activeChildSort >= this.TrojanOptions.data.length) {
        this.TrojanOptions.activeChildSort = 0
      }
      if (this.TrojanOptions.activeChildSort < 0) {
        this.TrojanOptions.activeChildSort = this.TrojanOptions.data.length-1
      }
    },
    //旋轉方法
    startTurn (addflag, item) {
      let Trojan = document.querySelector(".Trojan");
      if (addflag === 0) {
        this.TrojanOptions.activeChildSort -= 1
        this.resetPosition()
      }
      else if (addflag === 1) {
        this.TrojanOptions.activeChildSort += 1
        this.resetPosition()
      }
      else {
        this.TrojanOptions.activeChildSort = item.sort
      }
      Trojan.style.cssText = ` transform: rotateX(` + this.TrojanOptions.rotateX + `deg) rotateY(${this.TrojanOptions.rotate}deg); `;
    },
    //旋轉的觸發方法
    //也是入口
    handleDrapDown (de, item) {
      const th = this
      let stratPoint = de.clientX || de.touches[0].clientX
      let endPoint = de.clientX || de.touches[0].clientX
      this.TrojanOptions.isDrop = true;

      // 此處可以擴展鼠標的移動，旋轉延續跟著移動的動畫效果
      document.onmousemove = (e) => {
        if (!this.TrojanOptions.isDrop) return false;
        e.preventDefault();
      }

      document.onmouseup = (e) => {
        if (!this.TrojanOptions.isDrop) return;
        endPoint = e.clientX || e.touches[0].clientX;
        this.TrojanOptions.isDrop = false;
        if (stratPoint < endPoint) {
          th.startTurn(0, item)
        }
        else if (stratPoint > endPoint) {
          th.startTurn(1, item)
        }
        else {
          th.startTurn(3, item)
        }
      }
    }
  }
}
</script>

<style lang="scss">
.wapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}
main {
  user-select: none;
  position: relative;
  width: 220px;
  height: 130px;
  // 官方解釋：指定了觀察者與z=0平面的距離，使具有三維位置變換的元素產生透視效果
  // 具體可以操作該值進行效果觀測
  perspective: 800px;
}
.Trojan {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1s;
}
.TrojanChild {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid yellow;
  color: #fff;
  &.activeChild {
    border: 1px solid red !important;
  }
  & img {
    width: 100%;
    height: 100%;
  }
  :hover {
    cursor: grab;
  }
  :active {
    cursor: grabbing;
  }
}
</style>

讀到這里，這篇“vue旋轉木馬組件demo怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。