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：表情符号的高度。默认值为
''。
