拿來即用的vue旋轉(zhuǎn)木馬組件demo

更新時間：2023年03月15日 09:17:48 作者：小亮_money

這篇文章主要為大家介紹了拿來即用的vue旋轉(zhuǎn)木馬組件demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

實現(xiàn)步驟

1.確定組件類型

確定組件類型，如上圖設(shè)計，標(biāo)準(zhǔn)的旋轉(zhuǎn)木馬組件

2.選擇實現(xiàn)方式

1.1 使用swpier等現(xiàn)有的組件，進(jìn)行css樣式覆蓋

優(yōu)點：利用現(xiàn)有的組件進(jìn)行樣式覆蓋，開發(fā)速度快
缺點：需覆蓋樣式較多，編寫混亂，css基礎(chǔ)不足，導(dǎo)致徒勞無功 1.2 自己編寫一個旋轉(zhuǎn)木馬公用組件（選用）
優(yōu)點：鍛煉下自己插拔編程思想，方便后期復(fù)用，送人玫瑰，手留余香

3.功能需求分析

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

3.1 構(gòu)建空間，滿足3d外觀要求，并配有旋轉(zhuǎn)動畫、激活后的抖動（抖動暫未實現(xiàn)，有需要的可以自己追加css動畫接口）
3.2 可拖拽組件中子元素，拖拽結(jié)束后，激活選中的子元素
3.3 任意點擊子元素，激活點擊的子元素

4.話不多說，上代碼

復(fù)制下方的代碼，粘貼到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 {
      // 旋轉(zhuǎn)木馬配置
      TrojanOptions: {
        //默認(rèn)激活的子元素坐標(biāo)
        activeChildSort: 0,
        //是否允許進(jìn)行拖拽
        isDrop: false,
        //旋轉(zhuǎn)角度
        rotate: 0,
        // 向內(nèi)傾斜角度
        rotateX: -12,
        // 旋轉(zhuǎn)木馬子元素
        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: {
    //復(fù)位
    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
      }
    },
    //旋轉(zhuǎn)方法
    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); `;
    },
    //旋轉(zhuǎn)的觸發(fā)方法
    //也是入口
    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;

      // 此處可以擴(kuò)展鼠標(biāo)的移動，旋轉(zhuǎn)延續(xù)跟著移動的動畫效果
      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平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果
  // 具體可以操作該值進(jìn)行效果觀測
  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旋轉(zhuǎn)木馬組件demo的詳細(xì)內(nèi)容，更多關(guān)于vue旋轉(zhuǎn)木馬組件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: