插件名称 | VueFeedbackReaction |
---|---|
发布时间 | 2020年4月10日 |
插件作者 | IvanSotelo |
这是一个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
}