在vue3、ts项目中,实现点击按钮手机震动一下,具体代码实现方式
时间: 2024-02-24 16:57:56 浏览: 27
在 Vue 3 TypeScript 项目中实现点击按钮手机震动的方式与普通的 JavaScript 项目类似,只需要在按钮的 `click` 事件中调用 Vibration API 即可。下面是一个示例代码,可以在 Vue 3 TypeScript 项目中使用:
```vue
<template>
<button @click="vibrate">点击震动</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
vibrate() {
// 检测浏览器是否支持 Vibration API
if ("vibrate" in navigator) {
// 震动设备,其中参数为震动的时间,单位为毫秒
navigator.vibrate(200);
} else {
console.log("Vibration API not supported.");
}
}
}
});
</script>
```
在上面的代码中,我们在按钮的 `click` 事件中调用了 `vibrate` 方法,该方法中检测了浏览器是否支持 Vibration API,如果支持则调用 `navigator.vibrate` 方法震动设备。你可以根据需要调整震动的时间。如果浏览器不支持 Vibration API,则可以在控制台中输出一条错误信息。