Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【前端工具类】003-实时获取鼠标位置的工具类:useMousePosition

【前端工具类】003-实时获取鼠标位置的工具类:useMousePosition

作者头像
訾博ZiBo
发布于 2025-01-06 11:21:20
发布于 2025-01-06 11:21:20
15600
代码可运行
举报
运行总次数:0
代码可运行

【前端工具类】003-实时获取鼠标位置的工具类:useMousePosition

一、Vue3 usexxx 写法

1、代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { ref, onMounted, onUnmounted } from "vue";

export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  function handleMouseMove(event: MouseEvent) {
    x.value = event.clientX;
    y.value = event.clientY;
  }

  onMounted(() => {
    document.addEventListener("mousemove", handleMouseMove);
  });

  onUnmounted(() => {
    document.removeEventListener("mousemove", handleMouseMove);
  });

  return { x, y };
}

2、使用示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div>
    <p>鼠标当前位置:({{ position.x }}, {{ position.y }})</p>
  </div>
</template>

<script>
import { useMousePosition } from "@/hooks/useMousePosition";

export default {
  setup() {
    const position = useMousePosition();

    return { position };
  },
};
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
我的公众号文章是如何排版的?
文字排版是一篇文章展现给读者的第一印象,不知道大家怎么看,反正我每次看到排版错乱的文章,往下读的兴趣直接减少了一半。
用户3596197
2018/10/15
1.5K0
微信公众号Markdown Here排版的缺失环节
早上看了一下微信公众号后台。我上一篇微信公众号什么时间发的?看完我自己都吓了一跳——4月15日!
王树义
2018/08/22
1.3K0
微信公众号Markdown Here排版的缺失环节
Markdown转微信公众号排版神器
目前只支持pc端,欢迎体验http://md.aizhuanqian.online
用户1974410
2022/09/20
2.6K0
Markdown转微信公众号排版神器
Markdown Nice - 支持微信公众号等排版的 Markdown 编辑器
日常进行公众号写作的时候, 有很多进行排版的工作, 这样的工作可以用 H5在线制作工具 进行, 或者干脆用公众号编辑器, 但是作为一个程序员, Markdown 转 html 就成了最好的决策.
叶子Tenney
2023/04/03
1.6K0
Markdown Nice - 支持微信公众号等排版的 Markdown 编辑器
用Markdown写微信公众号文章
有一款叫Markdown Here的插件可以解决这个问题(支持Chrome、Firefox、Safari)。
云深无际
2020/08/12
2.1K0
用Markdown写微信公众号文章
Markdown入门指南【我为什么要推荐你学习Markdown?】
Markdown 是一种可以使用普通文本编辑器编写的轻量级标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,可以导出 PPT、LaTex、HTML、Word、PDF、Epub、JPG 等多种格式的文档,文档后缀为 .md。
我是管小亮
2020/04/20
1.7K0
一个专注于微信公众号 Markdown 排版的平台
由于 Md2All 很长一段时间都不再更新,加上有时候 Md2All 的访问不稳定,本项目在 Md2All 的基础上进行了一些调整和修改后的重新部署(包括把站点迁移至腾讯云等)。
章鱼猫先生
2021/11/17
3.5K0
一个专注于微信公众号 Markdown 排版的平台
第三方网站不能调用微信公众平台里的图片了 显示"此图片来自微信公众号平台未经允许不可引用"
  下午ytkah在自己小博客搜索时看到有几篇文章图片显示不了,再访问一些网站时发现有些图片无法显示出来,显示"此图片来自微信公众号平台未经允许不可引用",如下图所示,这个应该是最近微信团队对有原创保
ytkah
2018/03/05
5.3K0
第三方网站不能调用微信公众平台里的图片了 显示"此图片来自微信公众号平台未经允许不可引用"
微信公众号消息页的作者、点赞等排版和样式进行了调整
  微信对公众号消息页样式进行了改版,主要包括作者、点赞的排版和样式调整。具体为:作者名称换行并突出、文末“点赞”图标改成“❤”并与“阅读”位置互换等。 Q 为什么要进行改版? 此次改版,主要考虑
ytkah
2018/06/14
1K2
微信公众号 Markdown 编辑器
微信公众号文章 Markdown 在线编辑器,使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由于发版本麻烦,和一些功能无法扩展停滞开发了,未来不再开发 Chrome 的工具(暂存在 chrome 分支),通过 web 版本定制更丰富的功能。 Github:https://github.com/jaywcjlove/wxmp 编辑器:https://jaywcjlove.github.io/wxmp
小弟调调
2022/11/08
1.3K0
微信公众号 Markdown 编辑器
推荐!公众号编辑器
由于最近开始学写公众号,为了能写出排版比较好看的文章我发现有个不错的工具可以帮我们
用户9897904
2022/07/14
6610
推荐!公众号编辑器
一款Markdown微信公众号编写工具
在线体验地址 http://xbmchina.cn/wechat-editor/[3]
用户3467126
2019/07/03
9730
markdown一键转换到微信公众号编辑器格式(送MarkEditor激活码)
MarkEditor是我目前找到的,将markdown转换为微信公众号格式, 最为方便的软件, 功能很强大, 官网: https://www.markeditor.com/ MarkEditor是收费软件, 最近升级到2.0, 但1.0的激活码同样可以激活2.0的最低版本
zhaoolee
2018/09/20
3K0
markdown一键转换到微信公众号编辑器格式(送MarkEditor激活码)
如何用Markdown轻松排版知乎专栏文章?
免费、便捷、高效的知乎专栏Markdown排版技巧。希望本文可以让你的写作过程也变得更愉悦。
王树义
2018/08/22
2.5K0
如何用Markdown轻松排版知乎专栏文章?
和微信公众号编辑器战斗的日子
公元 2019 年,微信公众号排版能力孱弱,始终为运营者所诟病,秀米、135 编辑器等工具割据一方。
灵魂画师牧码
2019/09/25
3.6K1
和微信公众号编辑器战斗的日子
Markdown两键排版微信公众号文章
前些日子,我写了一篇《Markdown懒办法排版微信公众号文章》,很受读者欢迎。简书平台上该文的统计数据如下:
王树义
2018/08/22
1.5K0
Markdown两键排版微信公众号文章
群分享:Markdown + CSS 实现微信公众号排版
本文版权归作者所有,转载请注明作者和出处。 未经作者许可,请勿将本文用作商业用途。 封面来源:见图片水印 Markdown 是一种轻量级的标记语言,它的文本可以转换为 HTML ,加上 CSS 的样式控制,能够很方便快捷进行文章排版。Markdown 解决了一文多处投放(微信公众号+博客)以及排版的问题。 CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中,外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中。
申龙斌
2018/03/06
5.8K0
群分享:Markdown + CSS 实现微信公众号排版
Markdown 微信公众号排版 转换工具 在线 免费无广告
Markdown-Wechat 排版利器,支持 "一键排版" 的样式模板选择,支持"css样式自定义",支持80多种代码高亮。
用户7909580
2025/01/12
2870
Markdown 微信公众号排版 转换工具 在线 免费无广告
程序员的专属微信公众号编辑器:定制 Markdown 转 HTML
近来几天,重新玩起了微信公众号,最不能忍受的就是那个编辑器,效率很低。虽然微信现在已经提供了模板功能,但是对于喜欢多平台发文的程序员来讲,维护多个内容成本过高。
CDK8S
2019/08/19
2.3K0
程序员的专属微信公众号编辑器:定制 Markdown 转 HTML
各类工具网站搜索素材微信公众号排版在线设计工具
自从看到同学的微信公众号以后,我就疯狂的迷恋上了微信公众号的排版,我觉得这不仅仅是展示自我的一个途径,更多的是,我可以任意排版,我喜欢排版,就像我喜欢养植物一样。 喜欢排版,然后又帮一位大神排版他的前端技术公众号的文,而且大神还非常的追求完美,所以我就看了很多很多关于如何排版的东西,也试用了很多的各种各样的微信公众号的排版软件。 微信自带的排版,说实话,不错,但是不够炫酷,不够柔美,但是足够简单大方。
贺贺V5
2018/08/21
1.2K0
推荐阅读
相关推荐
我的公众号文章是如何排版的?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验