<template>
<div v-if="show" class="selection-popup" :style="{ top: position
.y + 'px', left: position
.x + 'px' }">
<button @click="handlePrint">🖨 打印</button>
</div>
</template>
<script setup>
import { ref } from '
vue'
const show = ref(false)
const position = ref({ x: 0, y: 0 })
const setShow = (value, x, y) => {
show
.value = value
position
.value = { x, y }
}
const handlePrint =
() => {
console
.log('
选中的
文本：', selection
.text)
}
defineExpose({ setShow })
</script>
<style scoped>
.selection-popup {
position: fixed;
background: #fff;
border: 1px solid #ccc;
padding: 8px;
z-index: 9999;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0
.2);
border-radius: 4px;
}
</style>
根组件<template>
<div id="app">
<router-view />
</div>
</template>
<script setup>
import { useTextSelection } from '@
vueuse/core'
import { onMounted, ref, watch } from '
vue'
const selection = useTextSelection
()
const cursorPos = ref({ x: 0, y: 0 })
const updateCursorPos = (e) => {
cursorPos
.value = {
x: e
.clientX,
y: e
.clientY
}
}
onMounted(
() => {
window.addEventListener('mousemove', updateCursorPos)
})
watch(
() => selection
.text,
(text) => {
if (text) {
setTimeout(
() => {
const rect =
window.getSelection().getRangeAt(0)
.getBoundingClientRect
()
const popup = document
.querySelector('
.selection-popup')
const popupHeight = popup ? popup
.offsetHeight : 0
const x = rect
.left +
window.scrollX
const y = rect
.bottom +
window.scrollY + 10 - popupHeight
app
.config
.globalProperties
.$selectionPopup
.setShow(true, x, y)
}, 50)
} else {
app
.config
.globalProperties
.$selectionPopup
.setShow(false, 0, 0)
}
}
)
</script>
这是main
.ts import { createApp, h, render } from '
vue'
import App from '
./App
.vue'
import {createPinia} from 'pinia'
import router from '
./router/index';
const store = createPinia
()
import ElementPlus from 'element-plus';
import 'element-plus/dist/index
.css';
import SelectionPopup from '
./components/SelectionPopup
.vue'
import * as ElIconModules from '@element-plus/icons-
vue'
var app=createApp(App);
// 类型断言确保模块可被索引访问(全局引入icon)
const icons = ElIconModules as Record<string, any>
Object
.keys(icons)
.forEach((key) => {
const component = icons[key]
if (component && component
.name) {
app
.component(component
.name, component)
}
})
// 创建弹框组件实例
const popupVNode = h(SelectionPopup)
const popupContainer = document
.createElement('div')
document
.body
.appendChild(popupContainer)
render(popupVNode, popupContainer)
app
.config
.globalProperties
.$selectionPopup = popupVNode
.component
.proxy
app
.use(store)
.use(ElementPlus)
.use(router)
.mount('#app')
<template>
<div>这是一段用于测试划词交互功能的
文本内容</div>
</template>
<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted} from '
vue'
import { useRouter,useRoute} from '
vue-router'//引入路由
export default {
name: '',
setup
() {
let router = useRouter
(),route = useRoute
();
const data= reactive({
})
onBeforeMount(
() => {
})
onMounted(
() => {
})
const refData = toRefs(data);
return {
...refData,
}
}
};
</script>
<style scoped>
</style>在页面怎么使用呢
扫一扫
2358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
