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

当前位置:主页 > Vue > Vue组件 > vue-feedback-reaction | 一款基于vuejs的emoji图标表情反馈组件
vue-feedback-reaction | 一款基于vuejs的emoji图标表情反馈组件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:05-22
    阅读:
简要教程

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