diff --git a/packages/taro/react/LuckyWheel.js b/packages/taro/react/LuckyWheel.js index 6650cf2..e2afbc5 100644 --- a/packages/taro/react/LuckyWheel.js +++ b/packages/taro/react/LuckyWheel.js @@ -2,7 +2,7 @@ import React from 'react' import Taro from '@tarojs/taro' import { View, Canvas, CoverView, Image } from '@tarojs/components' import { LuckyWheel as Wheel } from 'lucky-canvas' -import { changeUnits, resolveImage, getFlag, getImage } from '../utils' +import { changeUnits, resolveImage, getFlag, getImage, extractUnit } from '../utils' import '../utils/index.css' export default class LuckyWheel extends React.Component { @@ -16,9 +16,11 @@ export default class LuckyWheel extends React.Component { boxHeight: 300, btnWidth: 0, btnHeight: 0, + widthUnix: 'px', + heightUnix: 'px' } - constructor (props) { + constructor(props) { super(props) } @@ -70,7 +72,9 @@ export default class LuckyWheel extends React.Component { const { props } = this this.setState({ boxWidth: changeUnits(props.width), - boxHeight: changeUnits(props.height) + boxHeight: changeUnits(props.height), + widthUnix: extractUnit(props.width), + heightUnix: extractUnit(props.height) }, () => { // 某些情况下获取不到 canvas setTimeout(() => { @@ -179,7 +183,7 @@ export default class LuckyWheel extends React.Component { render () { const { props, state, flag } = this - const boxSize = { width: state.boxWidth + 'px', height: state.boxHeight + 'px' } + const boxSize = { width: state.boxWidth + state.widthUnix, height: state.boxHeight + state.heightUnix } const btnSize = { width: state.btnWidth + 'px', height: state.btnHeight + 'px' } const showImage = state.myLucky && flag !== 'WEB' return flag === 'WEB' ?
: ( @@ -189,39 +193,39 @@ export default class LuckyWheel extends React.Component { {/* 按钮 */} this.toPlay(e)} style={btnSize}> {/* 图片 */} - { showImage ? + {showImage ? { props.blocks.map((block, index) => { block.imgs ? - { block.imgs.map((img, i) => this.imgBindload(e, 'blocks', index, i)}>) } + {block.imgs.map((img, i) => this.imgBindload(e, 'blocks', index, i)}>)} : null } ) } - : null } - { showImage ? + : null} + {showImage ? { props.prizes.map((prize, index) => { prize.imgs ? - { prize.imgs.map((img, i) => this.imgBindload(e, 'prizes', index, i)}>) } + {prize.imgs.map((img, i) => this.imgBindload(e, 'prizes', index, i)}>)} : null } ) } - : null } - { showImage ? + : null} + {showImage ? { props.buttons.map((button, index) => { button.imgs ? - { button.imgs.map((img, i) => this.imgBindload(e, 'buttons', index, i)}>) } + {button.imgs.map((img, i) => this.imgBindload(e, 'buttons', index, i)}>)} : null } ) } - : null } + : null} ) } diff --git a/packages/taro/utils/index.js b/packages/taro/utils/index.js index 7cc8b67..4ef0a8d 100644 --- a/packages/taro/utils/index.js +++ b/packages/taro/utils/index.js @@ -89,3 +89,11 @@ export function getImage (canvasId, canvas) { }, this) }) } + +export const extractUnit = (value) => { + const match = value.match(/^(\-*[0-9.]*)([a-z%]*)$/); + if (match) { + return match[2]; // 返回匹配到的单位部分 + } + return ''; // 如果没有匹配到,返回空字符串或其他默认值 +}; \ No newline at end of file