diff --git a/packages/varlet-cli/site/mobile/main.ts b/packages/varlet-cli/site/mobile/main.ts
index 352258b7c2f..d47fd4d538e 100644
--- a/packages/varlet-cli/site/mobile/main.ts
+++ b/packages/varlet-cli/site/mobile/main.ts
@@ -1,18 +1,15 @@
import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
+import '@varlet/touch-emulator'
import App from './App.vue'
import AppType from './components/AppType.vue'
import routes from './routes'
const router = createRouter({
- history: createWebHashHistory(),
- routes
+ history: createWebHashHistory(),
+ routes,
})
const app = createApp(App as any)
-app
- .component(AppType.name, AppType)
- .use(router)
- .mount('#app')
-
+app.component(AppType.name, AppType).use(router).mount('#app')
diff --git a/packages/varlet-cli/site/mobile/mobile.html b/packages/varlet-cli/site/mobile/mobile.html
index 8903ab6a422..31630716ba8 100644
--- a/packages/varlet-cli/site/mobile/mobile.html
+++ b/packages/varlet-cli/site/mobile/mobile.html
@@ -6,7 +6,6 @@
-
diff --git a/packages/varlet-touch-emulator/CHANGELOG.md b/packages/varlet-touch-emulator/CHANGELOG.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-touch-emulator/index.ts b/packages/varlet-touch-emulator/index.ts
new file mode 100644
index 00000000000..c2755c937d1
--- /dev/null
+++ b/packages/varlet-touch-emulator/index.ts
@@ -0,0 +1,78 @@
+const supportTouch = 'ontouchstart' in window
+let initiated = false
+let eventTarget: EventTarget | null
+
+const isMousedown = (eventType: string): boolean => eventType === 'mousedown'
+
+const isMousemove = (eventType: string): boolean => eventType === 'mousemove'
+
+const isMouseup = (eventType: string): boolean => eventType === 'mouseup'
+
+const isUpdateTarget = (eventType: string): boolean =>
+ isMousedown(eventType) || !eventTarget || (eventTarget && !eventTarget.dispatchEvent)
+
+function updateTouchList(mouseEvent: MouseEvent): Touch[] {
+ const { clientX, clientY, screenX, screenY, pageX, pageY } = mouseEvent
+ const touchList: Touch[] = []
+ const touchInitDict: TouchInit = {
+ identifier: 1,
+ target: eventTarget as EventTarget,
+ clientX,
+ clientY,
+ screenX,
+ screenY,
+ pageX,
+ pageY,
+ }
+ touchList.push(new Touch(touchInitDict))
+ return touchList
+}
+
+function getActiveTouches(mouseEvent: MouseEvent): Touch[] {
+ const { type } = mouseEvent
+ const touchList: Touch[] = []
+ if (isMouseup(type)) return touchList
+ return updateTouchList(mouseEvent)
+}
+
+function triggerTouch(touchType: string, mouseEvent: MouseEvent) {
+ const { altKey, ctrlKey, metaKey, shiftKey } = mouseEvent
+
+ const eventInitDict: TouchEventInit = {
+ touches: getActiveTouches(mouseEvent),
+ targetTouches: getActiveTouches(mouseEvent),
+ changedTouches: updateTouchList(mouseEvent),
+ altKey,
+ ctrlKey,
+ metaKey,
+ shiftKey,
+ bubbles: true,
+ cancelable: true,
+ }
+
+ const touchEvent = new TouchEvent(touchType, eventInitDict)
+
+ ;(eventTarget as EventTarget).dispatchEvent(touchEvent)
+}
+
+function onMouse(mouseEvent: MouseEvent, touchType: string) {
+ const { type, target } = mouseEvent
+
+ initiated = isMousedown(type) ? true : isMouseup(type) ? false : initiated
+
+ if (isMousemove(type) && !initiated) return
+
+ if (isUpdateTarget(type)) eventTarget = target
+
+ triggerTouch(touchType, mouseEvent)
+
+ if (isMouseup(type)) eventTarget = null
+}
+
+function createTouchEmulator() {
+ window.addEventListener('mousedown', (event) => onMouse(event, 'touchstart'), true)
+ window.addEventListener('mousemove', (event) => onMouse(event, 'touchmove'), true)
+ window.addEventListener('mouseup', (event) => onMouse(event, 'touchend'), true)
+}
+
+if (!supportTouch) createTouchEmulator()
diff --git a/packages/varlet-touch-emulator/package.json b/packages/varlet-touch-emulator/package.json
new file mode 100644
index 00000000000..e77faeae4cc
--- /dev/null
+++ b/packages/varlet-touch-emulator/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "@varlet/touch-emulator",
+ "version": "0.5.1",
+ "description": "touch-emulator",
+ "keywords": [
+ "emulator",
+ "varlet"
+ ],
+ "author": "BeADre ",
+ "homepage": "https://github.com/haoziqaq/varlet#readme",
+ "license": "MIT",
+ "main": "index.ts",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/haoziqaq/varlet.git"
+ },
+ "bugs": {
+ "url": "https://github.com/haoziqaq/varlet/issues"
+ },
+ "gitHead": "5dabda353dc88340816ddc6f6ac8081c0680908f"
+}