这是一个Vue.js组件，它允许用户使用一组动画表情对您的帖子/文章/产品/服务做出反馈。

安装和下载：

# Yarn
$ yarn add vue-feedback-reaction

# NPM
$ npm install vue-feedback-reaction --save

使用:

1.安装并导入VueFeedbackReaction组件。

import { VueFeedbackReaction } from 'vue-feedback-reaction';

export default {
  name: 'demo',
  components: {
    VueFeedbackReaction
  },
  data: () => ({
    feedback: ''
  })
};

2.将组件插入您的应用模板。

<template>
  <div class="app">
    <vue-feedback-reaction v-model="feedback" />
  </div>
</template>

3.可用的Props。

value: {
  default: '',
  type: [String, Number]
},
labels: {
  default: () => [],
  type: Array,
  validator: v => v && v.length ? v.length === 5 : false
},
labelClass: {
  default: '',
  type: [Object, Array, String]
},
emojiWidth: {
  default: '',
  type: [String, Number]
},
emojiHeight: {
  default: '',
  type: [String, Number]
},
containerWidth: {
  default: '',
  type: [String, Number]
},
containerHeight: {
  default: '',
  type: [String, Number]
}

4.它还提供了使用单个表情符号的组件。

import { VueReactionEmoji } from 'vue-feedback-reaction';

export default {
  name: 'demo',
  components: {
    VueReactionEmoji
  },
  data: () => ({
    reaction: 'natural',
    isActive: false,
    isDisabled: false
  })
};

<template>
  <div class="app">
    <vue-reaction-emoji :reaction="reaction" :is-active="isActive" :is-disabled="isDisabled" />
  </div>
</template>

5. VueReactionEmoji组件的可用的Props。

reaction: {
  type: String,
  default: 'natural',
  validator: (v) => (['hate', 'disappointed', 'natural', 'good', 'excellent'].includes(v))
},
isActive: {
  type: Boolean
}

---

官网：https://github.com/IvanSotelo/VueFeedbackReaction

演示：https://www.vue365.cn/code_demo.php?id=137

GitHub下载：https://github.com/IvanSotelo/VueFeedbackReaction/archive/master.zip