vue-qqface-plugin v0.1.1

vue-qqface

闲来无事，造一轮子，学习之用。 必经测试，可作参考，谨慎仅用。 若有总题，也可交流，共同改进。

安装

npm i vue-qqface-plugin

使用

// 引用插件
import VueQqFace from 'vue-qqface-plugin'

// 安装插件
Vue.use(VueQqFace, {
  //图片位置	
  path: '/static/images/qqface'
})

<template>
  <div id="app">
    <div v-qqface="'btn'" contenteditable="true" class="textarea" ref="textarea"></div>
    <button id="btn">表情</button>
    <button @click="onSubmit">提交</button>
  </div>
</template>
<script>

export default {
  name: 'app',
  methods: {
    onSubmit () {
      let value = this.$refs.textarea.innerHTML

      // 把它转成txt，以便存储
      let txt = this.$qqface.transToText(value)
      console.log(txt)

      // 再转成html
      let html = this.$qqface.transToHtml(txt)
      console.log(html)
    }
  }
}
</script>

<style>
.textarea{
  border:1px solid #222;
  height: 100px;
}
</style>

实例对象方法

this.$qqface.transToText(string)
this.$qqface.transToHtml(string)