diff --git a/package.json b/package.json index 3738157..957c85b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nutui/nutui-bingo", - "version": "1.0.7-beta.1", + "version": "1.0.7-beta.2", "description": "nutui生态之一抽奖组件库", "main": "dist/nutbig.umd.js", "module": "dist/nutbig.es.js", diff --git a/src/packages/__VUE/lottoroll/index.taro.vue b/src/packages/__VUE/lottoroll/index.taro.vue index ccff46d..e551caf 100644 --- a/src/packages/__VUE/lottoroll/index.taro.vue +++ b/src/packages/__VUE/lottoroll/index.taro.vue @@ -66,6 +66,10 @@ export default create({ () => props.prizeIndex, (val) => { prize.value = val; + }, + { + immediate: true, + deep: true, } ); @@ -81,7 +85,17 @@ export default create({ window.setTimeout(cb, 1000 / 60); }; - const list = ref(props.prizeList); // 奖品列表 + const list = ref([]); // 奖品列表 + watch( + () => props.prizeList, + (val) => { + list.value = val; + }, + { + immediate: true, + deep: true, + } + ); const options = ref(); // 可视区域每列展示的奖品数 const startTime = ref(); const lock = ref(false); //上锁 diff --git a/src/packages/__VUE/lottoroll/index.vue b/src/packages/__VUE/lottoroll/index.vue index b5ab5f4..8782241 100644 --- a/src/packages/__VUE/lottoroll/index.vue +++ b/src/packages/__VUE/lottoroll/index.vue @@ -61,6 +61,18 @@ export default create({ prize.value = val; } ); + + const list = ref([]); // 奖品列表 + watch( + () => props.prizeList, + (val) => { + list.value = val; + }, + { + immediate: true, + deep: true, + } + ); const _window: any = window; // https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame const animationFun = @@ -73,7 +85,6 @@ export default create({ _window.setTimeout(cb, 1000 / 60); }; - const list: TPrizeItem[] = props.prizeList; // 奖品列表 const options = ref | null>(); // 可视区域每列展示的奖品数 const startTime = ref(null); const lock = ref(false); //上锁 @@ -139,7 +150,7 @@ export default create({ ).offsetHeight; let prizeIdx = prize.value; // 中奖编号 if (prizeIdx < 0) { - prizeIdx = Math.floor(Math.random() * list.length); + prizeIdx = Math.floor(Math.random() * list.value.length); } // const prizeIndex = Math.floor(Math.random() * list.length); // 随机生成整数，测试用 const opts = { @@ -147,7 +158,7 @@ export default create({ location: prizeIdx * itemHeight, // 奖品滚动到指定的位置 rollTimes: 2000 + Math.random() * 500 + i * 500 + 1000 * props.turnsNumber, // 转圈数 - height: list.length * itemHeight, // 总的高度 + height: list.value.length * itemHeight, // 总的高度 duration: 6000 + i * 2000 + props.turnsTime, // 动画时间，毫秒数 isFinished: false, }; diff --git a/src/packages/__VUE/marquee/doc.md b/src/packages/__VUE/marquee/doc.md index 6b1ea4b..a32ede0 100644 --- a/src/packages/__VUE/marquee/doc.md +++ b/src/packages/__VUE/marquee/doc.md @@ -5,10 +5,11 @@ 用于跑马灯抽奖场景，可配置奖品、图片等。 ### 安装 -``` javascript -import { createApp } from 'vue'; + +```javascript +import { createApp } from "vue"; // vue -import { Marquee } from '@nutui/nutui-bingo'; +import { Marquee } from "@nutui/nutui-bingo"; const app = createApp(); app.use(Marquee); @@ -36,93 +37,97 @@ export default { // 转盘上要展示的奖品数据 const prizeList = ref([ { - id: 'xiaomi', - prizeName: '小米手机', - prizeImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png' + id: "xiaomi", + prizeName: "小米手机", + prizeImg: + "https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png", }, { - id: 'blue', - prizeColor: 'rgb(251, 219, 216)', - prizeName: '蓝牙耳机', - prizeImg: 'https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg' + id: "blue", + prizeColor: "rgb(251, 219, 216)", + prizeName: "蓝牙耳机", + prizeImg: + "https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg", }, { - id: 'thanks', - prizeName: '谢谢参与', - prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png' + id: "thanks", + prizeName: "谢谢参与", + prizeImg: + "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png", }, { - id: 'apple', - prizeName: 'apple watch', - prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png' + id: "apple", + prizeName: "apple watch", + prizeImg: + "https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png", }, { - id: 'fruit', - prizeColor: 'rgba(246, 142, 46, 0.5)', - prizeName: '迪士尼苹果', - prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png' + id: "fruit", + prizeColor: "rgba(246, 142, 46, 0.5)", + prizeName: "迪士尼苹果", + prizeImg: + "https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png", }, { - id: 'thanks', - prizeName: '谢谢参与', - prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png' + id: "thanks", + prizeName: "谢谢参与", + prizeImg: + "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png", }, { - id: 'fish', - prizeName: '海鲜套餐', - prizeImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png' + id: "fish", + prizeName: "海鲜套餐", + prizeImg: + "https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png", }, { - id: 'thanks', - prizeName: '谢谢参与', - prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png' - } + id: "thanks", + prizeName: "谢谢参与", + prizeImg: + "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png", + }, ]); // 转盘样式的选项 const styleOpt = reactive({ prizeItem: {}, - startStyle:{}, + startStyle: {}, contentBg: { - background: "rgb(255, 231, 149)" - } + background: "rgb(255, 231, 149)", + }, }); // 中奖的奖品的index(此数据可根据后台返回的值重新赋值) const prizeIndex = ref(0); const startTurns = () => { const index = Math.floor(Math.random() * prizeList.value.length); prizeIndex.value = index; - } + }; const endTurns = () => { - alert("中奖了") - } + console.log("中奖了"); + }; return { prizeList, styleOpt, prizeIndex, startTurns, - endTurns + endTurns, }; - } -} + }, +}; ``` - ### Props -| 字段 | 说明 | 类型 | 默认值 -|----- | ----- | ----- | ----- -| prize-list | 奖品列表 | Array | [] -| prize-index | 中奖奖品在列表的索引位置 | Number | -1 -| speed | 转动速度 | Number | 150 -| circle | 转动圈数 | Number | 30 -| style-opt | 跑马灯中的样式：contentBg-整个容器样式，prizeItem-每个奖品样式，startStyle-中间按钮样式 | Object | {contentBg: {},prizeItem: {},startStyle:{}} - - +| 字段 | 说明 | 类型 | 默认值 | +| ----------- | --------------------------------------------------------------------------------------- | ------ | ------------------------------------------- | +| prize-list | 奖品列表 | Array | [] | +| prize-index | 中奖奖品在列表的索引位置 | Number | -1 | +| speed | 转动速度 | Number | 150 | +| circle | 转动圈数 | Number | 30 | +| style-opt | 跑马灯中的样式：contentBg-整个容器样式，prizeItem-每个奖品样式，startStyle-中间按钮样式 | Object | {contentBg: {},prizeItem: {},startStyle:{}} | ### Events -| 字段 | 说明 | 回调参数 -|----- | ----- | ----- -| start-turns | 开始跑动的回调函数，此时将接口中的中奖索引，赋值到 prize-index| - -| end-turns | 停止跑动后的回调函数 | - - +| 字段 | 说明 | 回调参数 | +| ----------- | -------------------------------------------------------------- | -------- | +| start-turns | 开始跑动的回调函数，此时将接口中的中奖索引，赋值到 prize-index | - | +| end-turns | 停止跑动后的回调函数 | - | diff --git a/src/packages/__VUE/scratchcard/demo.vue b/src/packages/__VUE/scratchcard/demo.vue index 55e6a51..bc4c8e6 100644 --- a/src/packages/__VUE/scratchcard/demo.vue +++ b/src/packages/__VUE/scratchcard/demo.vue @@ -38,7 +38,7 @@ export default createDemo({ props: {}, setup() { const opencard = () => { - alert("刮开事件完成"); + console.log("刮开事件完成"); }; return { opencard }; }, diff --git a/src/packages/__VUE/turntable/doc.md b/src/packages/__VUE/turntable/doc.md index bc4b0ca..e6122dd 100644 --- a/src/packages/__VUE/turntable/doc.md +++ b/src/packages/__VUE/turntable/doc.md @@ -122,7 +122,7 @@ export default { turntable.value.rotateTurn(); }; const endTurns = () => { - alert("中奖了"); + console.log("中奖了"); }; return { turntable, diff --git a/src/packages/__VUE/turntable/index.taro.vue b/src/packages/__VUE/turntable/index.taro.vue index 7323cf2..79972cf 100644 --- a/src/packages/__VUE/turntable/index.taro.vue +++ b/src/packages/__VUE/turntable/index.taro.vue @@ -1,9 +1,5 @@ @@ -11,12 +16,12 @@ export default { setup() { function onlineFun() { - alert('hello'); + console.log("hello"); } return { - onlineFun + onlineFun, }; - } + }, };