修改输入框字段限制
This commit is contained in:
@@ -6,10 +6,10 @@
|
||||
</el-row>
|
||||
<el-row class="ba-array-item" v-for="(item, idx) in state.value" :gutter="10" :key="idx">
|
||||
<el-col :span="10">
|
||||
<el-input v-model="item.key"></el-input>
|
||||
<el-input maxlength="32" show-word-limit v-model="item.key"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="item.value"></el-input>
|
||||
<el-input maxlength="32" show-word-limit v-model="item.value"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button @click="onDelArrayItem(idx)" size="small" icon="el-icon-Delete" circle />
|
||||
@@ -17,7 +17,8 @@
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="10" :offset="10">
|
||||
<el-button v-blur class="ba-add-array-item" @click="onAddArrayItem" icon="el-icon-Plus">{{ t('Add') }}</el-button>
|
||||
<el-button v-blur class="ba-add-array-item" @click="onAddArrayItem" icon="el-icon-Plus">{{ t('Add')
|
||||
}}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@@ -76,9 +77,11 @@ watch(
|
||||
padding: 5px 0;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.ba-array-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ba-add-array-item {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@@ -1,31 +1,17 @@
|
||||
<template>
|
||||
<el-popover
|
||||
:placement='placement'
|
||||
trigger='focus'
|
||||
:hide-after='0'
|
||||
:width='state.selectorWidth'
|
||||
:visible='state.popoverVisible'
|
||||
>
|
||||
<div
|
||||
@mouseover.stop='state.iconSelectorMouseover = true'
|
||||
@mouseout.stop='state.iconSelectorMouseover = false'
|
||||
class='icon-selector'
|
||||
>
|
||||
<el-popover :placement='placement' trigger='focus' :hide-after='0' :width='state.selectorWidth'
|
||||
:visible='state.popoverVisible'>
|
||||
<div @mouseover.stop='state.iconSelectorMouseover = true' @mouseout.stop='state.iconSelectorMouseover = false'
|
||||
class='icon-selector'>
|
||||
<transition name='el-zoom-in-center'>
|
||||
<div class='icon-selector-box'>
|
||||
<div class='selector-header'>
|
||||
<div class='selector-title'>{{ title ? title : '请选择图标' }}</div>
|
||||
<div class='selector-tab'>
|
||||
<span
|
||||
:title="'Element Puls ' + 'utils.Icon'"
|
||||
@click="onChangeTab('ele')"
|
||||
:class="state.iconType == 'ele' ? 'active' : ''"
|
||||
>ele</span>
|
||||
<span
|
||||
:title="'Font Awesome ' + 'utils.Icon'"
|
||||
@click="onChangeTab('awe')"
|
||||
:class="state.iconType == 'awe' ? 'active' : ''"
|
||||
>awe</span>
|
||||
<span :title="'Element Puls ' + 'utils.Icon'" @click="onChangeTab('ele')"
|
||||
:class="state.iconType == 'ele' ? 'active' : ''">ele</span>
|
||||
<span :title="'Font Awesome ' + 'utils.Icon'" @click="onChangeTab('awe')"
|
||||
:class="state.iconType == 'awe' ? 'active' : ''">awe</span>
|
||||
<!-- <span :title="'utils.Ali iconcont Icon'" @click="onChangeTab('ali')"-->
|
||||
<!-- :class="state.iconType == 'ali' ? 'active' : ''"-->
|
||||
<!-- >ali</span>-->
|
||||
@@ -40,13 +26,8 @@
|
||||
<div class='selector-body'>
|
||||
<el-scrollbar ref='selectorScrollbarRef'>
|
||||
<div v-if='renderFontIconNames.length > 0'>
|
||||
<div
|
||||
class='icon-selector-item'
|
||||
:title='item'
|
||||
@click='onIcon(item)'
|
||||
v-for='(item, key) in renderFontIconNames'
|
||||
:key='key'
|
||||
>
|
||||
<div class='icon-selector-item' :title='item' @click='onIcon(item)'
|
||||
v-for='(item, key) in renderFontIconNames' :key='key'>
|
||||
<Icon :name='item' />
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,22 +37,13 @@
|
||||
</transition>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model='state.inputValue'
|
||||
:size='size'
|
||||
:disabled='disabled'
|
||||
placeholder='搜索图标'
|
||||
ref='selectorInput'
|
||||
@focus='onInputFocus'
|
||||
@blur='onInputBlur'
|
||||
:class="'size-' + size"
|
||||
>
|
||||
<el-input maxlength="32" show-word-limit v-model='state.inputValue' :size='size' :disabled='disabled'
|
||||
placeholder='搜索图标' ref='selectorInput' @focus='onInputFocus' @blur='onInputBlur'
|
||||
:class="'size-' + size">
|
||||
<template #prepend>
|
||||
<div class='icon-prepend'>
|
||||
<Icon
|
||||
:key="'icon' + state.iconKey"
|
||||
:name='state.prependIcon ? state.prependIcon : state.defaultModelValue'
|
||||
/>
|
||||
<Icon :key="'icon' + state.iconKey"
|
||||
:name='state.prependIcon ? state.prependIcon : state.defaultModelValue' />
|
||||
<div v-if='showIconName' class='name'>
|
||||
{{ state.prependIcon ? state.prependIcon : state.defaultModelValue }}
|
||||
</div>
|
||||
@@ -87,7 +59,7 @@
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { reactive, ref, onMounted, nextTick, watch, computed } from 'vue'
|
||||
import { getElementPlusIconfontNames,getAwesomeIconfontNames } from '@/utils/iconfont'
|
||||
import { getElementPlusIconfontNames, getAwesomeIconfontNames } from '@/utils/iconfont'
|
||||
import { useEventListener } from '@vueuse/core'
|
||||
import type { Placement } from 'element-plus'
|
||||
|
||||
@@ -169,7 +141,7 @@ const onChangeTab = (name: IconType) => {
|
||||
getAwesomeIconfontNames().then((res) => {
|
||||
state.fontIconNames = res.map((name) => `fa ${name}`)
|
||||
})
|
||||
}
|
||||
}
|
||||
// else if (name == 'ali') {
|
||||
// getIconfontNames().then((res) => {
|
||||
// state.fontIconNames = res.map((name) => `iconfont ${name}`)
|
||||
|
||||
Reference in New Issue
Block a user