vue3-at

1.1.5 • Public • Published

中文文档;

It is a library like at.js for vue3.

Install

npm install vue3-at --save

Usage

<template>
  <vue3-at :atMap="atMap" @at="onAt" :renderTagItem="renderTagItem">
    <div class="editor" contenteditable></div>
    <template v-slot:listItem="{ item }">
      <div v-if="item.isSubjectTitle">{{ item.title }}</div>
      <div class="list-item" v-else-if="item.tag">
        {{ item.tag }}
      </div>
      <div class="list-item" v-else>
        <img :src="item.avatar" alt="" />{{ item.name }}
      </div>
    </template>
  </vue3-at>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Vue3At } from "../src/";

export default defineComponent({
  name: "App",
  components: {
    Vue3At,
  },
  setup() {
    const atMap = ref({
      "@": {
        keyName: "name",
        list: [
          {
            isSubjectTitle: true,
            title: "最近联系人",
          },
          {
            name: "SHISME",
            userId: "",
            avatar: "https://avatars.githubusercontent.com/u/17661313?s=40&v=4",
          },
          {
            name: "CAYAHUANG",
            userId: "",
            avatar:
              "https://avatars.githubusercontent.com/u/18247969?s=100&v=4",
          },
          {
            isSubjectTitle: true,
            title: "好友",
          },
          {
            name: "OuYang",
            userId: "",
            avatar:
              "https://avatars.githubusercontent.com/u/13029538?s=100&v=4",
          },
          {
            name: "SAGA",
            avatar:
              "https://avatars.githubusercontent.com/u/16740021?s=100&v=4",
            userId: "",
          },
        ],
      },
      "#": {
        keyName: "tag",
        list: [
          {
            tag: "666",
          },
        ],
      },
    });
    return {
      atMap,
      onAt({ at, inputChunk }: { at: string; inputChunk: string }) {
        console.log("onAt:", at, inputChunk);
      },
      renderTagItem(
        row: { name: string; userId: string } | { tag: string }
      ): string {
        if (row.tag) {
          return `<span style="color: deepskyblue">${row.tag}</span>`;
        }
        return `<span style="color:#003569;" data-user-id="${row.userId}">@${row.name}</span>`;
      },
    };
  },
});
</script>

Props

interface IVue3AtProps {
  /**
   * required
   * key is 'at' character which when you input it will show the list,
   * keyName is the property name of the list's item.
   */
  atMap:{ [at: string]: {list: any[];keyName: string;[]} };
  
  /**
   * optional
   * Use it to render custom tag
   * @param item; atMap list's item
   */
  renderTagItem:(item: any) => string;
  
  /**
   * optional
   * If you want tag can be modified,set it to false
   * @default true
   */
  disabledModifyTag: boolean;
  
  /**
   * optional
   * It will control the visible of subject title
   * 
   * @default true;
   */
  showSubjectTitle: boolean;
  
  /**
   * optional
   * Enable space between @ and word
   * 
   * @default false;
   */
  allowSpaces: boolean;
  
  /**
   * optional
   * If you want to filter by your self, use it to control.
   * @param item; atMap list's item
   * @param inputChunk; inputing chunk
   * @param keyName;
   */
  filtersFn:(item:any, inputChunk:string, keyName:string) => boolean;
}

events

at

parameter: {at: string; inputChunk:string}

when at will be input

insert-tag

parameter is the item which will be inserted

click-list-item

parameter is the item which had be clicked in list.

input

no parameter.

Keywords

none

Install

DownloadsWeekly Downloads

39

Version

1.1.5

License

none

Unpacked Size

319 kB

Total Files

10

Last publish

Collaborators

  • shisme