文本，最简单的文本样式设计风格样式，让Element-UI盒子居中的写法-阿里云开发者社区

文本，最简单的文本样式设计风格样式，让Element-UI盒子居中的写法

2024-07-03 30

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 文本，最简单的文本样式设计风格样式，让Element-UI盒子居中的写法

这里使用了Element-ui作为了框架，Vue3可以参考这篇文章：

Vue3如何使用element-ui_element ui vue 3-CSDN博客，这里就要找到Element-ui的组件库

这里参考Element-ui的组件库进行设计，设计路径：

快速开始 | Element Plus

现在解决：如何让一个盒子居中，解决盒子塌陷的方法

可以参考这一篇文章：

如何让一个盒子居中，解决盒子塌陷的方法-CSDN博客

如何实现他居中

这里如果想要居中，定义width和margin: 0 0;

下一步，把页面弄成居中，该怎样弄成居中，参考文档，如何弄成左右分布的布局

利用flex进行左右左右设计

怎样做宽度：

element-UI，这里设置宽度就行，在原先的路径上设置宽度就行

下面怎样让宽度变长一些

这里设置成富文本，只设置editor的样式就行

样式整合：

<template>
    <div class="editorContainer">
        <el-form ref="ruleFormRef" style="max-width: 800px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="标题" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <div class="editorContent">
                <div class="leftcontentContainer">内容</div>
                <div class="editor">
                    <quill-editor theme="snow">
                    </quill-editor>
                </div>
            </div>
        </el-form>
    </div>
</template>
 
<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
export default {
    data() {
        return {
            ruleForm: [{
                name: ''
            }]
        }
    },
    components: {
        QuillEditor
    }
 
}
</script>
 
<style>
.demo-ruleForm {
    margin: 0 auto;
}
 
.div span {
    text-align: left;
}
 
.editorContent {
    display: flex;
}
 
.editorContainer {
    margin-top: 15px;
}
 
.leftcontentContainer {
    margin-right: 9px;
}
 
.editor {
    width: 756px;
}
 
.demo-ruleForm {
    width: 1000px;
}
</style>

这里富文本的下边样式如何编写

这里你也可以参考这篇文章

这样就可以设置min-height了

设置成这样

这里添加选项

之后补全button标签，添加button标签

这里添加button，开始吧！！！

利用elemnt-UI添加button

设计成这样

样式写法：

<template>
    <div class="editorContainer">
        <el-form ref="ruleFormRef" style="max-width: 900px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="标题" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <div class="editorContent">
                <div class="leftcontentContainer">内容</div>
                <div class="editor">
                    <quill-editor theme="snow">
                    </quill-editor>
                </div>
            </div>
            <div class="mb-4">
                <el-button round>保存</el-button>
                <el-button type="primary" round>提交</el-button>
            </div>
        </el-form>
    </div>
</template>
 
<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
export default {
    data() {
        return {
            ruleForm: [{
                name: ''
            }]
        }
    },
    components: {
        QuillEditor
    }
 
}
</script>
 
<style lang="less">
.demo-ruleForm {
    margin: 0 auto;
}
 
.div span {
    text-align: left;
}
 
.editorContent {
    display: flex;
}
 
.editorContainer {
    margin-top: 15px;
}
 
.leftcontentContainer {
    margin-right: 9px;
}
 
.editor {
    width: 857px;
    min-height: 570px;
    margin-bottom: 60px;
}
 
.demo-ruleForm {
    width: 1000px;
}
 
.mb-4 button {
    margin: 0 0 0 760px;
}
</style>

文本，最简单的文本样式设计风格样式，让Element-UI盒子居中的写法