vue-feedback-reaction | 一款基于vuejs的emoji图标表情反馈组件

vue-feedback-reaction是一款基于vuejs的emoji图标表情反馈组件，使用户可以通过点击不同的表情符号来反馈信息。

使用方法

安装

如果您想使用vue-feedback-reaction表情反馈组件，首先您需要安装它，命令如下：

npm i vue-feedback-reaction
// 或者
yarn add vue-feedback-reaction
		

使用

一组反馈表情组件VueFeedbackReaction

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

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

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

单个表情VueReactionEmoji

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

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

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

配置参数

一组反馈表情组件VueFeedbackReaction的可用配置参数有：

• value：输入值 (v-model)，默认值为''。
• labels：显示在emoji表情下方的标签组成的数组，从左到右。默认值为[]。
• labelClass：仅在设置了labels属性的时候可用。 对所有的标签设置v-bind:class属性。默认值为''。
• emojiWidth：表情符号的宽度。默认值为''。
• emojiHeight：表情符号的高度。默认值为''。
• containerWidth：容器宽度。默认值为''。
• containerHeight：容器高度。默认值为''。

单个表情VueReactionEmoji的可用配置参数有：

• reaction：表情符号的对应动作。 必须是 hate、disappointed、 natural、 good 或 excellent其中的一个。默认值为natural。
• is-active：表情符号初始状态是否激活，默认值为false。
• is-disabled：表情符号是否不可用，默认值为false。
• width：表情符号的宽度。默认值为''。
• height：表情符号的高度。默认值为''。

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