设置Vue 3的动画幸运轮的实例教程

Vue.js 3的一个易于使用的幸运轮组件。用TypeScript编写。

如何使用它。

1.导入并注册该组件。

import { Wheel } from 'vue3-fortune-wheel'

export default {
  components: {
    Wheel,
  },
}

2.2.将轮子组件添加到模板中。

<Wheel />

export default {
  name: "App",
  components: {
    Wheel,
  },
  data() {
    return {
      gift: 1,
      colors: ["#7d7db3", "#c92729"],
      logo: {
        width: 100,
        height: 120,
        src:
          "logo.png",
      },
      data: [
        {
          value: "Gift 1",
          id: 1,
        },
        {
          value: "Gift 2",
          id: 2,
        },
        {
          value: "Gift 3",
          id: 3,
        },
        {
          value: "Gift 4",
          id: 4,
        },
        {
          value: "Gift 5",
          id: 5,
        },
        {
          value: "Gift 6",
          id: 6,
        },
      ],
    };
  },
  methods: {
    done(params) {
      console.log(params);
    },
    spinTheWheel() {
      this.$refs.wheel.spin();
    },
  },
};

3.可用的组件道具。

animDuration: {
  type: Number,
  default: 6000,
},
data: {
  type: Object as PropType<Data>,
  default: () => ({}),
  validator: (data: Data): boolean => {
    return data.length <= 8
  },
},
gift: {
  type: Number,
  default: 0
},
imgParams: {
  type: Object as PropType<imgParams>,
  default: () => ({}),
},

预览。

更改日志。

v1.1.0 (09/30/2022)

• feat(wheel): 创建一个基本的轮子组件
• feat(img): 在中心位置添加图片
• 修复/在中心位置添加图片
• feat(color): 在数据上添加颜色
• feat(color): 添加textColor + bgColor
• feat(build): 添加类型+css
• feat(v-model): 移除v-model使用道具礼物
• feat(dependancies): 升级dependancies + types

The postAnimated Fortune Wheel For Vue 3appeared first onVue Script.