uni-easyinput H5右键显示工具栏

### 实现 uni-easyinput 在 H5 中右键点击显示工具栏 在 H5 环境下使用 `uni-easyinput` 组件并实现右键点击显示工具栏的功能，可以通过监听鼠标事件来完成。具体来说，在组件上绑定 `contextmenu` 事件处理函数，并在此函数中控制工具栏的显示逻辑。 #### HTML 结构 首先定义输入框以及工具栏容器： ```html <template> <view class="container"> <!-- 输入框 --> <uni-easyinput @contextmenu.stop.prevent="showToolbar" v-model="inputValue"></uni-easyinput> <!-- 工具栏 --> <div id="toolbar" :style="{ display: toolbarVisible ? 'block' : 'none', position: 'absolute', top: `${mouseY}px`, left: `${mouseX}px` }"> <button @click="copyText">复制</button> <button @click="cutText">剪切</button> <button @click="pasteText">粘贴</button> </div> </view> </template> ``` #### JavaScript 部分 接着编写 Vue.js 方法来管理状态和行为： ```javascript <script> export default { data() { return { inputValue: '', toolbarVisible: false, mouseX: 0, mouseY: 0 }; }, methods: { showToolbar(event) { event.preventDefault(); // 阻止默认上下文菜单弹出 this.mouseX = event.clientX; this.mouseY = event.clientY; this.toolbarVisible = true; document.addEventListener('click', hideToolbar); function hideToolbar() { this.toolbarVisible = false; document.removeEventListener('click', hideToolbar); } }, copyText() { navigator.clipboard.writeText(this.inputValue).then(() => { console.log('已复制'); }).catch(err => { console.error('无法复制:', err); }); }, cutText() { if (this.inputValue !== '') { navigator.clipboard.writeText(this.inputValue).then(() => { this.inputValue = ''; console.log('已剪切'); }).catch(err => { console.error('无法剪切:', err); }); } }, pasteText() { navigator.clipboard.readText().then(text => { this.inputValue += text; console.log('已粘贴'); }).catch(err => { console.error('无法粘贴:', err); }); } } }; </script> ``` 此代码片段展示了如何创建一个带有自定义右键菜单的 `uni-easyinput` 输入框[^1]。当用户右击输入框时会触发 `@contextmenu` 事件，阻止浏览器默认的行为并通过设置样式属性使隐藏的工具栏可见；同时记录鼠标的坐标以便于定位工具栏的位置。此外还实现了基本的文字操作按钮如复制、剪切和粘贴等功能。