vue页挂件小人的代码

以下是一个基于Vue.js开发的挂件小人的代码示例：

<template>
  <div class="widget-container">
    <div class="widget" :style="{ bottom: bottom + 'px' }">
      <div class="head"></div>
      <div class="body"></div>
      <div class="legs"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Widget',
  data() {
    return {
      bottom: 0,
      direction: 1,
      intervalId: null
    }
  },
  mounted() {
    this.intervalId = setInterval(this.animate, 16)
  },
  beforeDestroy() {
    clearInterval(this.intervalId)
  },
  methods: {
    animate() {
      this.bottom += this.direction
      if (this.bottom > 200 || this.bottom < 0) {
        this.direction *= -1
      }
    }
  }
}
</script>

<style>
.widget-container {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
}

.widget {
  position: absolute;
  right: 20px;
  width: 40px;
  height: 60px;
  background-color: #FFC107;
  border-radius: 50% 50% 0 0;
  animation: wiggle 0.5s infinite;
}

.head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
}

.body {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
}

.legs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 20px;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
}

@keyframes wiggle {
  0% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(5deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  75% {
    transform: rotateZ(-5deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
</style>

你可以将上面的代码复制到你的Vue组件中，然后在页面中使用该组件即可。