修改搜索栏input框宽度

This commit is contained in:
Jason 2022-09-29 10:26:49 +08:00
parent 140249aca8
commit a4b6b2d6c8
12 changed files with 59 additions and 37 deletions

View File

@ -6,16 +6,18 @@
:width="width"
trigger="contextmenu"
class="popover-input"
:teleported="false"
:teleported="teleported"
:persistent="false"
popper-class="!p-0"
>
<div class="flex">
<div class="flex p-3" @click.stop="">
<div class="popover-input__input mr-[10px] flex-1">
<el-select
class="flex-1"
size="small"
:size="size"
v-if="type == 'select'"
v-model="inputValue"
:teleported="false"
:teleported="teleported"
>
<el-option
v-for="item in options"
@ -27,14 +29,17 @@
<el-input
v-else
v-model.trim="inputValue"
:maxlength="limit"
:show-word-limit="showLimit"
:type="type"
size="small"
:size="size"
clearable
:placeholder="placeholder"
/>
</div>
<div class="popover-input__btns flex-none">
<el-button link @click="visible = false">取消</el-button>
<el-button type="primary" size="small" @click="handleConfirm">确定</el-button>
<el-button link @click="close">取消</el-button>
<el-button type="primary" :size="size" @click="handleConfirm">确定</el-button>
</div>
</div>
<template #reference>
@ -60,7 +65,7 @@ const props = defineProps({
},
width: {
type: [Number, String],
default: 250
default: '300px'
},
placeholder: String,
disabled: {
@ -70,6 +75,22 @@ const props = defineProps({
options: {
type: Array as PropType<any[]>,
default: () => []
},
size: {
type: String as PropType<'default' | 'small' | 'large'>,
default: 'default'
},
limit: {
type: Number,
default: 200
},
showLimit: {
type: Boolean,
default: false
},
teleported: {
type: Boolean,
default: true
}
})
const emit = defineEmits(['confirm'])
@ -99,7 +120,8 @@ watch(
immediate: true
}
)
useEventListener(document.body, 'click', () => {
useEventListener(document.documentElement, 'click', () => {
if (inPopover.value) return
close()
})

View File

@ -91,7 +91,7 @@
--el-messagebox-width: 350px;
}
.el-date-editor {
--el-date-editor-width: 235px;
--el-date-editor-width: 280px;
.el-range-input {
font-size: var(--el-font-size-small);
}

View File

@ -4,14 +4,14 @@
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
<el-form-item label="文章标题">
<el-input
class="w-56"
class="w-[280px]"
v-model="queryParams.title"
clearable
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item label="栏目名称">
<el-select class="w-56" v-model="queryParams.cid">
<el-select class="w-[280px]" v-model="queryParams.cid">
<el-option label="全部" value />
<el-option
v-for="item in optionsData.articleCate"
@ -22,7 +22,7 @@
</el-select>
</el-form-item>
<el-form-item label="文章状态">
<el-select class="w-56" v-model="queryParams.isShow">
<el-select class="w-[280px]" v-model="queryParams.isShow">
<el-option label="全部" value />
<el-option label="显示" :value="1" />
<el-option label="隐藏" :value="0" />

View File

@ -4,7 +4,7 @@
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
<el-form-item label="用户信息">
<el-input
class="w-56"
class="w-[280px]"
v-model="queryParams.keyword"
placeholder="用户编号/昵称/手机号码"
clearable
@ -18,7 +18,7 @@
/>
</el-form-item>
<el-form-item label="注册来源">
<el-select class="w-56" v-model="queryParams.channel">
<el-select class="w-[280px]" v-model="queryParams.channel">
<el-option
v-for="(item, key) in ClientMap"
:key="key"

View File

@ -4,7 +4,7 @@
<el-form class="mb-[-16px]" :model="formData" inline>
<el-form-item label="表名称">
<el-input
class="w-56"
class="w-[280px]"
v-model="formData.tableName"
clearable
@keyup.enter="resetPage"
@ -12,7 +12,7 @@
</el-form-item>
<el-form-item label="表描述">
<el-input
class="w-56"
class="w-[280px]"
v-model="formData.tableComment"
clearable
@keyup.enter="resetPage"

View File

@ -14,7 +14,7 @@
<el-form class="ls-form" :model="formData" inline>
<el-form-item label="表名称">
<el-input
class="w-56"
class="w-[280px]"
v-model="formData.tableName"
clearable
@keyup.enter="resetPage"
@ -22,7 +22,7 @@
</el-form-item>
<el-form-item label="表描述">
<el-input
class="w-56"
class="w-[280px]"
v-model="formData.tableComment"
clearable
@keyup.enter="resetPage"

View File

@ -4,14 +4,14 @@
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
<el-form-item label="部门名称" prop="name">
<el-input
class="w-56"
class="w-[280px]"
v-model="queryParams.name"
clearable
@keyup.enter="getLists"
/>
</el-form-item>
<el-form-item label="部门状态" prop="isStop">
<el-select class="w-56" v-model="queryParams.isStop">
<el-select class="w-[280px]" v-model="queryParams.isStop">
<el-option label="全部" value />
<el-option label="正常" value="0" />
<el-option label="停用" value="1" />

View File

@ -4,7 +4,7 @@
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
<el-form-item label="岗位编码">
<el-input
class="w-56"
class="w-[280px]"
v-model="queryParams.code"
clearable
@keyup.enter="resetPage"
@ -12,14 +12,14 @@
</el-form-item>
<el-form-item label="岗位名称">
<el-input
class="w-56"
class="w-[280px]"
v-model="queryParams.name"
clearable
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item label="岗位状态">
<el-select class="w-56" v-model="queryParams.isStop">
<el-select class="w-[280px]" v-model="queryParams.isStop">
<el-option label="全部" value />
<el-option label="正常" :value="0" />
<el-option label="停用" :value="1" />

View File

@ -5,7 +5,7 @@
<el-form-item label="管理员账号">
<el-input
v-model="formData.username"
class="w-56"
class="w-[280px]"
clearable
@keyup.enter="resetPage"
/>
@ -13,13 +13,13 @@
<el-form-item label="管理员名称">
<el-input
v-model="formData.nickname"
class="w-56"
class="w-[280px]"
clearable
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item label="管理员角色">
<el-select class="w-56" v-model="formData.role">
<el-select class="w-[280px]" v-model="formData.role">
<el-option label="全部" value="" />
<el-option
v-for="(item, index) in optionsData.role"

View File

@ -4,7 +4,7 @@
<el-page-header class="mb-4" content="数据管理" @back="$router.back()" />
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" inline>
<el-form-item label="字典名称">
<el-select class="w-56" v-model="queryParams.dictType" @change="getLists">
<el-select class="w-[280px]" v-model="queryParams.dictType" @change="getLists">
<el-option
v-for="item in optionsData.dictType"
:label="item.dictName"
@ -15,14 +15,14 @@
</el-form-item>
<el-form-item label="数据名称">
<el-input
class="w-56"
class="w-[280px]"
v-model="queryParams.name"
clearable
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item label="数据状态">
<el-select class="w-56" v-model="queryParams.status">
<el-select class="w-[280px]" v-model="queryParams.status">
<el-option label="全部" value />
<el-option label="正常" :value="1" />
<el-option label="停用" :value="0" />

View File

@ -4,7 +4,7 @@
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" inline>
<el-form-item label="字典名称">
<el-input
class="w-56"
class="w-[280px]"
v-model="queryParams.dictName"
clearable
@keyup.enter="resetPage"
@ -12,14 +12,14 @@
</el-form-item>
<el-form-item label="字典类型">
<el-input
class="w-56"
class="w-[280px]"
v-model="queryParams.dictType"
clearable
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item label="状态">
<el-select class="w-56" v-model="queryParams.dictStatus">
<el-select class="w-[280px]" v-model="queryParams.dictStatus">
<el-option label="全部" value />
<el-option label="正常" :value="1" />
<el-option label="停用" :value="0" />

View File

@ -5,7 +5,7 @@
<el-form class="ls-form" :model="formData" inline>
<el-form-item label="管理员">
<el-input
class="w-56"
class="w-[280px]"
placeholder="请输入"
v-model="formData.username"
clearable
@ -14,7 +14,7 @@
</el-form-item>
<el-form-item label="访问方式">
<el-select class="w-56" v-model="formData.type" placeholder="请选择">
<el-select class="w-[280px]" v-model="formData.type" placeholder="请选择">
<el-option
v-for="(item, index) in visitType"
:key="index"
@ -26,7 +26,7 @@
<el-form-item label="来源IP">
<el-input
class="w-56"
class="w-[280px]"
placeholder="请输入"
v-model="formData.ip"
clearable
@ -43,7 +43,7 @@
<el-form-item label="访问链接">
<el-input
class="w-56"
class="w-[280px]"
placeholder="请输入"
v-model="formData.url"
clearable