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.
157 lines
2.9 KiB
157 lines
2.9 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",
|
|
}
|
|
];
|
|
const textColor = ref([
|
|
'#ff4500',
|
|
'#ff8c00',
|
|
'#ffd700',
|
|
'#90ee90',
|
|
'#00ced1',
|
|
'#1e90ff',
|
|
'#c71585',
|
|
'rgba(255, 69, 0, 0.68)',
|
|
'rgb(255, 120, 0)',
|
|
'hsv(51, 100, 98)',
|
|
'hsva(120, 40, 94, 0.5)',
|
|
'hsl(181, 100%, 37%)',
|
|
'hsla(209, 100%, 56%, 0.73)',
|
|
'#c7158577',
|
|
])
|
|
</script>
|
|
<template>
|
|
<table style="width:94%; margin-left:3%">
|
|
<tr>
|
|
<td width="70">字号</td>
|
|
<td>
|
|
<el-input v-model="props.layouytStyle.fontSize">
|
|
<template #suffix>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 #suffix>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" :predefine="textColor" size="default" show-alpha />
|
|
{{ props.layouytStyle.fontColor }}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
|
|
</style>
|
|
|