147 lines
2.8 KiB
Vue
147 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
interface Props {
|
|
keyword: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:keyword': [keyword: string]
|
|
search: []
|
|
reset: []
|
|
}>()
|
|
|
|
const keyword = computed({
|
|
get: () => props.keyword,
|
|
set: (value: string) => emit('update:keyword', value),
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="project-toolbar">
|
|
<label class="project-toolbar__field">
|
|
<svg
|
|
class="project-toolbar__icon"
|
|
viewBox="0 0 16 16"
|
|
width="16"
|
|
height="16"
|
|
aria-hidden="true"
|
|
>
|
|
<circle
|
|
cx="6.8"
|
|
cy="6.8"
|
|
r="5.2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.4"
|
|
/>
|
|
<line
|
|
x1="10.8"
|
|
y1="10.8"
|
|
x2="14.6"
|
|
y2="14.6"
|
|
stroke="currentColor"
|
|
stroke-width="1.4"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
<input
|
|
v-model="keyword"
|
|
class="project-toolbar__input"
|
|
type="text"
|
|
placeholder="关键字搜索"
|
|
@keyup.enter="emit('search')"
|
|
>
|
|
</label>
|
|
|
|
<button
|
|
type="button"
|
|
class="project-toolbar__btn"
|
|
@click="emit('reset')"
|
|
>
|
|
重置
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="project-toolbar__btn project-toolbar__btn--primary"
|
|
@click="emit('search')"
|
|
>
|
|
搜索
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.project-toolbar {
|
|
.flex(row, flex-start, center);
|
|
gap: @spacing-base;
|
|
|
|
&__field {
|
|
.flex(row, flex-start, center);
|
|
position: relative;
|
|
flex: 0 1 360px;
|
|
min-width: 0;
|
|
height: 36px;
|
|
border: 1px solid @border-color;
|
|
border-radius: @radius-round;
|
|
background: @project-input-bg;
|
|
transition: border-color 0.2s, background-color 0.2s;
|
|
|
|
&:focus-within {
|
|
border-color: @primary-color;
|
|
background: @white;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
position: absolute;
|
|
left: @spacing-base;
|
|
color: @text-color-disabled;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&__input {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 @spacing-base 0 42px;
|
|
border: none;
|
|
border-radius: @radius-round;
|
|
background: transparent;
|
|
color: @heading-color;
|
|
font-size: @font-size-base;
|
|
outline: none;
|
|
|
|
&::placeholder {
|
|
color: @text-color-secondary;
|
|
}
|
|
}
|
|
|
|
&__btn {
|
|
flex-shrink: 0;
|
|
height: 36px;
|
|
padding: 0 @spacing-lg;
|
|
border-radius: @radius-round;
|
|
background: @project-pill-bg;
|
|
color: @text-color;
|
|
font-size: @font-size-base;
|
|
transition: color 0.2s, background-color 0.2s;
|
|
|
|
&:hover {
|
|
color: @primary-color;
|
|
}
|
|
|
|
&--primary {
|
|
background: @primary-color;
|
|
color: @white;
|
|
|
|
&:hover {
|
|
background: @primary-hover;
|
|
color: @white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|