39 lines
836 B
Vue
39 lines
836 B
Vue
<template>
|
|
<div class="custom-select-search">
|
|
<n-select
|
|
:options="state.selectOptions"
|
|
v-model:value="state.selectedValue"
|
|
/>
|
|
<n-input
|
|
v-model:value="state.inputValue"
|
|
type="text"
|
|
placeholder="Search"
|
|
/>
|
|
<n-button type="primary">Go</n-button>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { reactive } from 'vue'
|
|
import { NSelect, NInput, NButton } from 'naive-ui'
|
|
|
|
const state = reactive({
|
|
selectedValue: 'all_years', //选中值
|
|
selectOptions: [
|
|
{
|
|
label: 'All Years',
|
|
value: 'all_years',
|
|
},
|
|
], //下拉选项
|
|
inputValue: '', //输入值
|
|
})
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.custom-select-search {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
}
|
|
</style>
|