optimize: 列表配置点击添加按钮时,自动获取输入框的焦点

release-2.0.0.2
王良 2025-03-07 15:59:40 +08:00
parent a145fd993f
commit 60386edc07
5 changed files with 31 additions and 9 deletions

View File

@ -142,6 +142,19 @@ export default {
const dir = await this.$api.info.getLogDir()
this.$api.ipc.openPath(dir)
},
async focusFirst (ref) {
if (ref && ref.length != null) {
setTimeout(() => {
if (ref.length > 0) {
try {
ref[0].$el.querySelector('.ant-input').focus()
} catch (e) {
console.error('获取输入框焦点失败:', e)
}
}
}, 100)
}
},
handleHostname (hostname) {
if (this.isNotHostname(hostname)) {
return ''

View File

@ -50,6 +50,7 @@ export default {
},
addNoProxyUrl () {
this.noProxyUrls.unshift({ key: '' })
this.focusFirst(this.$refs.noProxyUrls)
},
delNoProxyUrl (item, index) {
this.noProxyUrls.splice(index, 1)
@ -108,7 +109,7 @@ export default {
<a-button type="primary" icon="plus" @click="addNoProxyUrl()" />
</a-col>
</a-row>
<a-row v-for="(item, index) of noProxyUrls" :key="index" :gutter="10">
<a-row v-for="(item, index) of noProxyUrls" ref="noProxyUrls" :key="index" :gutter="10">
<a-col :span="22">
<MockInput v-model="item.key" class="mt-2" />
</a-col>

View File

@ -60,6 +60,7 @@ export default {
},
addTarget () {
this.targets.unshift({ key: '', value: 'true' })
this.focusFirst(this.$refs.targets)
},
deleteTarget (item, index) {
this.targets.splice(index, 1)
@ -88,14 +89,17 @@ export default {
})
}
if (this.servers.length === 0) {
this.addServer()
this.addServer(false)
}
},
deleteServer (item, index) {
this.servers.splice(index, 1)
},
addServer () {
addServer (needFocus = true) {
this.servers.unshift({ key: '', value: { type: 'path' } })
if (needFocus) {
this.focusFirst(this.$refs.servers)
}
},
submitServer () {
const map = {}
@ -169,7 +173,7 @@ export default {
<a-button type="primary" icon="plus" @click="addTarget()" />
</a-col>
</a-row>
<a-row v-for="(item, index) of targets" :key="index" :gutter="10">
<a-row v-for="(item, index) of targets" ref="targets" :key="index" :gutter="10">
<a-col :span="18">
<MockInput v-model="item.key" class="mt-2" />
</a-col>
@ -196,7 +200,7 @@ export default {
<a-button type="primary" icon="plus" @click="addServer()" />
</a-col>
</a-row>
<a-row v-for="(item, index) of servers" :key="index" :gutter="10">
<a-row v-for="(item, index) of servers" ref="servers" :key="index" :gutter="10">
<a-col :span="6">
<a-input v-model="item.key" :title="item.key" addon-before="" placeholder="yourdomain.com" spellcheck="false" />
</a-col>

View File

@ -62,6 +62,7 @@ export default {
},
addExcludeIp () {
this.excludeIpList.unshift({ key: '', value: 'true' })
this.focusFirst(this.$refs.excludeIpList)
},
delExcludeIp (item, index) {
this.excludeIpList.splice(index, 1)
@ -166,7 +167,7 @@ export default {
<a-button type="primary" icon="plus" @click="addExcludeIp()" />
</a-col>
</a-row>
<a-row v-for="(item, index) of excludeIpList" :key="index" :gutter="10" class="fine-tuning">
<a-row v-for="(item, index) of excludeIpList" ref="excludeIpList" :key="index" :gutter="10" class="fine-tuning">
<a-col :span="17">
<MockInput v-model="item.key" class="mt-1" />
</a-col>

View File

@ -108,6 +108,7 @@ export default {
},
addDnsMapping () {
this.dnsMappings.unshift({ key: '', value: 'quad9' })
this.focusFirst(this.$refs.dnsMappings)
},
// whiteList
@ -123,6 +124,7 @@ export default {
},
addWhiteList () {
this.whiteList.unshift({ key: '', value: 'true' })
this.focusFirst(this.$refs.whiteList)
},
deleteWhiteList (item, index) {
this.whiteList.splice(index, 1)
@ -144,6 +146,7 @@ export default {
},
addSpeedHostname () {
this.getSpeedTestConfig().hostnameList.unshift('')
this.focusFirst(this.$refs.hostnameList)
},
delSpeedHostname (item, index) {
this.getSpeedTestConfig().hostnameList.splice(index, 1)
@ -316,7 +319,7 @@ export default {
<a-button style="margin-left:8px" type="primary" icon="plus" @click="addWhiteList()" />
</a-col>
</a-row>
<a-row v-for="(item, index) of whiteList" :key="index" :gutter="10" style="margin-top: 5px">
<a-row v-for="(item, index) of whiteList" ref="whiteList" :key="index" :gutter="10" style="margin-top: 5px">
<a-col :span="16">
<MockInput v-model="item.key" />
</a-col>
@ -374,7 +377,7 @@ export default {
<a-button style="margin-left:8px" type="primary" icon="plus" @click="addDnsMapping()" />
</a-col>
</a-row>
<a-row v-for="(item, index) of dnsMappings" :key="index" :gutter="10" style="margin-top: 5px">
<a-row v-for="(item, index) of dnsMappings" ref="dnsMappings" :key="index" :gutter="10" style="margin-top: 5px">
<a-col :span="15">
<MockInput v-model="item.key" />
</a-col>
@ -422,7 +425,7 @@ export default {
<a-button style="margin-left:10px" type="primary" icon="plus" @click="addSpeedHostname()" />
</a-col>
</a-row>
<a-row v-for="(item, index) of getSpeedTestConfig().hostnameList" :key="index" :gutter="10" style="margin-top: 5px">
<a-row v-for="(item, index) of getSpeedTestConfig().hostnameList" ref="hostnameList" :key="index" :gutter="10" style="margin-top: 5px">
<a-col :span="21">
<MockInput v-model="getSpeedTestConfig().hostnameList[index]" />
</a-col>