MiFaZhan
42 lines
1.4 KiB
Vue
42 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { MessageFilterKey } from '../data'
|
|
import { messageFilterOptions } from '../data'
|
|
|
|
const props = defineProps<{
|
|
placeholder: string
|
|
modelValue: string
|
|
filterKey: MessageFilterKey
|
|
loading?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'refresh'): void
|
|
(e: 'update:modelValue', value: string): void
|
|
(e: 'update:filterKey', value: MessageFilterKey): void
|
|
}>()
|
|
|
|
const keyword = computed({
|
|
get: () => props.modelValue,
|
|
set: value => emit('update:modelValue', value),
|
|
})
|
|
|
|
const activeFilterKey = computed({
|
|
get: () => props.filterKey,
|
|
set: value => emit('update:filterKey', value),
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="card-base flex flex-col gap-20rpx p-20rpx">
|
|
<view class="flex items-center gap-16rpx">
|
|
<wd-search v-model="keyword" hide-cancel placeholder-left variant="filled" :placeholder="props.placeholder" custom-class="min-w-0 flex-1 !p-0" />
|
|
<wd-button type="primary" variant="text" size="small" css-icon="i-carbon-renew" custom-class="!h-56rpx !min-h-56rpx !px-8rpx !text-24rpx" :loading="props.loading" :disabled="props.loading" @click="emit('refresh')">
|
|
刷新
|
|
</wd-button>
|
|
</view>
|
|
<wd-tabs v-model="activeFilterKey" line-theme="text" custom-class="!bg-transparent">
|
|
<wd-tab v-for="option in messageFilterOptions" :key="option.key" :name="option.key" :title="option.label" />
|
|
</wd-tabs>
|
|
</view>
|
|
</template>
|