feature: 新增 MockInput 组件,目的是为了 `内容搜索功能` 能够搜索到输入框中的内容。

pull/456/head
王良 2025-02-26 11:43:19 +08:00
parent 67c7e39000
commit 7519956b28
6 changed files with 93 additions and 10 deletions

View File

@ -0,0 +1,68 @@
<!--
组件模拟输入框当前为简易版本只添加了value属性
作用全文检索SearchBar组件无法检索 `<a-input/>` 的内容所以使用 `<span contenteditable="true"></span>` 代替
-->
<script>
export default {
name: 'MockInput',
props: {
value: {
type: String,
default: '',
required: false,
},
},
methods: {
onKeydown (event) {
//
if (event.key === 'Enter' || event.keyCode === 13) {
event.preventDefault()
}
},
onChange () {
if (this.$refs.input.textContent !== this.value) {
this.$emit('input', this.$refs.input.textContent)
}
},
},
}
</script>
<template>
<span ref="input" class="fake-input" contenteditable="true" :title="value" @focus="onChange" @blur="onChange" @keydown="onKeydown" v-html="value" />
</template>
<style lang="scss">
.fake-input {
/* 鼠标样式 */
cursor: text;
/* 内容不换行 */
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
/* 复制 ant-input 样式 */
box-sizing: border-box;
margin: 0;
padding: 4px 11px;
font-variant: tabular-nums;
list-style: none;
font-feature-settings: 'tnum';
position: relative;
display: inline-block;
width: 100%;
height: 32px;
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
line-height: 1.5;
background-color: #fff;
background-image: none;
border: 1px solid #d9d9d9;
border-radius: 4px;
transition: all 0.3s;
}
.fine-tuning .fake-input {
margin-top: -2px;
}
</style>

View File

@ -1,8 +1,10 @@
<script>
import Plugin from '../../mixins/plugin'
import MockInput from '@/view/components/mock-input.vue'
export default {
name: 'Git',
components: { MockInput },
mixins: [Plugin],
data () {
return {
@ -107,8 +109,8 @@ export default {
</a-col>
</a-row>
<a-row v-for="(item, index) of noProxyUrls" :key="index" :gutter="10">
<a-col :span="22">
<a-input v-model="item.key" />
<a-col :span="22" class="fine-tuning">
<MockInput v-model="item.key" />
</a-col>
<a-col :span="2">
<a-button type="danger" icon="minus" @click="delNoProxyUrl(item, index)" />

View File

@ -1,8 +1,10 @@
<script>
import Plugin from '../../mixins/plugin'
import MockInput from '@/view/components/mock-input.vue'
export default {
name: 'Overwall',
components: { MockInput },
mixins: [Plugin],
data () {
return {
@ -168,8 +170,8 @@ export default {
</a-col>
</a-row>
<a-row v-for="(item, index) of targets" :key="index" :gutter="10">
<a-col :span="18">
<a-input v-model="item.key" />
<a-col :span="18" class="fine-tuning">
<MockInput v-model="item.key" />
</a-col>
<a-col :span="4">
<a-select v-model="item.value" style="width:100%">

View File

@ -1,8 +1,10 @@
<script>
import Plugin from '../mixins/plugin'
import MockInput from '@/view/components/mock-input.vue'
export default {
name: 'Proxy',
components: { MockInput },
mixins: [Plugin],
data () {
return {
@ -164,9 +166,9 @@ 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">
<a-row v-for="(item, index) of excludeIpList" :key="index" :gutter="10" class="fine-tuning">
<a-col :span="17">
<a-input v-model="item.key" />
<MockInput v-model="item.key" />
</a-col>
<a-col :span="5">
<a-select v-model="item.value" style="width:100%">
@ -216,3 +218,10 @@ export default {
</a-drawer>
</ds-container>
</template>
<style lang="scss">
/*样式微调*/
.fine-tuning .ant-btn-danger {
margin-top: 3px;
}
</style>

View File

@ -2,11 +2,13 @@
import _ from 'lodash'
import VueJsonEditor from 'vue-json-editor-fix-cn'
import Plugin from '../mixins/plugin'
import MockInput from '@/view/components/mock-input.vue'
export default {
name: 'Server',
components: {
VueJsonEditor,
MockInput,
},
mixins: [Plugin],
data () {
@ -316,7 +318,7 @@ export default {
</a-row>
<a-row v-for="(item, index) of whiteList" :key="index" :gutter="10" style="margin-top: 5px">
<a-col :span="16">
<a-input v-model="item.key" />
<MockInput v-model="item.key" />
</a-col>
<a-col :span="5">
<a-select v-model="item.value" style="width:100%">
@ -374,7 +376,7 @@ export default {
</a-row>
<a-row v-for="(item, index) of dnsMappings" :key="index" :gutter="10" style="margin-top: 5px">
<a-col :span="15">
<a-input v-model="item.key" />
<MockInput v-model="item.key" />
</a-col>
<a-col :span="6">
<a-select v-model="item.value" :disabled="item.value === false" style="width: 100%">
@ -422,7 +424,7 @@ export default {
</a-row>
<a-row v-for="(item, index) of getSpeedTestConfig().hostnameList" :key="index" :gutter="10" style="margin-top: 5px">
<a-col :span="21">
<a-input v-model="getSpeedTestConfig().hostnameList[index]" />
<MockInput v-model="getSpeedTestConfig().hostnameList[index]" />
</a-col>
<a-col :span="2">
<a-button style="margin-left:10px" type="danger" icon="minus" @click="delSpeedHostname(item, index)" />

View File

@ -99,7 +99,7 @@ $dark-input: #777; //输入框:背景色
}
/* 输入框、下拉框 */
.ant-input,
.ant-input, .fake-input,
.ant-input-number-input,
.ant-input-number,
.ant-select-selection,