85 lines
2.1 KiB
Vue
85 lines
2.1 KiB
Vue
<template>
|
||
<d-input
|
||
:key="$route.path + $route.query?.val" id="golbalSearch" class="g-header-search"
|
||
v-model.trim="searchStr" placeholder="输入搜索内容..." @keyup.enter="search" @clear="handleClear" clearable >
|
||
<template #prepend>
|
||
<d-select v-model="searchType" :options="options"></d-select>
|
||
</template>
|
||
<template #append>
|
||
<d-icon @click="search" name="search" style="font-size: inherit;" />
|
||
</template>
|
||
</d-input>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, watch, onUnmounted, reactive } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import microApp from '@micro-zoe/micro-app';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const searchStr = ref(route?.query?.val || '');
|
||
const searchType = ref('License');
|
||
const options = reactive(['License']);
|
||
|
||
const placeholder = ref('「开搜」：一搜即达，开发者的AI搜索');
|
||
|
||
const search = () => {
|
||
if (!searchStr.value) {
|
||
document.querySelector('#golbalSearch').blur();
|
||
return;
|
||
}
|
||
router.push({ name: 'Search', query: { val: searchStr.value || '', type: route?.query?.type || 'License' }});
|
||
};
|
||
const handleClear = () => {
|
||
router.push({ name: 'home' });
|
||
};
|
||
|
||
watch(() => route.query?.val, (newVal) => {
|
||
microApp.setData('micoro-app-homeweb-app', { type: 'search', data: newVal || '' });
|
||
});
|
||
|
||
const handleDataChange = ({ name, type, data }) => {
|
||
if (name === 'micoro-app-homeweb-app') {
|
||
if (type === 'keyword-change') {
|
||
searchStr.value = data;
|
||
}
|
||
if (type === 'route-change') {
|
||
//
|
||
}
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
|
||
});
|
||
onUnmounted(() => {
|
||
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import 'devui-theme/styles-var/devui-var.scss';
|
||
|
||
.g-header-search {
|
||
border: 1px solid #5E7CE0;
|
||
background: #FFF;
|
||
//box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.05) inset;
|
||
&-icon {
|
||
opacity: .5;
|
||
transition: opacity .5s ease;
|
||
}
|
||
.devui-input--focus {
|
||
.g-header-search-icon {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
::v-deep .devui-input-slot__prepend{
|
||
width: 140px;
|
||
}
|
||
::v-deep .devui-input-slot__append{
|
||
width: 40px;
|
||
}
|
||
}
|
||
</style>
|