更新记录

1.0.0（2023-11-09）

新增

平台兼容性

游戏手柄、游戏轮盘、游戏方向、游戏遥杆

长期维护，欢迎使用，欢迎提出您宝贵的意见

测试了APP，微信小程序，支付宝小程序，H5，按理说是全端兼容的，该插件仅仅用了view标签，触摸事件，以及一些三角函数。

第一步，引用组件

import dyGameHandShank from '@/components/dy-game-hand-shank/index';

第二步，注册组件

components: {
    dyGameHandShank
}

Props

options配置项

corona配置项

joystick配置项

Events

示例代码

<template>
    <view class="content">
        <dyGameHandShank
                :options="options"
                :touchAreaStyle="touchAreaStyle"
                :corona="corona"
                :joystick="joystick"
                @change="change"
        >
        </dyGameHandShank>
    </view>
</template>

<script>
    import dyGameHandShank from '@/components/dy-game-hand-shank/index'

    export default {
        components: {dyGameHandShank},
        data() {
            return {
                gameHandRes: {},
                options: {
                    direction: 2,
                    opacity: .3,
                    opacityActive: .7,
                },
                touchAreaStyle: { // 触摸区域样式
                    background: 'rgba(255,0,0,.5)',
                    position: 'absolute',
                    left: '0',
                    right: '0',
                    bottom: '0',
                },
                corona: { // 轮盘
                    r: 200,
                    x: 400,
                    y: 220,
                },
                joystick: { // 操纵杆
                    r: 120,
                },
            }
        },
        onLoad() {
            let _self = this;
        },
        methods: {
            change(e) {
                let _self = this;
                _self.gameHandRes = e;
            },
        }
    }
</script>