<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>