<template>
<div class='top-header'>
<div class='head-bar'></div>
<div class='head-title'>
<img
v-if="!isDisplay"
class="back-icon"
src="@/assets/xxx"
alt=""
@click="backClickTo"
/>
<span>{{ title }}</span>
<img
v-if="isSearch"
class="search-icon"
src="@/assets/xxx"
alt=""
@click="searchClick"
/>
<div class="address_search">
<van-icon
name="location-o"
v-if="isPosition"
class="position"
@click="searchClick"
/>
<span v-if="isPosition" @click="handleAddress()">{{address}}</span>
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
name: 'HeaderTop',
props: ['title', 'isSearch', 'isPosition', 'address', 'isDisplay'],
emits: ['goback', 'toSearch', 'handleAddress'],
setup(props, context) {
const current = reactive({
title: props.title,
isSearch: props.isSearch,
isPosition: props.isPosition,
address: props.address
)
const backClickTo = () = {
context.emit('goback')
}
const searchClick = () => {
context.emit('toSearch')
}
const handleAddress = () => {
context.emit('handleAddress')
}
const updateAddress = (newAddress) => {
current.address = newAddress
}
return {
...toRefs(current),
backClickTo,
searchClick,
handleAddress,
updateAddress
}
},
}
</script>
