vue-auto-complete-quill v1.0.4

vue-auto-complete-quill

一个支持自动补全功能的vue 富文本编辑器。

install

npm install vue-auto-complete-quill --save

或

yarn add vue-auto-complete-quill --save

homepage

https://github.com/liCat/vue-autocomplete-quill

quick start

用法1：

in main.js

// in main.js
import Vue from 'vue'

import 'quill/dist/quill.core.css' // quill 样式文件
import 'quill/dist/quill.snow.css'// quill 样式文件
import 'quill/dist/quill.bubble.css'// quill 样式文件

import vueAutoCompleteQuill from 'vue-auto-complete-quill'



Vue.use(vueAutoCompleteQuill)
//... others

in component

// in component
<template>
  <div id="app">
    <auto-complete-quill
      :disabled="false"
      size="small"
      @input="handleInput"
      @fetch-list="fetchList"
      :recommendListLoading="recommendListLoading"
      :fetchList="fetchList"
      :recommendList="recommendList"
      item-class-name="listItem"
      item-text-key="text"
      :content="msg">
      <div slot="loading"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></div>
    </auto-complete-quill>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        msg: 'Welcome to quill auto complete component',
        recommendList: [],
        fetchList(textBeforeCursor, cursorIndex, wordBeforeCursor, sentenceBeforeCursor) {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve([
                {
                  id: 1,
                  text: 'The Tottenham outrage of 23 January 1909 was a theft of wages from the Schnurmann rubber factory in Tottenham, North London, followed by a two-hour, six-mile (10 km) police chase. '
                },
                {
                  id: 2,
                  text: 'The armed robbers, Paul Helfeld and Jacob Lepidus, killed themselves at the end of the pursuit. The bravery of the police led to the creation of the King\'s Police Medal, awarded to several of those involved in the pursuit.'
                },
                {
                  id: 3,
                  text: 'A joint funeral for the two shooting victims—Police Constable William Tyler and Ralph Joscelyne, a ten-year-old boy—was attended by a crowd of up to half a million mourners, including 2,000 policemen. '
                },
                {
                  id: 4,
                  text: 'The deaths exacerbated ill feelings towards immigrants in London, and much of the press coverage was anti-Semitic in nature; Helfeld and Lepidus were Jewish Latvian Socialists'
                },
              ])
            }, 3000)
          })
        },
      }
    },
    methods: {
      handleInput(val) {
        this.msg = val
      },

    }
  }
</script>

<style lang="scss">
  #app {
  }

  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .listItem {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:before {
      content: '*  '
    }
  }
</style>

###用法2： 直接在组件中引入单个组件

<template>
  <div id="app">
    <auto-complete-quill
      :disabled="false"
      :list-width="300"
      size="small"
      @input="handleInput"
      @fetch-list="fetchList"
      :fetchList="fetchList"
      :recommendList="recommendList"
      item-class-name="listItem"
      item-text-key="text"
      :list-z-index='50'
      :content="msg">
      <div slot="loading"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></div>
    </auto-complete-quill>
  </div>
</template>

<script>
  import {AutoCompleteQuill} from 'vue-auto-complete-quill'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'


  export default {
    name: 'app',
    components: {AutoCompleteQuill},
    data() {
      return {
        // ...some data
      }
    },
    methods: {
     //...some method
    }
  }
</script>

<style lang="scss">
  /*...some style*/
</style>

document

props

event

slot