37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<template>
|
||
<!-- 使用方式：<KoiToolbar v-model:showSearch="showSearch" @refreshTable="handleTableData"></KoiToolbar> -->
|
||
<div class="koi-toolbar">
|
||
<el-row>
|
||
<el-tooltip :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
|
||
<el-button circle icon="search" @click="toggleSearch()" />
|
||
</el-tooltip>
|
||
<el-tooltip content="刷新" placement="top">
|
||
<el-button circle icon="refresh" @click="handleRefresh()" />
|
||
</el-tooltip>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const props = defineProps(["showSearch"]);
|
||
const emits = defineEmits(["update:showSearch", "refreshTable"]);
|
||
|
||
// 点击子组件，调用父组件方法
|
||
const toggleSearch = () => {
|
||
// 同步修改父子组件的值，但是父组件需要使用v-model:showSearch="showSearch"
|
||
// @ts-ignore
|
||
emits("update:showSearch", !props.showSearch);
|
||
};
|
||
|
||
// 点击子组件，调用父组件方法
|
||
const handleRefresh = () => {
|
||
emits("refreshTable");
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.koi-toolbar {
|
||
margin-left: auto;
|
||
}
|
||
</style>
|