中文文档;
It is a library like at.js for vue3.
npm install vue3-at --save
<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> 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; }parameter: {at: string; inputChunk:string}
when at will be input
parameter is the item which will be inserted
parameter is the item which had be clicked in list.
no parameter.
slot scoped:item,curIndex,index