vue-textarea-suggester

外挂形式存在的suggester，可以与原生textarea或任何组件搭配使用。

演示

github pages

npm 安装

npm install vue-textarea-suggester --save

使用

import VueTextaSuggester from 'vue-textarea-suggester'
 
Vue.use(VueTextaSuggester)
 
// 或者直接使用script导入
<script src="https://unpkg.com/vue-textarea-suggester/dist/vue-textarea-suggester.js"></script>

搭配 原生textarea

<textarea ref="textarea" class="textarea" rows="10" @input="input"></textarea>
<vue-textarea-suggester
  v-model="extracts"
  :target="target"
  :rules="rules"
  @matched="matched"
  ref="suggester"
/>

<script>
export default {
  name: "app",
  data() {
    return {
      target: null,
      extracts: [],
      rules: [
        {
          rule: /!/,
          data: [{ label: "aaaa" }, { label: "bbbb" }]
        },
        {
          rule: /@/,
          data: [{ label: "xxxx" }, { label: "yyyy" }]
        }
      ]
    };
  },
  methods: {
    input() {
      this.$refs.suggester.change();
    },
    matched(rule, query, row) {
      console.log(`rule ${JSON.stringify(rule)}`);
      console.log(`query ${JSON.stringify(query)}`);
      console.log(`row ${JSON.stringify(row)}`);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.target = this.$refs.textarea;
    });
  }
};
</script>

搭配 md-editor2

安装 md-editor2

import MdEditor2 from 'md-editor2'
 
import 'md-editor2/dist/css/index.css'
 
Vue.use(MdEditor2)

<md-editor2
  ref="md"
  v-model="value"
  :toolbars="toolbars"
  :valueTecalculation="valueTecalculation"
  @change="change"
/>
<vue-textarea-suggester
  remote
  v-model="extracts"
  :target="mdTarget"
  :rules="rules"
  :options="options"
  :loading="loading"
  @matched="matched"
  ref="mdSuggester"
/>

<script>
export default {
  name: "app",
  data() {
    return {
      mdTarget: null,
      value: `## suggester 显示时\n- 响应键盘上下左右按钮事件\n- 回车或鼠标左键点击item触发选中\n@blryli `,
      toolbars: {
        preview: true, // 预览
        bold: true, // 粗体
        italic: true, // 斜体
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        subfield: true, // 单双栏模式
        fullscreen: true // 全屏编辑
      },
      // 提取字段替换成需要的字段
      valueTecalculation: params => {
        this.extracts.forEach(d => {
          const rep = `${d.rule}${d.label}`;
          params = params.replace(
            new RegExp(rep, "g"),
            `[${d.rule}${d.label}](/${d.label})`
          );
        });
        return params;
      },
      loading: false,
      options: [],
      extracts: [],
      rules: [
        {
          rule: /![A-Za-z0-9]+:/,
          key: "number"
        },
        {
          rule: /!/,
          key: "type",
          enterAdd: ":",
          enterExtract: false
        },
        {
          rule: /@/,
          key: "person"
        }
      ]
    };
  },
  methods: {
    change() {
      this.$refs.mdSuggester.debouncedChange();
    },
    matched(rule, query, row) {
      console.log(`rule ${JSON.stringify(rule)}`);
      console.log(`query ${JSON.stringify(query)}`);
      console.log(`row ${JSON.stringify(row)}`);
      if (row) {
        let list = [];
        switch (row.key) {
          case "type":
            list = [
              {
                label: "ASN"
              },
              {
                label: "TCL"
              },
              {
                label: "AOC"
              }
            ];
            break;
          case "number":
            list = [
              {
                label: "10001"
              },
              {
                label: "10002"
              },
              {
                label: "10003"
              }
            ];
            break;
          case "person":
            list = [
              {
                label: "lizhili"
              },
              {
                label: "dongqiang"
              },
              {
                label: "zhouqinmin"
              }
            ];
            break;
 
          default:
            list = [];
            break;
        }
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 300);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.mdTarget = document.querySelector(".auto-textarea-input");
    });
  }
};
</script>

vue-textarea-suggester Attributes

参数	说明	类型	可选值	默认值
value	选中时提取的对象	Array	-	[]
target	输入元素的dom	HTMLTextAreaElement	-	-
rules	匹配规则	array	-	-
debounce	输入时防抖等待时间	Number	-	300
minWidth	suggester 最小宽度	string	-	180px
remote	是否为远程远程匹配	Boolean	-	false
loading	remote为true时，是否正在从远程获取数据	Boolean	-	false
options	remote为true时，远程获取数据列表	Array	-	[]

rules Attributes

参数	说明	类型	可选值	默认值
rule	匹配规则	正则	-	-
enterAdd	选中item时 向末尾添加的字符	string	-	空格
enterExtract	选中item时 是否提取内容	array	-	true
data	匹配规则成功时，suggester显示列表，remote为true时无效	array	-	[]

vue-textarea-suggester Methods

方法名	说明	参数
change	触发匹配的方法	-

vue-textarea-suggester Events

方法名	说明	回调参数
matched	匹配成功时触发	匹配规则对应的字符串，匹配内容，规则对象
change	suggester 选中item时触发	提取的集合