feature: 新增 MockInput 组件,目的是为了 `内容搜索功能` 能够搜索到输入框中的内容。
parent
67c7e39000
commit
7519956b28
|
@ -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>
|
|
@ -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)" />
|
||||
|
|
|
@ -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%">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)" />
|
||||
|
|
|
@ -99,7 +99,7 @@ $dark-input: #777; //输入框:背景色
|
|||
}
|
||||
|
||||
/* 输入框、下拉框 */
|
||||
.ant-input,
|
||||
.ant-input, .fake-input,
|
||||
.ant-input-number-input,
|
||||
.ant-input-number,
|
||||
.ant-select-selection,
|
||||
|
|
Loading…
Reference in New Issue