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.
141 lines
2.6 KiB
141 lines
2.6 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-02-28 08:43:59
|
|
@ 备注: 文本设置
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { reactive, computed, toRefs, ref, watch, inject,onBeforeMount } from 'vue'
|
|
const props = defineProps({
|
|
layouytStyle:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
place:{
|
|
type:String,
|
|
default:""
|
|
}
|
|
});
|
|
|
|
const ziTiList = [
|
|
{
|
|
value:"宋体",
|
|
label:"宋体",
|
|
},
|
|
{
|
|
value:"微软雅黑",
|
|
label:"微软雅黑",
|
|
},
|
|
{
|
|
value:"黑体",
|
|
label:"黑体",
|
|
},
|
|
{
|
|
value:"Arial",
|
|
label:"Arial",
|
|
},
|
|
{
|
|
value:"Bitter",
|
|
label:"Bitter",
|
|
},
|
|
{
|
|
value:"Verdana",
|
|
label:"Verdana",
|
|
},
|
|
{
|
|
value:"Geneva",
|
|
label:"Geneva",
|
|
},
|
|
{
|
|
value:"sans-serif",
|
|
label:"sans-serif",
|
|
}
|
|
];
|
|
const fontWeightList = [
|
|
{
|
|
value:"100",
|
|
label:"100",
|
|
},
|
|
{
|
|
value:"400",
|
|
label:"400",
|
|
},
|
|
{
|
|
value:"700",
|
|
label:"700",
|
|
},
|
|
{
|
|
value:"900",
|
|
label:"900",
|
|
},
|
|
{
|
|
value:"bolder",
|
|
label:"bolder",
|
|
}
|
|
];
|
|
</script>
|
|
<template>
|
|
<table style="width:100%">
|
|
<tr>
|
|
<td width="70">字号</td>
|
|
<td>
|
|
<el-input v-model="props.layouytStyle.fontSize">
|
|
<template #append>PX</template>
|
|
</el-input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>字体</td>
|
|
<td>
|
|
<el-select
|
|
v-model="props.layouytStyle.fontFamily"
|
|
class="m-2"
|
|
placeholder="选择字体"
|
|
>
|
|
<el-option
|
|
v-for="item in ziTiList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="70">行高</td>
|
|
<td>
|
|
<el-input v-model="props.layouytStyle.fontHight">
|
|
<template #append>PX</template>
|
|
</el-input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td >字重</td>
|
|
<td>
|
|
<el-select
|
|
v-model="props.layouytStyle.fontWeight"
|
|
class="m-2"
|
|
placeholder="选择字重"
|
|
>
|
|
<el-option
|
|
v-for="item in fontWeightList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="50">颜色</td>
|
|
<td>
|
|
<el-color-picker v-model="props.layouytStyle.fontColor" size="default" />
|
|
{{ props.layouytStyle.backgroundColor }}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
|
|
</style>
|