wpsjs加载项没法粘贴内容怎么解决？

jiang200503zhen · 发表于 2025-3-16 10:20

根据官方开发文档生成了第一个项目HelloWps，仿照Dialog写了第一个弹窗，结果显示没问题，就是显示界面中的几个输入项都只能输入内容，没有办法通过快捷键粘贴内容，每次一粘贴，内容就到了当前sheet页的A1单元格里了，不知道有没有哪位老师知道怎么解决这种问题？下面是弹窗的代码

<template>
<div class="setup-container">
<div class="form-group">
<label for="docType">类型</label>
<select id="docType" v-Doc="DocConfig.docType">
<option value="AA">AA</option>
<option value="BB">BB</option>
</select>
</div>
<div class="form-group">
<label for="docUrl">文件地址</label>
<input type="text" id="docUrl" v-Doc="DocConfig.docUrl" placeholder="请输入文件地址" />
</div>
<div class="form-group">
<label for="docKey">文件密钥</label>
<div class="password-input">
<input :type="showPassword ? 'text' : 'password'" id="docKey" v-Doc="DocConfig.docKey" placeholder="请输入文件密钥" />
<button class="toggle-password" @click="togglePassword" type="button">
{{ showPassword ? '隐藏' : '显示' }}
</button>
</div>
</div>
<div class="form-group">
<label for="docName">文件名称</label>
<input type="text" id="docName" v-Doc="DocConfig.docName" placeholder="请输入文件名称" />
</div>
<div class="check-result" v-if="checkResult !== null">
<span :class="{ 'success': checkResult, 'error': !checkResult }">
{{ checkResult ? '检查通过' : '检查不通过' }}
</span>
</div>
<div class="button-group">
<button @click="checkConfig" :disabled="isLoading">{{ isLoading ? '检查中...' : '检查' }}</button>
<button @click="saveConfig" :disabled="isLoading">保存</button>
</div>
</div>
</template>
<script>
import setupUtils from './js/setup.js'
export default {
name: 'Setup',
data() {
return {
DocConfig: {
docType: '',
docUrl: '',
docKey: '',
docName: ''
},
showPassword: false,
checkResult: null,
isLoading: false
}
},
mounted() {
// 获取已保存的配置
this.loadConfig()
// 阻止默认的粘贴行为
document.addEventListener('paste', this.handleGlobalPaste, true)
},
beforeUnmount() {
// 移除事件监听
document.removeEventListener('paste', this.handleGlobalPaste, true)
},
methods: {
// 加载配置
loadConfig() {
const config = setupUtils.getDocConfig()
this.DocConfig = { ...config }
},
// 切换密码显示/隐藏
togglePassword() {
this.showPassword = !this.showPassword
},
// 检查配置
async checkConfig() {
this.isLoading = true
this.checkResult = null
try {
const result = await setupUtils.checkDocConfig(this.DocConfig)
this.checkResult = result
} catch (error) {
console.error('检查配置出错:', error)
this.checkResult = false
} finally {
this.isLoading = false
}
},
// 保存配置
saveConfig() {
try {
const result = setupUtils.saveDocConfig(this.DocConfig)
if (result) {
alert('配置保存成功')
} else {
alert('配置保存失败')
}
} catch (error) {
console.error('保存配置出错:', error)
alert('配置保存失败')
}
},
// 处理全局粘贴事件
handleGlobalPaste(event) {
// 检查当前焦点是否在我们的输入框内
const activeElement = document.activeElement
const isInOurForm = activeElement && (
activeElement.id === 'docType' ||
activeElement.id === 'docUrl' ||
activeElement.id === 'docKey' ||
activeElement.id === 'docName'
)
// 如果焦点在我们的表单内，允许粘贴行为
if (isInOurForm) {
// 不做任何阻止，允许默认粘贴行为
} else {
// 如果焦点不在我们的表单内，则阻止事件传播
event.stopPropagation()
}
}
}
}
</script>
<style scoped>
.setup-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input, select {
width: 100%;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
input:focus, select:focus {
outline: none;
border-color: #4a90e2;
box-shadow: 0 0 3px rgba(74, 144, 226, 0.3);
}
.password-input {
display: flex;
position: relative;
}
.password-input input {
flex: 1;
padding-right: 70px;
}
.toggle-password {
position: absolute;
right: 0;
top: 0;
height: 100%;
padding: 0 10px;
background: #f5f5f5;
border: 1px solid #ddd;
border-left: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-size: 12px;
}
.button-group {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
button {
padding: 8px 20px;
background-color: #4a90e2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
button:hover {
background-color: #3a80d2;
}
button:disabled {
background-color: #a0a0a0;
cursor: not-allowed;
}
.check-result {
margin-top: 15px;
padding: 10px;
border-radius: 4px;
text-align: center;
}
.success {
color: #2ecc71;
font-weight: bold;
}
.error {
color: #e74c3c;
font-weight: bold;
}
</style>

复制代码

wodewan · 发表于 2025-3-16 17:06

目前测试下来，不论是模态还是非模态，都没有出现焦点的问题，也许是版本问题吧，不太清楚。。。。。。

jiang200503zhen · 发表于 2025-3-19 09:48

wodewan 发表于 2025-3-16 17:06
目前测试下来，不论是模态还是非模态，都没有出现焦点的问题，也许是版本问题吧，不太清楚。。。。。。

您的wps是什么版本的？

wodewan · 发表于 2025-3-19 11:53

jiang200503zhen 发表于 2025-3-19 09:48
您的wps是什么版本的？

官方最新个人版，20305

xd3210 · 发表于 2025-3-19 15:10

跟着高手学习！！

jiang200503zhen · 发表于 2025-3-19 20:50

wodewan 发表于 2025-3-19 11:53
官方最新个人版，20305

我的是mac版的不行……

用户名		自动登录	找回密码
密码			免费注册

[求助] wpsjs加载项没法粘贴内容怎么解决？

浏览过的版块