尧图网页设计 
# 如何在项目中使用QuickGesture组件库QuickGesture是一个基于WebComponent的组件库支持在原生HTML、vue、React等前端框架使用。在vue中使用手动引入如果你不想使用包管理器可以直接从 GitHub 仓库下载编译后的文件然后在 HTML 中通过!-- 引入组件库 --scriptsrcpath/to/components.js/script!-- 引入手势 API --scriptsrcpath/to/index.js/script然后在页面中直接使用自定义元素标签qg-left-siderbar/qg-left-siderbarqg-gridcols5rows7gap15pxpadding30px/qg-grid使用npm引入推荐使用 npm 安装npminstallquickgesture/core在 Vue 项目的入口文件如 main.js中引入确保在 app.mount() 之前执行这样自定义元素会在 Vue 渲染前完成注册import{createApp}fromvueimportAppfrom./App.vueimportrouterfrom./routerimportquickgesture/core// 注册所有 qg- 自定义元素constappcreateApp(App)app.use(router)app.mount(#app)然后在任意 .vue 组件的模板中直接使用templateqg-left-siderbar/qg-left-siderbarqg-gridcols5rows7gap15px/qg-gridqg-slider/qg-slider/template注意 由于 QuickGesture 的组件是基于 Web Components 实现的自定义元素你需要在 vite.config.js 中配置 Vue 编译器忽略 qg- 开头的标签import{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({plugins:[vue({template:{compilerOptions:{isCustomElement:(tag)tag.startsWith(qg-)}}})]})在原生HTML中使用对于不使用任何框架的纯 HTML 项目只需在页面头部引入组件脚本和 API 脚本即可!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/titleQuickGesture Demo/title!-- 引入组件库 --scriptsrc./path/to/components.js/script!-- 引入手势 API --scriptsrc./path/to/index.js/script/headbodyqg-left-siderbar/qg-left-siderbarqg-app-cardtitle示例卡片p卡片内容/p/qg-app-carddividgesture-target滑动试试/divscript// 使用手势监听 APIgestureListener(document.getElementById(gesture-target),{quickSwipeUp:()console.log(快速上滑),quickSwipeDown:()console.log(快速下滑),quickSwipeLeft:()console.log(快速左滑),quickSwipeRight:()console.log(快速右滑),slowSwipeUp:()console.log(慢速上滑),slowSwipeDown:()console.log(慢速下滑),slowSwipeLeft:()console.log(慢速左滑),slowSwipeRight:()console.log(慢速右滑),longClick:()console.log(长按),simpleClick:()console.log(点击),interrupt:()console.log(手势中断),});/script/body/html在React中使用在 React 项目中同样通过 npm 安装npminstallquickgesture/core然后在组件中引入并直接使用自定义元素标签JSX 中写为小写连字符形式import{useEffect}fromreactimportquickgesture/core// 注册自定义元素functionApp(){useEffect((){// 在 React 中初始化手势监听consteldocument.getElementById(gesture-target)if(el){gestureListener(el,{quickSwipeUp:()console.log(快速上滑),longClick:()console.log(长按),})}},[])return(divqg-left-siderbar/qg-grid cols3rows3gap10pxdiv格子1/divdiv格子2/divdiv格子3/div/qg-griddiv idgesture-target在这里滑动/div/div)}exportdefaultApp提示 React 中不需要额外配置 isCustomElement因为 React 编译器不会把未知标签当作组件解析。了解更多以上就是本文的全部内容啦。QuickGesture 目前还在持续开发中后续会陆续更新更多手势组件和最佳实践案例欢迎关注跟进~如果你有任何问题、建议或者想一起参与贡献欢迎通过以下方式联系我们GitHubhttps://github.com/liuboxi123/quickgesture-of-javascript.gitCSDN 主页https://blog.csdn.net/2401_86623946?typeblog稀土掘金主页https://juejin.cn/user/4351229521047931/postsnpm 引入npminstallquickgesture/core开发者QQ群1109279023 # 如何在项目中使用QuickGesture组件库
# 如何在项目中使用QuickGesture组件库QuickGesture是一个基于WebComponent的组件库支持在原生HTML、vue、React等前端框架使用。在vue中使用手动引入如果你不想使用包管理器可以直接从 GitHub 仓库下载编译后的文件然后在 HTML 中通过!-- 引入组件库 --scriptsrcpath/to/components.js/script!-- 引入手势 API --scriptsrcpath/to/index.js/script然后在页面中直接使用自定义元素标签qg-left-siderbar/qg-left-siderbarqg-gridcols5rows7gap15pxpadding30px/qg-grid使用npm引入推荐使用 npm 安装npminstallquickgesture/core在 Vue 项目的入口文件如 main.js中引入确保在 app.mount() 之前执行这样自定义元素会在 Vue 渲染前完成注册import{createApp}fromvueimportAppfrom./App.vueimportrouterfrom./routerimportquickgesture/core// 注册所有 qg- 自定义元素constappcreateApp(App)app.use(router)app.mount(#app)然后在任意 .vue 组件的模板中直接使用templateqg-left-siderbar/qg-left-siderbarqg-gridcols5rows7gap15px/qg-gridqg-slider/qg-slider/template注意 由于 QuickGesture 的组件是基于 Web Components 实现的自定义元素你需要在 vite.config.js 中配置 Vue 编译器忽略 qg- 开头的标签import{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({plugins:[vue({template:{compilerOptions:{isCustomElement:(tag)tag.startsWith(qg-)}}})]})在原生HTML中使用对于不使用任何框架的纯 HTML 项目只需在页面头部引入组件脚本和 API 脚本即可!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/titleQuickGesture Demo/title!-- 引入组件库 --scriptsrc./path/to/components.js/script!-- 引入手势 API --scriptsrc./path/to/index.js/script/headbodyqg-left-siderbar/qg-left-siderbarqg-app-cardtitle示例卡片p卡片内容/p/qg-app-carddividgesture-target滑动试试/divscript// 使用手势监听 APIgestureListener(document.getElementById(gesture-target),{quickSwipeUp:()console.log(快速上滑),quickSwipeDown:()console.log(快速下滑),quickSwipeLeft:()console.log(快速左滑),quickSwipeRight:()console.log(快速右滑),slowSwipeUp:()console.log(慢速上滑),slowSwipeDown:()console.log(慢速下滑),slowSwipeLeft:()console.log(慢速左滑),slowSwipeRight:()console.log(慢速右滑),longClick:()console.log(长按),simpleClick:()console.log(点击),interrupt:()console.log(手势中断),});/script/body/html在React中使用在 React 项目中同样通过 npm 安装npminstallquickgesture/core然后在组件中引入并直接使用自定义元素标签JSX 中写为小写连字符形式import{useEffect}fromreactimportquickgesture/core// 注册自定义元素functionApp(){useEffect((){// 在 React 中初始化手势监听consteldocument.getElementById(gesture-target)if(el){gestureListener(el,{quickSwipeUp:()console.log(快速上滑),longClick:()console.log(长按),})}},[])return(divqg-left-siderbar/qg-grid cols3rows3gap10pxdiv格子1/divdiv格子2/divdiv格子3/div/qg-griddiv idgesture-target在这里滑动/div/div)}exportdefaultApp提示 React 中不需要额外配置 isCustomElement因为 React 编译器不会把未知标签当作组件解析。了解更多以上就是本文的全部内容啦。QuickGesture 目前还在持续开发中后续会陆续更新更多手势组件和最佳实践案例欢迎关注跟进~如果你有任何问题、建议或者想一起参与贡献欢迎通过以下方式联系我们GitHubhttps://github.com/liuboxi123/quickgesture-of-javascript.gitCSDN 主页https://blog.csdn.net/2401_86623946?typeblog稀土掘金主页https://juejin.cn/user/4351229521047931/postsnpm 引入npminstallquickgesture/core开发者QQ群1109279023