yhuni-utils

yhuni-utils

使用

安装

npm install yhuni-utils

引入

import {yhtouchmove} from 'yhuni-utils'

为组件添加动态样式并指定touchmove方法

<view :style="styles" @touchmove="yhtouchmove($event, styles)"><view>

注意：样例中的styles是用reactive方法创建，如使用ref方法，请传参时传入styles.value

样例

<template>
	<view>
		<view class="box" :style="styles" @touchmove="yhtouchmove($event,styles)"></view>
	</view>
</template>
<script setup>
	import {
		reactive
	} from "vue";
	import {yhtouchmove} from 'yhuni-utils'
	const styles = reactive({})
</script>

<style>
	.box{
		background-color: aquamarine;
		width: 100vw;
		height: 100vw;
	}
</style>

如果在同一组件中有多个子组件需要使用旋转功能，请参照如下样例

<template>
	<view>
		<view class="box" :style="style1" @touchmove="yhtouchmove1($event,style1)"></view>
		<view class="box" :style="style2" @touchmove="yhtouchmove2($event,style2)"></view>
	</view>
</template>
<script setup>
	import {
		reactive
	} from "vue";
	import {useyhtouchmove} from 'yhuni-utils'
	const yhtouchmove1 = useyhtouchmove()
	const yhtouchmove2 = useyhtouchmove()
	const style1 = reactive({})
	const style2 = reactive({})
</script>

<style>
	.box{
		background-color: aquamarine;
		width: 50vw;
		height: 50vw;
	}
</style>