"vue-quill-editor": "^ 3.0.6", dependencia de instalación
<plantilla>
<div class = "contPage">
<div class = "contentPage">
<div class = "contenedor">
<div class = "containerTitle" style = "cursor: pointer;" @ click = "volver">
<i class = "el-icon-back"> </i>
{ {$ route.query.row? 'Editar anuncio de página de inicio': 'Agregar anuncio de página de inicio'}}
</div>
<el-form: model = "ruleForm": rules = "rules" ref = "ruleForm" label-width = "100px" class = "demo-ruleForm">
<el-form-item label = "Propiedad de la actividad">
<el-select v-model = "ruleForm.region" placeholder = "选择 物业">
<el-option label = "选择 物业" value = "shanghai"> </el-option>
<el-option label = "Propiedad del jardín Dongyue" value = "beijing"> </el-option>
</el-select>
</el-form-item>
<el-form-item label = "标题">
<el-input v-model = "ruleForm.address"> </el-input>
</el-form-item>
<el-form-item label = "内容">
<quill-editor ref = "myTextEditor" v-model = "content": options = "editorOption"> </quill-editor>
</el-form-item>
<el-form-item label = "Si seleccionar todos los distritos" label-width = "120">
<el-radio-group v-model = "ruleForm.resource">
<el-radio label = "是"> </el-radio>
<el-radio label = "否"> </el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type = "primary" @ click = "submitForm ()"> 提交 </el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
importar 'quill / dist / quill.core.css';
importar 'quill / dist / quill.snow.css';
importar 'quill / dist / quill.bubble.css';
importar {quillEditor} desde 'vue-quill-editor';
importar {tableDataNotice} desde "../../mock/pageManagement"
exportar predeterminado {
nombre: 'editor',
datos: función () {
regreso {
contenido: '',
editorOption: {
marcador de posición: 'Hola mundo'
},
ruleForm: {
dirección: "",
nombre: '',
región: '',
tipo: [],
recurso: '',
},
normas: {
nombre: [
{requerido: verdadero, mensaje: 'Ingrese el nombre del evento', activador: 'difuminar'},
{mínimo: 3, máximo: 5, mensaje: 'de 3 a 5 caracteres de longitud', activador: 'desenfoque'}
],
región: [{obligatorio: verdadero, mensaje: 'Seleccione la región activa', activador: 'cambiar'}],
recurso: [{obligatorio: verdadero, mensaje: 'Seleccione un recurso de actividad', activador: 'cambiar'}],
}
};
},
componentes: {
QuillEditor
},
montado () {
let flag = this. $ route.query.flag;
if (bandera == 'editar') {
this.ruleForm = this. $ route.query.row;
}
},
métodos: {
espalda() {
esto. $ router.go (-1);
},
onEditorChange ({editor, html, text}) {
this.content = html;
},
entregar() {
console.log (este.contenido);
this. $ message.success ('¡Enviado con éxito!');
},
submitForm () {
this.ruleForm.id = tableDataNotice.length +1;
tableDataNotice.push (this.ruleForm);
this. $ router.push ("/ aviso");
}
}
};
</script>
<estilo con alcance>
.contPage {
relleno: 20px;
}
.editor-btn {
margen superior: 20px;
}
.pagina de contenido {
ancho: 100%;
altura: 600px;
desbordamiento-y: desplazamiento;
}
.containerTitle {
tamaño de caja: caja de borde;
margen: 20px;
borde inferior: 1px sólido # f1f1f1;
fondo acolchado: 20px;
}
</style>