183 lines
3.4 KiB
Vue
183 lines
3.4 KiB
Vue
<script setup lang="ts">
|
||
import { reactive,ref,onMounted } from 'vue'
|
||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||
import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
|
||
import { copy } from '@/utils/string'
|
||
import figlet from 'figlet';
|
||
const info = reactive({
|
||
title: "ASCII字形生成器",
|
||
})
|
||
figlet.defaults({ fontPath: '//unpkg.com/[email protected]/fonts/' });
|
||
|
||
const content = ref('Tools-Web')
|
||
const contentRes = ref('')
|
||
const fontStyle = ref('Big')
|
||
const options = ref([
|
||
{
|
||
value: 'Alpha',
|
||
label: 'Alpha',
|
||
},
|
||
{
|
||
value: 'Avatar',
|
||
label: 'Avatar',
|
||
},
|
||
{
|
||
value: 'Banner',
|
||
label: 'Banner',
|
||
},
|
||
{
|
||
value: 'Banner3-D',
|
||
label: 'Banner3-D',
|
||
},
|
||
{
|
||
value: 'Basic',
|
||
label: 'Basic',
|
||
},
|
||
{
|
||
value: 'Bear',
|
||
label: 'Bear',
|
||
},
|
||
{
|
||
value: 'Big Money-ne',
|
||
label: 'Big Money-ne',
|
||
},
|
||
{
|
||
value: 'Big',
|
||
label: 'Big',
|
||
},
|
||
{
|
||
value: 'Block',
|
||
label: 'Block',
|
||
},
|
||
{
|
||
value: 'Epic',
|
||
label: 'Epic',
|
||
},
|
||
{
|
||
value: 'Ghost',
|
||
label: 'Ghost',
|
||
},
|
||
{
|
||
value: 'Knob',
|
||
label: 'Knob',
|
||
},
|
||
{
|
||
value: 'Linux',
|
||
label: 'Linux',
|
||
},
|
||
{
|
||
value: 'Mini',
|
||
label: 'Mini',
|
||
},
|
||
{
|
||
value: 'Mirror',
|
||
label: 'Mirror',
|
||
},
|
||
{
|
||
value: 'Peaks',
|
||
label: 'Peaks',
|
||
},
|
||
{
|
||
value: 'Slant',
|
||
label: 'Slant',
|
||
},
|
||
{
|
||
value: 'Small',
|
||
label: 'Small',
|
||
},
|
||
{
|
||
value: 'Stellar',
|
||
label: 'Stellar',
|
||
},
|
||
{
|
||
value: 'Thin',
|
||
label: 'Thin',
|
||
},
|
||
{
|
||
value: 'Wow',
|
||
label: 'Wow',
|
||
},
|
||
])
|
||
|
||
const gen = () => {
|
||
figlet(content.value,
|
||
{
|
||
font: fontStyle.value,
|
||
width: 120,
|
||
horizontalLayout: "default",
|
||
verticalLayout: "default",
|
||
whitespaceBreak: true,
|
||
},
|
||
function (err, data) {
|
||
if (err) {
|
||
console.log(';----', err)
|
||
return;
|
||
}
|
||
contentRes.value = data ?? ''
|
||
})
|
||
}
|
||
|
||
//清空输入框
|
||
const clear = () => {
|
||
content.value = ''
|
||
contentRes.value = ''
|
||
}
|
||
|
||
onMounted(() => {
|
||
gen()
|
||
})
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex flex-col mt-3 flex-1">
|
||
<DetailHeader :title="info.title"></DetailHeader>
|
||
|
||
<div class="p-4 rounded-2xl bg-white ">
|
||
<div class="mb-6">
|
||
<el-input v-model="content" :rows="4" type="textarea" placeholder="请输入内容"></el-input>
|
||
<div class="mt-3 flex items-center">
|
||
<div class="flex items-center mr-3 w-36">
|
||
<div class="w-10">
|
||
<el-text class="">风格</el-text>
|
||
</div>
|
||
<el-select
|
||
v-model="fontStyle"
|
||
size="default"
|
||
class="ml-2"
|
||
@change="gen"
|
||
>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
|
||
<el-button type="primary" @click="gen()">生成</el-button>
|
||
<el-button type="primary" @click="copy(contentRes)">复制结果</el-button>
|
||
<el-button type="primary" @click="clear">清除</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<pre tabindex="0"><code>{{ contentRes }}</code></pre>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- desc -->
|
||
<ToolDetail title="描述">
|
||
<el-text>
|
||
好用的ASCII字形生成器，输入框中输入需要生成的字母；提供多种风格选择
|
||
</el-text>
|
||
</ToolDetail>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style> |