vue页面展示保留原有格式
vue页面展示保留原有格式这里从后端获取页面内容,如果后端返回的有格式适用,否则需要用到富文本:https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/rich-editor.html方法就是:<div class="tastrule_center" v-html="integralRule">&
·
vue页面展示保留原有格式
这里从后端获取页面内容,如果后端返回的有格式适用,否则需要用到富文本:
https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/rich-editor.html
方法就是:
<div class="tastrule_center" v-html="integralRule"></div>
原本是
<div>{{integralRule}}</div>
现在写到v-html里面保留原来格式,并且再加一个样式class=“tastrule_center”,样式写在style中。而文本域本身都可以保留格式传给后端。
html:
<template>
<div slot="setting">
<el-button type="primary" @click="tastruleEdit">编辑</el-button>
</div>
<div class="tastrule_title">积分规则</div>
<div class="tastrule_center" v-html="integralRule"></div>
</template>
数据模型:
data() {
return {
id: ""
integralRule: "", //积分规则
ruleDialogVisible: false,
ruleForm: {
textarea: "", //弹窗
},
rules: {
textarea: [{ required: true, message: "请输入", trigger: "blur" }],
},
};
},
created:
created() {
this.ruleContinuous();
},
methods:
//获取积分规则详情
ruleContinuous() {
get("/sys/integral/sel").then((res) => {
if (res.code === 200) {
this.id = res.data.id;
this.integralRule = res.data.integralRule;
}
});
},
//点击编辑,赋初始值
tastruleEdit() {
this.ruleForm.textarea = this.integralRule;
this.ruleDialogVisible = true;
},
//编辑规则
submitForm(ruleForm) {
this.$refs[ruleForm].validate((valid) => {
if (valid) {
let parmas = {
id: this.id,
integralRule: this.ruleForm.textarea,
};
put("/sys/integral/update", parmas).then((res) => {
if (res.code === 200) {
this.$message.success("添加成功!");
this.addSubCancle();
this.ruleContinuous();
} else {
this.$message.error(res.message);
}
});
}
});
},
//清空编辑弹窗
addSubCancle() {
this.ruleDialogVisible = false;
this.ruleForm.textarea = "";
},
//点击蒙层清空弹窗
handleClose(done) {
this.ruleForm.textarea = "";
done();
},
样式:
<style lang="less" scoped>
@import "./Tastrule";
.tastrule_title {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
padding: 10px;
}
.tastrule_center {
color: #333333;
line-height: 30px;
white-space: pre-wrap;
}
</style>
更多推荐
已为社区贡献13条内容
所有评论(0)