Skip to content

H
huamu
Commit feac0aa8 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

search modal

parent a04b4226
Show whitespace changes
Inline Side-by-side
Showing with 365 additions and 3 deletions
src/components/MyComponent/main.styl
View file @ feac0aa8
...@@ -53,6 +53,7 @@ $blue = #3D7FE9 ...@@ -53,6 +53,7 @@ $blue = #3D7FE9
$light-blue = #ECEFFA $light-blue = #ECEFFA
$gray = rgba(0,0,0,.6) $gray = rgba(0,0,0,.6)
$light-gray = rgba(0,0,0,.06)
$bg = rgba(249,250,250,.75) $bg = rgba(249,250,250,.75)
......
src/hooks/useDebounce.ts 0 → 100644
View file @ feac0aa8
export default function useDebounce<F extends Function>(
func: F,
interval: number = 300,
): F {
let timer: number
return <any>function (this: any, ...args: any[]) {
if (timer) {
window.clearTimeout(timer)
}
const context = this
timer = window.setTimeout(function () {
func.apply(context, args)
}, interval)
}
}
src/main.ts
View file @ feac0aa8
...@@ -9,10 +9,25 @@ import { ...@@ -9,10 +9,25 @@ import {
NIcon, NIcon,
NCollapse, NCollapse,
NCollapseItem, NCollapseItem,
NTabs,
NTabPane,
NEmpty,
NButton,
} from 'naive-ui' } from 'naive-ui'
const naive = create({ const naive = create({
components: [NSpace, NInput, NDropdown, NIcon, NCollapse, NCollapseItem], components: [
NSpace,
NInput,
NDropdown,
NIcon,
NCollapse,
NCollapseItem,
NTabs,
NTabPane,
NEmpty,
NButton,
],
}) })
createApp(App).use(MyComponent).use(naive).mount('#app') createApp(App).use(MyComponent).use(naive).mount('#app')
src/view/components/nav-bar.vue
View file @ feac0aa8
...@@ -8,9 +8,12 @@ ...@@ -8,9 +8,12 @@
</div> </div>
<div class="right"> <div class="right">
<n-input <n-input
v-model:value="searchKey"
class="search-input" class="search-input"
placeholder="请输入党员姓名或党组织名称" placeholder="请输入党员姓名或党组织名称"
:loading="isLoading"
clearable clearable
:on-clear="removeResult"
> >
<template #prefix> <template #prefix>
<img class="icon" src="@images/search2.png" /> <img class="icon" src="@images/search2.png" />
...@@ -45,9 +48,16 @@ ...@@ -45,9 +48,16 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <SearchModal :data="resultData" /> -->
<SearchModal :visible="showResult" :data="resultData" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from 'vue'
import useDebounce from '@/hooks/useDebounce'
import SearchModal from './search-modal.vue'
const options = [ const options = [
{ {
label: '选项1', label: '选项1',
...@@ -62,6 +72,50 @@ const options = [ ...@@ -62,6 +72,50 @@ const options = [
key: '3', key: '3',
}, },
] ]
const searchKey = ref<string | null>(null)
const isLoading = ref(false)
const showResult = ref(false)
const resultData = ref<any>({})
const removeResult = () => {
isLoading.value = false
showResult.value = false
resultData.value = {}
}
const handleSearch = useDebounce(function () {
if (!searchKey.value) return
isLoading.value = true
setTimeout(() => {
resultData.value = {
organization: [
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
],
member: [
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
],
}
isLoading.value = false
showResult.value = true
}, 1000)
})
watch(
() => searchKey.value,
(val) => {
if (!val) {
setTimeout(() => removeResult(), 600)
return
}
handleSearch()
},
)
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
...@@ -101,8 +155,9 @@ const options = [ ...@@ -101,8 +155,9 @@ const options = [
font-weight 500 font-weight 500
.right .right
$flex-align() $flex-align()
max-width 60% width 50%
min-width 50% // max-width 60%
// min-width 50%
justify-content flex-end justify-content flex-end
.search-input .search-input
max-width 2.4rem max-width 2.4rem
...@@ -133,4 +188,7 @@ const options = [ ...@@ -133,4 +188,7 @@ const options = [
height .26rem height .26rem
line-height @height line-height @height
font-family $font-ping font-family $font-ping
.n-input--focus
.n-input__border
border .01rem solid $red
</style> </style>
src/view/components/search-modal.vue 0 → 100644
View file @ feac0aa8
<template>
<m-animate enter="fadeIn" leave="fadeOut" :duration="100">
<div v-if="visible" class="search-modal">
<n-tabs
v-model:value="curTab"
:on-close="() => (curTab = 'all')"
size="small"
justify-content="space-evenly"
>
<n-tab-pane name="all" tab="全部">
<div class="tab1">
<div>
<p class="title">党组织</p>
<div
v-if="organization && organization.length > 0"
class="wrapper"
>
<div
v-for="(item, i) in organization.slice(0, 5)"
:key="i"
class="item"
>
<p>{{ item.name }}</p>
<span>{{ item.address }}</span>
<n-icon class="icon" size=".14rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
</n-icon>
</div>
<n-button
v-if="organization.length > 5"
class="more"
color="#f2f2f2"
text-color="rgba(0,0,0,0.5)"
block
size="small"
@click="toTab('organization')"
>
查看更多
</n-button>
</div>
<n-empty v-else description="没有数据" size="small" />
</div>
<div>
<p class="title">党员</p>
<div v-if="member && member.length > 0" class="wrapper">
<div
v-for="(item, i) in member.slice(0, 5)"
:key="i"
class="item"
>
<p>{{ item.name }}</p>
<span>{{ item.address }}</span>
<n-icon class="icon" size=".14rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
</n-icon>
</div>
<n-button
v-if="member.length > 5"
class="more"
color="#f2f2f2"
text-color="rgba(0,0,0,0.5)"
block
size="small"
@click="toTab('member')"
>
查看更多
</n-button>
</div>
<n-empty v-else description="没有数据" size="small" />
</div>
</div>
</n-tab-pane>
<n-tab-pane name="organization" tab="党组织">
<div v-if="organization && organization.length > 0" class="wrapper">
<div v-for="(item, i) in organization" :key="i" class="item">
<p>{{ item.name }}</p>
<span>{{ item.address }}</span>
<n-icon class="icon" size=".14rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
</n-icon>
</div>
</div>
<n-empty v-else description="没有数据" size="small" />
</n-tab-pane>
<n-tab-pane name="member" tab="党员">
<div v-if="member && member.length > 0" class="wrapper">
<div v-for="(item, i) in member" :key="i" class="item">
<p>{{ item.name }}</p>
<span>{{ item.address }}</span>
<n-icon class="icon" size=".14rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
</n-icon>
</div>
</div>
<n-empty v-else description="没有数据" size="small" />
</n-tab-pane>
</n-tabs>
</div>
</m-animate>
</template>
<script lang="ts" setup>
import { computed, PropType, ref } from 'vue'
const props = defineProps({
data: {
type: Object as PropType<{ organization: []; member: [] }>,
required: true,
},
visible: {
type: Boolean as PropType<boolean>,
default: false,
},
})
const organization = computed(() => props.data.organization)
const member = computed(() => props.data.member)
const curTab = ref('all')
const toTab = (name: string) => {
curTab.value = name
}
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.search-modal
z-index 999
border .01rem solid $light-gray
border-radius .03rem
background #fbfcfe
width 2.4rem
position fixed
top .38rem
right 2.41rem
box-shadow .02rem .02rem .04rem rgba(0,0,0,0.3)
overflow hidden
.tab1
.title
font-family $font-ping-medium
border-bottom .01rem solid $light-gray
padding-bottom .03rem
.wrapper
.more
margin .03rem 0 .1rem
&:hover
background $light-red
color $red
.item
border-radius .03rem
position relative
background transparent
cursor pointer
box-sizing border-box
padding .05rem .08rem
p
font-family $font-ping-medium
$text-overflow()
span
color $gray
$text-overflow()
.icon
display none
position absolute
top 0
bottom 0
right 0
margin auto .1rem
&:hover
background $light-red
&>.icon
display inline-block
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
.search-modal
.n-tabs
.n-tabs-wrapper
background #fff
padding .03rem 0
border-bottom .01rem solid $light-gray
.n-tabs-tab
color #a7afb7
font-size .1rem
.n-tab-pane
max-height 3rem
overflow-y auto
padding .05rem .08rem
box-sizing border-box
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment