Vue 3的现代表情符号和GIF选择器– vue3-discordpicker

Vue 3的现代表情符号和GIF选择器– vue3-discordpicker
插件名称 vue3-discordpicker
发布时间 2021年5月18日
插件作者 enzostvs

discord-picker是适用于Vue.js 3的现代表情符号和GIF图像选择器。

安装和下载:

# NPM
$ npm i vue3-discordpicker

使用

1.导入并注册。

import DiscordPicker from 'vue3-discordpicker'
Vue.use(DiscordPicker)
// or
export default {
  components: { DiscordPicker }
}

2.将组件添加到模板。

<discord-picker
  input
  :value="value"
  gif-format="md"
  @update:value="value = $event"
  @emoji="setEmoji"
  @gif="setGif"
/>
xport default {
  components: { DiscordPicker },
  data () {
    return {
      value: ''
    }
  },
  methods: {
    setEmoji (emoji) {
      console.log(emoji)
    },
    setGif (gif) {
      console.log(gif)
    }
  }
}

3.可用道具。

// custom categories
categories: {
  type: Array,
  default () {
    return ['people','animals','foods','travel','activities','objects','symbols','flags']
  }
},
// placeholder text
placeholder: {
  type: String,
  default: 'Type your message'
},
// load input with autocomplete
input: {
  type: Boolean,
  default: false
},
// input value
value: {
  type: [String, Number],
  default: null,
},
// return gif link with markdown format or html format
gifFormat: {
  type: String
},
// tenor.com API KEY 
key: {
  type: String
}