78 lines
2.3 KiB
Vue
78 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<a-form-item label="内容">
|
|
<a-textarea v-model="block.text" placeholder="输入内容..."></a-textarea>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="颜色">
|
|
<a-input v-model="block.color">
|
|
<template #prefix>
|
|
<color-picker v-model="block.color"></color-picker>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<div class="flex gap-4">
|
|
<a-form-item label="字体">
|
|
<a-select v-model="block.family" :options="TextFamilyOptions" class="w-full overflow-hidden"> </a-select>
|
|
</a-form-item>
|
|
<a-form-item label="大小">
|
|
<a-input-number v-model="block.size" :min="12"> </a-input-number>
|
|
</a-form-item>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<a-form-item label="样式">
|
|
<div class="h-8 flex items-center justify-between">
|
|
<a-tag
|
|
class="cursor-pointer !h-7"
|
|
:color="block.bold ? 'blue' : ''"
|
|
:bordered="block.bold ? true : false"
|
|
@click="block.bold = !block.bold"
|
|
>
|
|
<i class="icon-park-outline-text-bold"></i>
|
|
</a-tag>
|
|
<a-tag
|
|
class="!h-7 cursor-pointer"
|
|
:color="block.italic ? 'blue' : ''"
|
|
:bordered="block.italic ? true : false"
|
|
@click="block.italic = !block.italic"
|
|
>
|
|
<i class="icon-park-outline-text-italic"></i>
|
|
</a-tag>
|
|
<a-tag
|
|
class="!h-7 cursor-pointer"
|
|
:color="block.underline ? 'blue' : ''"
|
|
:bordered="block.underline ? true : false"
|
|
@click="block.underline = !block.underline"
|
|
>
|
|
<i class="icon-park-outline-text-underline"></i>
|
|
</a-tag>
|
|
</div>
|
|
</a-form-item>
|
|
<a-form-item label="方向">
|
|
<a-select v-model="block.align" :options="TextAlignOptions"></a-select>
|
|
</a-form-item>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PropType } from "vue";
|
|
import ColorPicker from "../components/ColorPicker.vue";
|
|
import { TextAlignOptions, TextFamilyOptions } from "../interface";
|
|
import { ContextKey } from '../config';
|
|
|
|
const context = inject(ContextKey);
|
|
console.log('ctx', context);
|
|
|
|
defineProps({
|
|
block: {
|
|
type: Object as PropType<any>,
|
|
required: true,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|