【增加】AI image 增加图片详情,抽屉

This commit is contained in:
cherishsince
2024-05-26 20:59:42 +08:00
parent 131e071b2d
commit 9c8d10b70c
2 changed files with 68 additions and 3 deletions

View File

@ -11,19 +11,42 @@
<div>
<el-button class="btn" text :icon="Download" />
<el-button class="btn" text :icon="Delete" />
<el-button class="btn" text :icon="More" />
<el-button class="btn" text :icon="More" @click="handlerTaskDetail" />
</div>
</div>
<div class="image-wrapper">
<img class="image" src="https://img.bigpt8.com/uploads/thumbnail/20240509/b7802797e5f709f35a451a1591d4d495.png" />
</div>
</el-card>
</el-card>
<!-- 图片 detail 抽屉 -->
<ImageDetailDrawer
:show="showTaskDetail"
@handler-drawer-close="handlerDrawerClose"
/>
</template>
<script setup lang="ts">
import ImageDetailDrawer from './ImageDetailDrawer.vue'
import {Delete, Download, More} from "@element-plus/icons-vue";
import {bool} from "vue-types";
const showTaskDetail = ref<bool>(false) // 是否显示 task 详情
/**
* 图片人物 - detail
*/
const handlerTaskDetail = async () => {
showTaskDetail.value = !showTaskDetail.value
}
/**
* 抽屉 - 关闭
*/
const handlerDrawerClose = async () => {
showTaskDetail.value = false
}
</script>
<style scoped lang="scss">