You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.4 KiB
66 lines
1.4 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-07-14 08:27:12
|
|
@ 备注:
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { FormData,FileAttributeAll } from '@/api/DesignForm/types'
|
|
const emits = defineEmits<{
|
|
(e: 'click', value: FormData): void
|
|
}>()
|
|
// const state = reactive({
|
|
// visible: false,
|
|
// list: []
|
|
// })
|
|
const state = reactive<FileAttributeAll>({
|
|
visible: false,
|
|
list: []
|
|
})
|
|
const open = () => {
|
|
state.visible = true
|
|
init()
|
|
}
|
|
const init = () => {
|
|
const template = import.meta.globEager('./template/*.ts')
|
|
// console.log(template)
|
|
state.list = []
|
|
Object.keys(template).forEach((key: string) => {
|
|
const file: any = template[key]
|
|
state.list.push({
|
|
imgPath: file.imgPath,
|
|
title: file.title,
|
|
formData: file.formData
|
|
})
|
|
})
|
|
}
|
|
const selectClick = (item: any) => {
|
|
emits('click', item.formData)
|
|
state.visible = false
|
|
}
|
|
defineExpose({
|
|
open
|
|
})
|
|
</script>
|
|
<template>
|
|
<div
|
|
v-if="state.visible"
|
|
class="use-template"
|
|
:class="{ active: state.visible }"
|
|
>
|
|
<span class="close icon-close" @click="state.visible = false"></span>
|
|
<div v-if="state.list.length === 0" class="no-date">暂无可用模板</div>
|
|
<div v-else class="list">
|
|
<div
|
|
v-for="(item, index) in state.list"
|
|
:key="index"
|
|
class="item"
|
|
@click="selectClick(item)"
|
|
>
|
|
<img :src="item.imgPath" alt="" />{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
|
|
</style>
|
|
|