markhtmltext

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

examples

------------ main.js ----------------------------------------

import { createApp } from 'vue'
import App from './App.vue'
import vueMarkHtmlText from "vue3_mark_html_text"


const app = createApp(App)
app.use(vueMarkHtmlText)
app.mount('#app')


------------ components ----------------------------------------

<template>
  <div>
      <span v-markHtmlText:[{htmlText,wrapChar,keyWord,color}]></span>
  </div>
</template>

<script>
  import {
      reactive,
      ref,
      toRefs,
  } from "vue"

  export default {
      setup() {
          const data = reactive({
              wrapChar: "@@", // 文本中包裹关键字的标识字符
              htmlText: "html或text关键字标红通用插件<div>@@a@@bc<span>efagc</span>@@d@@cd</div>", // html文本或纯文本内容(必传)
              keyWord: ["html", "标红", "件"], // [] 数组，指定的关键字
              color: "blue",  // 标记的颜色 #ff4d4f / blue
          });

          const refData = toRefs(data);
          return {
              ...refData
          }
      }
  }
</script>

Customize configuration

See Configuration Reference.