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

View File

@ -91,7 +91,7 @@
--el-messagebox-width: 350px; --el-messagebox-width: 350px;
} }
.el-date-editor { .el-date-editor {
--el-date-editor-width: 235px; --el-date-editor-width: 280px;
.el-range-input { .el-range-input {
font-size: var(--el-font-size-small); 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 ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
<el-form-item label="文章标题"> <el-form-item label="文章标题">
<el-input <el-input
class="w-56" class="w-[280px]"
v-model="queryParams.title" v-model="queryParams.title"
clearable clearable
@keyup.enter="resetPage" @keyup.enter="resetPage"
/> />
</el-form-item> </el-form-item>
<el-form-item label="栏目名称"> <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 label="全部" value />
<el-option <el-option
v-for="item in optionsData.articleCate" v-for="item in optionsData.articleCate"
@ -22,7 +22,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="文章状态"> <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 />
<el-option label="显示" :value="1" /> <el-option label="显示" :value="1" />
<el-option label="隐藏" :value="0" /> <el-option label="隐藏" :value="0" />

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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