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.
67 lines
1.4 KiB
67 lines
1.4 KiB
1 year ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 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>
|