turntable_v1 v1.0.3

使用

npm install turntable_v1

方式二：
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script src="http:xxx/dist/turntable.umd.js"></script>
需要注意 <Turntable ref="myRotate" :styles="styles" @getprizeinfo="getPrizeInfo" />
 @getprizeinfo 不能使用驼峰
 const { ref } = Vue
 new Vue({
    el: '#app',
    setup() {
        let styles = {}
        const myRotate = ref(null);

        function getPrizeInfo() {
            //ajax
            myRotate.value.startRotate(result, function(res) {
                console.log(res.txt);
            });
        }
        return { styles, getPrizeInfo,myRotate }
    },
})
 

样式传参

  转盘 可能 分三层（底层/奖品层/点击旋转指针层）或者两层（奖品层/点击旋转指针层）
  r1:底层---没有可以传空对象
  r2:奖品层 
  r3:指针层

样式传参示例

  const styles = {
      r1: {//无背景 传空对象 必填
        w: "16rem",
        h: "16rem",
        img: require("./img/r1.png"),
      },
      r2: {
        w: "15rem",
        h: "15rem",
        img: require("./img/r2.png"),
        (选填)isBtn:0,//参数 1/2/3 1:按钮在中间指针上  2:按钮在中间奖品盘上  3.按钮在外部 默认参数1
      },
      r3: {
        w: "3.6rem",
        h: "4.225rem",
        img: require("./img/r3.png"),
        (选填)isBtn:0,//参数 1/2/3 1:按钮在中间指针上  2:按钮在中间奖品盘上  3.按钮在外部 默认参数1
        (选填)top:0,//指针的位置 上下
        (选填)left:0,//指针的位置 左右
      },
    };

功能传参

   <Turntable ref="myRotate" :styles="styles" @getPrizeInfo="getPrizeInfo" />

   ## 点击按钮触发 getPrizeInfo事件
    function getPrizeInfo() {
      //ajax获取奖品名称或者奖品id 赋值给data 
      let data = "5";
      let result;
      switch (data) {
        case "1": //这里传奖品名称 或者 id 随意配置
          result = { deg: 0, txt: "100元" };
          break;
        case "2":
          result = { deg: 60, txt: "机油" };
          break;
        case "3":
          result = { deg: 120, txt: "8折工时券" };
          break;
        case "4":
          result = { deg: 180, txt: "空气滤芯1只" };
          break;
        case "5":
          result = { deg: 240, txt: "机油滤清器1只" };
          break;
        default:
          result = { deg: 30, txt: "很遗憾，你未中奖" };
          break;
      }
      ### 调用子组件start方法 传参 result.deg和回调函数 必传
      myRotate.start(result, function (res) {
        alert(res.txt);
      });
    }

开发组件二 单包开发 基于vue-cli构建目标vue-cli-service build --target lib --name myLib entry

创建项目

 vue create 项目名
 配置

第一步

  新建文件夹目录 本地预览可随意（改成examples文件名作为本地预览）
  组件放在目录packages（这个就放src下）
  src 下 放一个全局导出的js 一样通过install注册组件 use使用

第二步

配置打包 package.json 
需要配置 "version"::"版本"
	    "private": false
	    "main": "dist/test.umd.js",主入口文件

新加打包命令“lib”：
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name test src/index.js"