87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
<template>
|
|
<div class="text-form-dialog">
|
|
<el-form :model="form" :inline="true">
|
|
<el-form-item label="字体">
|
|
<el-select
|
|
v-model="form.fontFamily"
|
|
placeholder="请选择"
|
|
class="!w-100px"
|
|
@change="fontStyleChange()"
|
|
>
|
|
<el-option label="宋体" value="SimSun" />
|
|
<el-option label="黑体" value="SimHei" />
|
|
<el-option label="微软雅黑" value="Microsoft Yahei" />
|
|
<el-option label="楷体" value="KaiTi" />
|
|
<el-option label="新宋体" value="NSimSun" />
|
|
<el-option label="仿宋" value="FangSong" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="字号">
|
|
<el-input-number
|
|
@change="fontStyleChange()"
|
|
v-model="form.fontSize"
|
|
:step="1"
|
|
:min="10"
|
|
:max="30"
|
|
placeholder="请输入"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="颜色">
|
|
<el-color-picker v-model="form.fontColor" @change="fontStyleChange()" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
inputBoxStyle: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
fontFamily: 'SimSun',
|
|
fontSize: '14',
|
|
fontColor: '#000000'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => props.inputBoxStyle,
|
|
(val) => {
|
|
form.fontFamily = props.inputBoxStyle.fontFamily
|
|
form.fontSize = props.inputBoxStyle.fontSize
|
|
form.fontColor = props.inputBoxStyle.fontColor
|
|
},
|
|
{ immediate: false }
|
|
)
|
|
|
|
const form = reactive({
|
|
fontFamily: 'SimSun',
|
|
fontSize: '14',
|
|
fontColor: '#000000'
|
|
})
|
|
|
|
const fontStyleChange = () => {
|
|
emit('textFormSuccess', form)
|
|
}
|
|
|
|
const emit = defineEmits(['textFormSuccess'])
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.text-form-dialog {
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 76px;
|
|
left: 30%;
|
|
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
|
padding: 18px 20px 0 20px;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|