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
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
declare module "vue" {
|
||||
export interface GlobalComponents {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SBarcodeDraw: typeof import('./components/s-barcode-draw/index.vue')['default']
|
||||
SCodeView: typeof import('./components/s-code-view/index.vue')['default']
|
||||
SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"]
|
||||
SExternalLinkPage: typeof import('./components/s-external-link-page/index.vue')['default']
|
||||
SFoldPage: typeof import('./components/s-fold-page/index.vue')['default']
|
||||
SFullPage: typeof import('./components/s-full-page/index.vue')['default']
|
||||
SInternalLinkPage: typeof import('./components/s-internal-link-page/index.vue')['default']
|
||||
SLangProvider: typeof import('./components/s-lang-provider/index.vue')['default']
|
||||
SLayoutTools: typeof import('./components/s-layout-tools/index.vue')['default']
|
||||
SMainTransition: typeof import('./components/s-main-transition/index.vue')['default']
|
||||
SPinyinPro: typeof import('./components/s-pinyin-pro/index.vue')['default']
|
||||
SQrcodeDraw: typeof import('./components/s-qrcode-draw/index.vue')['default']
|
||||
SRecorderPcm: typeof import('./components/s-recorder-pcm/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']
|
||||
copy: (typeof import("./components/s-layout-search/index copy.vue"))["default"];
|
||||
"Index copy": (typeof import("./components/s-layout-search/index copy.vue"))["default"];
|
||||
RouterLink: (typeof import("vue-router"))["RouterLink"];
|
||||
RouterView: (typeof import("vue-router"))["RouterView"];
|
||||
SBarcodeDraw: (typeof import("./components/s-barcode-draw/index.vue"))["default"];
|
||||
SCodeView: (typeof import("./components/s-code-view/index.vue"))["default"];
|
||||
SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"];
|
||||
SExternalLinkPage: (typeof import("./components/s-external-link-page/index.vue"))["default"];
|
||||
SFoldPage: (typeof import("./components/s-fold-page/index.vue"))["default"];
|
||||
SFullPage: (typeof import("./components/s-full-page/index.vue"))["default"];
|
||||
SInternalLinkPage: (typeof import("./components/s-internal-link-page/index.vue"))["default"];
|
||||
SLangProvider: (typeof import("./components/s-lang-provider/index.vue"))["default"];
|
||||
SLayoutSearch: (typeof import("./components/s-layout-search/index.vue"))["default"];
|
||||
SLayoutTools: (typeof import("./components/s-layout-tools/index.vue"))["default"];
|
||||
SMainTransition: (typeof import("./components/s-main-transition/index.vue"))["default"];
|
||||
SPinyinPro: (typeof import("./components/s-pinyin-pro/index.vue"))["default"];
|
||||
SQrcodeDraw: (typeof import("./components/s-qrcode-draw/index.vue"))["default"];
|
||||
SRecorderPcm: (typeof import("./components/s-recorder-pcm/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>
|
||||
</s-layout-tools>
|
||||
</a-card>
|
||||
<a-card title="搜索栏布局">
|
||||
<a-grid :colGap="12" :rowGap="12" :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3, xxl: 4 }" :collapsed="collapsed">
|
||||
<a-card title="搜索栏布局-按钮沉底">
|
||||
<s-layout-search @search="onSearch" @reset="onReset">
|
||||
<template #form>
|
||||
<a-grid-item>
|
||||
<div style="display: flex; column-gap: 12px; align-items: center">
|
||||
<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; column-gap: 12px; align-items: center">
|
||||
<span style="white-space: nowrap">手机号</span>
|
||||
<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 style="display: flex; column-gap: 12px; align-items: center">
|
||||
<span style="white-space: nowrap">邮箱</span>
|
||||
<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 style="display: flex; column-gap: 12px; align-items: center">
|
||||
<span style="white-space: nowrap">状态</span>
|
||||
<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 style="display: flex; column-gap: 12px; align-items: center">
|
||||
<span style="white-space: nowrap">类型</span>
|
||||
<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 style="display: flex; column-gap: 12px; align-items: center">
|
||||
<span style="white-space: nowrap">机构</span>
|
||||
<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 />
|
||||
</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> -->
|
||||
</s-layout-search>
|
||||
</a-card>
|
||||
</a-space>
|
||||
</template>
|
||||
@ -145,13 +73,25 @@
|
||||
<script setup lang="ts">
|
||||
const form = ref<any>({
|
||||
name: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
address: "",
|
||||
status: null
|
||||
age: null,
|
||||
select: null,
|
||||
adderss: "",
|
||||
hobby: null,
|
||||
date: "",
|
||||
time: "",
|
||||
gender: null,
|
||||
score: null,
|
||||
rate: null,
|
||||
state: null,
|
||||
multiple: null,
|
||||
treeSelect: null
|
||||
});
|
||||
|
||||
const collapsed = ref<boolean>(false);
|
||||
const onSearch = () => {
|
||||
arcoMessage("success", "搜索");
|
||||
};
|
||||
const onReset = () => {
|
||||
arcoMessage("success", "重置");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -160,4 +100,12 @@ const collapsed = ref<boolean>(false);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.row-center-gap {
|
||||
display: flex;
|
||||
column-gap: 12px;
|
||||
align-items: center;
|
||||
.text-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user