使用插槽功能，把组件放到某个字段上（Element + Vue）

1、codemirror是插件要自行安装，后导入再使用

<template slot-scope="scope" slot="htmltext">
  <!-- 富文本编辑-->
  <codemirror ref="myCm" v-model="form.htmltext" :value="scope.htmltext" :options="cmOptions" class="code"></codemirror>
</template>

/* 代码编辑插件 */
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/darcula.css'
Vue.use(codemirror)

/* 富文本编辑插件 */
import AvueUeditor from 'avue-plugin-ueditor'
Vue.use(AvueUeditor);

/* 代码编辑插件可扩展 */
/* 开始 */

import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/merge/merge.js'
import 'codemirror/addon/merge/merge.css'
import DiffMatchPatch from 'diff-match-patch'
require("codemirror/mode/python/python.js")
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')

{
  label: "广告代码",
  prop: "htmltext",
  formslot: true,
  span: 24,
  rules: [{
    required: true,
    message: "请输入广告代码",
    trigger: "blur"
  }]
},

2、函数验证是否是HTML格式的代码，自行调用

//检查html格式
checkHtml(htmltext) {
  if (
    htmltext.indexOf("<html") > -1 &&
    htmltext.indexOf("</html>") > -1 &&
    htmltext.indexOf("<body>") > -1 &&
    htmltext.indexOf("</body>") > -1 &&
    (htmltext.indexOf("${") > -1 && htmltext.indexOf("}") > -1)
  ) {
    return true;
  }
  return false;
},

看戏走心

发布了40 篇原创文章 · 获赞 8 · 访问量 7298

私信关注

使用插槽功能，把组件放到某个字段上（Element + Vue）

猜你喜欢