66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<template>
|
|
<Dialog v-model="dialogFormVisible" title="文字设置" width="400" class="text-form-dialog">
|
|
<el-form :model="form">
|
|
<el-form-item label="字体">
|
|
<el-select v-model="form.fontType" placeholder="请选择">
|
|
<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
|
|
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" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="dialogFormVisible = false"> 确认 </el-button>
|
|
</div>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
|
|
const dialogFormVisible = ref(false)
|
|
const formLabelWidth = '140px'
|
|
|
|
const form = reactive({
|
|
fontType: 'SimSun',
|
|
fontSize: '14',
|
|
fontColor: '#000000'
|
|
})
|
|
|
|
const open = (item) => {
|
|
dialogFormVisible.value = true
|
|
}
|
|
|
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.text-form-dialog {
|
|
.el-dialog__header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
border-top: none !important;
|
|
}
|
|
}
|
|
</style>
|