feat: 搜索布局第一版
This commit is contained in:
WANGFan
parent
ca691461ea
commit
56483166fe
43
src/components.d.ts
vendored
43
src/components.d.ts
vendored
@ -5,26 +5,29 @@
|
|||||||
// Read more: https://github.com/vuejs/core/pull/3399
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
export {}
|
export {}
|
||||||
|
|
||||||
declare module 'vue' {
|
declare module "vue" {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
copy: (typeof import("./components/s-layout-search/index copy.vue"))["default"];
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
"Index copy": (typeof import("./components/s-layout-search/index copy.vue"))["default"];
|
||||||
SBarcodeDraw: typeof import('./components/s-barcode-draw/index.vue')['default']
|
RouterLink: (typeof import("vue-router"))["RouterLink"];
|
||||||
SCodeView: typeof import('./components/s-code-view/index.vue')['default']
|
RouterView: (typeof import("vue-router"))["RouterView"];
|
||||||
SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"]
|
SBarcodeDraw: (typeof import("./components/s-barcode-draw/index.vue"))["default"];
|
||||||
SExternalLinkPage: typeof import('./components/s-external-link-page/index.vue')['default']
|
SCodeView: (typeof import("./components/s-code-view/index.vue"))["default"];
|
||||||
SFoldPage: typeof import('./components/s-fold-page/index.vue')['default']
|
SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"];
|
||||||
SFullPage: typeof import('./components/s-full-page/index.vue')['default']
|
SExternalLinkPage: (typeof import("./components/s-external-link-page/index.vue"))["default"];
|
||||||
SInternalLinkPage: typeof import('./components/s-internal-link-page/index.vue')['default']
|
SFoldPage: (typeof import("./components/s-fold-page/index.vue"))["default"];
|
||||||
SLangProvider: typeof import('./components/s-lang-provider/index.vue')['default']
|
SFullPage: (typeof import("./components/s-full-page/index.vue"))["default"];
|
||||||
SLayoutTools: typeof import('./components/s-layout-tools/index.vue')['default']
|
SInternalLinkPage: (typeof import("./components/s-internal-link-page/index.vue"))["default"];
|
||||||
SMainTransition: typeof import('./components/s-main-transition/index.vue')['default']
|
SLangProvider: (typeof import("./components/s-lang-provider/index.vue"))["default"];
|
||||||
SPinyinPro: typeof import('./components/s-pinyin-pro/index.vue')['default']
|
SLayoutSearch: (typeof import("./components/s-layout-search/index.vue"))["default"];
|
||||||
SQrcodeDraw: typeof import('./components/s-qrcode-draw/index.vue')['default']
|
SLayoutTools: (typeof import("./components/s-layout-tools/index.vue"))["default"];
|
||||||
SRecorderPcm: typeof import('./components/s-recorder-pcm/index.vue')['default']
|
SMainTransition: (typeof import("./components/s-main-transition/index.vue"))["default"];
|
||||||
SSelectIcon: typeof import('./components/s-select-icon/index.vue')['default']
|
SPinyinPro: (typeof import("./components/s-pinyin-pro/index.vue"))["default"];
|
||||||
SSvgAndIcon: typeof import('./components/s-svg-and-icon/index.vue')['default']
|
SQrcodeDraw: (typeof import("./components/s-qrcode-draw/index.vue"))["default"];
|
||||||
SSvgIcon: typeof import('./components/s-svg-icon/index.vue')['default']
|
SRecorderPcm: (typeof import("./components/s-recorder-pcm/index.vue"))["default"];
|
||||||
SVerifyCode: typeof import('./components/s-verify-code/index.vue')['default']
|
SSelectIcon: (typeof import("./components/s-select-icon/index.vue"))["default"];
|
||||||
|
SSvgAndIcon: (typeof import("./components/s-svg-and-icon/index.vue"))["default"];
|
||||||
|
SSvgIcon: (typeof import("./components/s-svg-icon/index.vue"))["default"];
|
||||||
|
SVerifyCode: (typeof import("./components/s-verify-code/index.vue"))["default"];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
86
src/components/s-layout-search/index copy.vue
Normal file
86
src/components/s-layout-search/index copy.vue
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<a-grid :colGap="12" :rowGap="12" :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3, xxl: 4 }" :collapsed="collapsed">
|
||||||
|
<a-grid-item>
|
||||||
|
<div class="row-center-gap">
|
||||||
|
<span class="text-nowrap">姓名</span>
|
||||||
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入姓名" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div class="row-center-gap">
|
||||||
|
<span class="text-nowrap">手机号</span>
|
||||||
|
<a-input v-model="form.phone" placeholder="请输入手机号" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div class="row-center-gap">
|
||||||
|
<span class="text-nowrap">邮箱</span>
|
||||||
|
<a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div class="row-center-gap">
|
||||||
|
<span class="text-nowrap">状态</span>
|
||||||
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入状态" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div class="row-center-gap">
|
||||||
|
<span class="text-nowrap">类型</span>
|
||||||
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入类型" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item>
|
||||||
|
<div class="row-center-gap">
|
||||||
|
<span class="text-nowrap">机构</span>
|
||||||
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入机构" allow-clear />
|
||||||
|
</div>
|
||||||
|
</a-grid-item>
|
||||||
|
<a-grid-item suffix>
|
||||||
|
<a-space>
|
||||||
|
<a-button type="primary">
|
||||||
|
<template #icon>
|
||||||
|
<icon-search />
|
||||||
|
</template>
|
||||||
|
查询
|
||||||
|
</a-button>
|
||||||
|
<a-button>
|
||||||
|
<template #icon>
|
||||||
|
<icon-refresh />
|
||||||
|
</template>
|
||||||
|
重置
|
||||||
|
</a-button>
|
||||||
|
<a-button type="text" @click="collapsed = !collapsed">
|
||||||
|
<template #icon>
|
||||||
|
<icon-down v-if="collapsed" />
|
||||||
|
<icon-up v-else />
|
||||||
|
</template>
|
||||||
|
<span>{{ collapsed ? "展开" : "收起" }}</span>
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-grid-item>
|
||||||
|
</a-grid>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const form = ref<any>({
|
||||||
|
name: "",
|
||||||
|
phone: "",
|
||||||
|
email: "",
|
||||||
|
address: "",
|
||||||
|
status: null
|
||||||
|
});
|
||||||
|
|
||||||
|
const collapsed = ref<boolean>(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.row-center-gap {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
.text-nowrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
39
src/components/s-layout-search/index.vue
Normal file
39
src/components/s-layout-search/index.vue
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<a-grid :colGap="12" :rowGap="12" :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3, xxl: 4 }" :collapsed="collapsed">
|
||||||
|
<slot name="form"></slot>
|
||||||
|
<a-grid-item suffix>
|
||||||
|
<a-space>
|
||||||
|
<a-button type="primary" @click="onSearch">
|
||||||
|
<template #icon>
|
||||||
|
<icon-search />
|
||||||
|
</template>
|
||||||
|
查询
|
||||||
|
</a-button>
|
||||||
|
<a-button @click="onReset">
|
||||||
|
<template #icon>
|
||||||
|
<icon-refresh />
|
||||||
|
</template>
|
||||||
|
重置
|
||||||
|
</a-button>
|
||||||
|
<a-button type="text" @click="collapsed = !collapsed">
|
||||||
|
<template #icon>
|
||||||
|
<icon-down v-if="collapsed" />
|
||||||
|
<icon-up v-else />
|
||||||
|
</template>
|
||||||
|
<span>{{ collapsed ? "展开" : "收起" }}</span>
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-grid-item>
|
||||||
|
</a-grid>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const emit = defineEmits(["search", "reset"]);
|
||||||
|
const collapsed = ref<boolean>(true);
|
||||||
|
|
||||||
|
const onSearch = () => emit("search");
|
||||||
|
|
||||||
|
const onReset = () => emit("reset");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -31,113 +31,41 @@
|
|||||||
</template>
|
</template>
|
||||||
</s-layout-tools>
|
</s-layout-tools>
|
||||||
</a-card>
|
</a-card>
|
||||||
<a-card title="搜索栏布局">
|
<a-card title="搜索栏布局-按钮沉底">
|
||||||
<a-grid :colGap="12" :rowGap="12" :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3, xxl: 4 }" :collapsed="collapsed">
|
<s-layout-search @search="onSearch" @reset="onReset">
|
||||||
<a-grid-item>
|
<template #form>
|
||||||
<div style="display: flex; column-gap: 12px; align-items: center">
|
<a-grid-item>
|
||||||
<span style="white-space: nowrap">姓名</span>
|
<div class="row-center-gap">
|
||||||
<a-input style="width: 100%" v-model="form.name" placeholder="请输入姓名" allow-clear />
|
<span class="text-nowrap">手机号</span>
|
||||||
</div>
|
<a-input v-model="form.phone" placeholder="请输入手机号" allow-clear />
|
||||||
</a-grid-item>
|
</div>
|
||||||
<a-grid-item>
|
</a-grid-item>
|
||||||
<div style="display: flex; column-gap: 12px; align-items: center">
|
<a-grid-item>
|
||||||
<span style="white-space: nowrap">手机号</span>
|
<div class="row-center-gap">
|
||||||
<a-input v-model="form.phone" placeholder="请输入手机号" allow-clear />
|
<span class="text-nowrap">邮箱</span>
|
||||||
</div>
|
<a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
|
||||||
</a-grid-item>
|
</div>
|
||||||
<a-grid-item>
|
</a-grid-item>
|
||||||
<div style="display: flex; column-gap: 12px; align-items: center">
|
<a-grid-item>
|
||||||
<span style="white-space: nowrap">邮箱</span>
|
<div class="row-center-gap">
|
||||||
<a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
|
<span class="text-nowrap">状态</span>
|
||||||
</div>
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入状态" allow-clear />
|
||||||
</a-grid-item>
|
</div>
|
||||||
<a-grid-item>
|
</a-grid-item>
|
||||||
<div style="display: flex; column-gap: 12px; align-items: center">
|
<a-grid-item>
|
||||||
<span style="white-space: nowrap">状态</span>
|
<div class="row-center-gap">
|
||||||
<a-input style="width: 100%" v-model="form.name" placeholder="请输入状态" allow-clear />
|
<span class="text-nowrap">类型</span>
|
||||||
</div>
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入类型" allow-clear />
|
||||||
</a-grid-item>
|
</div>
|
||||||
<a-grid-item>
|
</a-grid-item>
|
||||||
<div style="display: flex; column-gap: 12px; align-items: center">
|
<a-grid-item>
|
||||||
<span style="white-space: nowrap">类型</span>
|
<div class="row-center-gap">
|
||||||
<a-input style="width: 100%" v-model="form.name" placeholder="请输入类型" allow-clear />
|
<span class="text-nowrap">机构</span>
|
||||||
</div>
|
<a-input style="width: 100%" v-model="form.name" placeholder="请输入机构" allow-clear />
|
||||||
</a-grid-item>
|
</div>
|
||||||
<a-grid-item>
|
</a-grid-item>
|
||||||
<div style="display: flex; column-gap: 12px; align-items: center">
|
</template>
|
||||||
<span style="white-space: nowrap">机构</span>
|
</s-layout-search>
|
||||||
<a-input style="width: 100%" v-model="form.name" placeholder="请输入机构" allow-clear />
|
|
||||||
</div>
|
|
||||||
</a-grid-item>
|
|
||||||
<a-grid-item suffix>
|
|
||||||
<a-space>
|
|
||||||
<a-button type="primary">
|
|
||||||
<template #icon>
|
|
||||||
<icon-search />
|
|
||||||
</template>
|
|
||||||
查询
|
|
||||||
</a-button>
|
|
||||||
<a-button>
|
|
||||||
<template #icon>
|
|
||||||
<icon-refresh />
|
|
||||||
</template>
|
|
||||||
重置
|
|
||||||
</a-button>
|
|
||||||
<a-button type="text" @click="collapsed = !collapsed">
|
|
||||||
<template #icon>
|
|
||||||
<icon-down />
|
|
||||||
</template>
|
|
||||||
<span>展开</span>
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</a-grid-item>
|
|
||||||
</a-grid>
|
|
||||||
<!-- <a-row :gutter="12">
|
|
||||||
<a-col flex="auto">
|
|
||||||
<a-grid :cols="3" :colGap="12">
|
|
||||||
<a-grid-item>
|
|
||||||
<div style="display: flex; align-items: center; column-gap: 12px">
|
|
||||||
<span style="white-space: nowrap">姓名</span>
|
|
||||||
<a-input style="width: 100%" v-model="form.name" placeholder="请输入姓名" allow-clear />
|
|
||||||
</div>
|
|
||||||
</a-grid-item>
|
|
||||||
<a-grid-item>
|
|
||||||
<div style="display: flex; align-items: center; column-gap: 12px">
|
|
||||||
<span style="white-space: nowrap">手机号</span>
|
|
||||||
<a-input v-model="form.phone" placeholder="请输入手机号" allow-clear />
|
|
||||||
</div>
|
|
||||||
</a-grid-item>
|
|
||||||
<a-grid-item>
|
|
||||||
<div style="display: flex; align-items: center; column-gap: 12px">
|
|
||||||
<span style="white-space: nowrap">邮箱</span>
|
|
||||||
<a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
|
|
||||||
</div>
|
|
||||||
</a-grid-item>
|
|
||||||
</a-grid>
|
|
||||||
</a-col>
|
|
||||||
<a-col flex="none">
|
|
||||||
<a-space>
|
|
||||||
<a-button type="primary">
|
|
||||||
<template #icon>
|
|
||||||
<icon-search />
|
|
||||||
</template>
|
|
||||||
查询
|
|
||||||
</a-button>
|
|
||||||
<a-button>
|
|
||||||
<template #icon>
|
|
||||||
<icon-refresh />
|
|
||||||
</template>
|
|
||||||
重置
|
|
||||||
</a-button>
|
|
||||||
<a-button type="text">
|
|
||||||
<template #icon>
|
|
||||||
<icon-down />
|
|
||||||
</template>
|
|
||||||
<span>展开</span>
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</a-col>
|
|
||||||
</a-row> -->
|
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
@ -145,13 +73,25 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const form = ref<any>({
|
const form = ref<any>({
|
||||||
name: "",
|
name: "",
|
||||||
phone: "",
|
age: null,
|
||||||
email: "",
|
select: null,
|
||||||
address: "",
|
adderss: "",
|
||||||
status: null
|
hobby: null,
|
||||||
|
date: "",
|
||||||
|
time: "",
|
||||||
|
gender: null,
|
||||||
|
score: null,
|
||||||
|
rate: null,
|
||||||
|
state: null,
|
||||||
|
multiple: null,
|
||||||
|
treeSelect: null
|
||||||
});
|
});
|
||||||
|
const onSearch = () => {
|
||||||
const collapsed = ref<boolean>(false);
|
arcoMessage("success", "搜索");
|
||||||
|
};
|
||||||
|
const onReset = () => {
|
||||||
|
arcoMessage("success", "重置");
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -160,4 +100,12 @@ const collapsed = ref<boolean>(false);
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
.row-center-gap {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
.text-nowrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user