@moment-design/message-editor

短信编辑器

使用组件

安装依赖

npm install @moment-design/message-editor --save

使用组件

<template>
  <MessageEditor ref="refMessageEditor" @change="change">
    <!-- 左侧短链插槽 -->
    <template #link>
      <m-space>
        <div
          @click="
            handleInsertImage(
              'https://tservice.71360.com/download/scrm/emoji/0.png'
            )
          "
        >
          插入图片
        </div>
        <div @click="handleInsertCanvas('小程序链接')">小程序链接</div>
        <div @click="handleInsertCanvas('AI智能助手')">AI智能助手</div>
      </m-space>
    </template>
    <!-- 右侧标签插槽 -->
    <template #tag>
      <m-space>
        <div @click="handleInsertCanvas('Tag1')">#Tag1#</div>
        <div @click="handleInsertCanvas('Tag2')">#Tag2#</div>
        <div @click="handleInsertCanvas('Tag3')">#Tag3#</div>
      </m-space>
    </template>
  </MessageEditor>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MessageEditor from '../index.vue';

const refMessageEditor = ref();

const handleInsertImage = (name: string) => {
  refMessageEditor.value.insertImage(name, { 'data-custom': 'custom' }, 4);
};

const handleInsertCanvas = (name: string) => {
  refMessageEditor.value.insertCanvas(name, { 'data-custom': 'custom' });
};

const change = (data: any) => {
  console.log(data);
};
</script>

API

名称	描述	参数
max	最大字符数	-
html	默认值	-

Expose

事件名	描述	参数
insertImage	插入图片	url: 图片地址, data: 属性值, length: 代表字符长度（默认 url 长度）
insertCanvas	插入 canvas	name: 显示名称, data: 属性值