@chenzr/text-marker v0.2.1

text-marker 划词标注组件

该组件用于对文本进行快速标注。用鼠标划取文本片段之后，再选择标注为何种类型。可用于 NLU 的意图训练数据标注。

安装

npm install -S @chenzr/text-marker

全局注册

import Vue from "vue";
import TextMarker from "@chenzr/text-marker";
import "@chenzr/text-marker/libs/text-marker.css";

Vue.use(TextMarker);

局部注册

<template>
  <div>
    <text-marker />
  </div>
</template>

<script>
import TextMarker from "@chenzr/text-marker";
import "@chenzr/text-marker/libs/text-marker.css";

export default {
  components: {
    TextMarker,
  },
};
</script>

代码演示

<template>
  <div>
    <text-marker :rawText="rawText" :ranges.sync="ranges" :options="options" />
  </div>
</template>

<script>
import TextMarker from "@chenzr/text-marker";
import "@chenzr/text-marker/libs/text-marker.css";

export default {
  components: {
    TextMarker,
  },
  data() {
    return {
      rawText: "我想订周六北京路附近的套房。",
      ranges: [
        {
          start: 3,
          end: 5,
          data: "@日期",
        },
        {
          start: 5,
          end: 8,
          data: "@地名",
        },
      ],
      options: [
        {
          label: "@日期",
          value: "@日期",
        },
        {
          label: "@地名",
          value: "@地名",
        },
        {
          label: "@房型",
          value: "@房型",
        },
      ],
    };
  },
};
</script>

API

事件