vue-editable-component

基于 VUE 的选择表情组件

Installation

npm install --save vue-editable-component

global usage（全局使用）

main.js

import 'vue-editable-component/lib/editable.css'
import editableComponent from 'vue-editable-component'
Vue.use(editableComponent)

template

<editable-component 
  :emoji-url="emojiUrl"
  :send-callback="sendCallback"
  :image-callback="imageCallback"
></editable-component>

script

export default {
  data() {
    return {
      emojiUrl: ''
    };
  },
  methods: {
    sendCallback: function(msg){
      // 点击发送按钮的回调
    },
    imageCallback: function(src){
      // 点击图片按钮的回调
    }
  }
}

variable

1. 变量：vm.$emoji
2. vm.$emoji.getKey(msg) // 获取表情key（标签转换成表情key）
3. vm.$emoji.getEmoji(msg) // 获取表情（表情key转换成标签）

示例

export default {
  methods: {
    getEmoji: function(msg){
      return this.$emoji.getEmoji(msg)
    },
    getKey: function(msg){
      return this.$emoji.getKey(msg)
    }
  }
}

component usage（局部使用）

template

<editable-component 
  :emoji-url="emojiUrl"
  :send-callback="sendCallback"
  :image-callback="imageCallback"
></editable-component>

script

import 'vue-editable-component/lib/editable.css'
import { editableComponent } from 'vue-editable-component'
export default {
  components: {editableComponent},
  data() {
    return {
      emojiUrl: ''
    };
  },
  methods: {
    sendCallback: function(msg){
      // 点击发送按钮的回调
      // msg，返回输入框的内容
    },
    imageCallback: function(src){
      // 点击图片按钮的回调
    }
  }
}

variable

1. 变量：$emoji
2. $emoji.getKey(msg) // 获取表情key（标签转换成表情key）
3. $emoji.getEmoji(msg) // 获取表情（表情key转换成标签）

示例

import { $emoji } from 'vue-editable-component'
export default {
  methods: {
    getEmoji: function(msg){
      return $emoji.getEmoji(msg)
    },
    getKey: function(msg){
      return $emoji.getKey(msg)
    }
  }
}

options

fixed

• type: Boolean
• default: true

absolute

• type: Boolean
• default: false

emojiUrl（表情图片存放的路径）

• type: String
• default: null

拷贝表情图片 (src/img) 到本地项目或上传到资源服务器

sendCallback（点击发送按钮的回调）

• type: Function
• default: null

imageCallback（点击图片按钮的回调）

• type: Function
• default: null

不传则图片按钮不会显示