0.1.3 • Published 5 years ago
vue-editable-component v0.1.3
vue-editable-component
基于 VUE 的选择表情组件
Installation
npm install --save vue-editable-component
global usage(全局使用)
main.js
import 'vue-editable-component/lib/editable.css'
import editableComponent from 'vue-editable-component'
Vue.use(editableComponent)
template
<editable-component
:emoji-url="emojiUrl"
:send-callback="sendCallback"
:image-callback="imageCallback"
></editable-component>
script
export default {
data() {
return {
emojiUrl: ''
};
},
methods: {
sendCallback: function(msg){
// 点击发送按钮的回调
},
imageCallback: function(src){
// 点击图片按钮的回调
}
}
}
variable
- 变量:vm.$emoji
- vm.$emoji.getKey(msg) // 获取表情key(标签转换成表情key)
- vm.$emoji.getEmoji(msg) // 获取表情(表情key转换成标签)
示例
export default {
methods: {
getEmoji: function(msg){
return this.$emoji.getEmoji(msg)
},
getKey: function(msg){
return this.$emoji.getKey(msg)
}
}
}
component usage(局部使用)
template
<editable-component
:emoji-url="emojiUrl"
:send-callback="sendCallback"
:image-callback="imageCallback"
></editable-component>
script
import 'vue-editable-component/lib/editable.css'
import { editableComponent } from 'vue-editable-component'
export default {
components: {editableComponent},
data() {
return {
emojiUrl: ''
};
},
methods: {
sendCallback: function(msg){
// 点击发送按钮的回调
// msg,返回输入框的内容
},
imageCallback: function(src){
// 点击图片按钮的回调
}
}
}
variable
- 变量:$emoji
- $emoji.getKey(msg) // 获取表情key(标签转换成表情key)
- $emoji.getEmoji(msg) // 获取表情(表情key转换成标签)
示例
import { $emoji } from 'vue-editable-component'
export default {
methods: {
getEmoji: function(msg){
return $emoji.getEmoji(msg)
},
getKey: function(msg){
return $emoji.getKey(msg)
}
}
}
options
fixed
- type: Boolean
- default: true
absolute
- type: Boolean
- default: false
emojiUrl(表情图片存放的路径)
- type: String
- default: null
拷贝表情图片 (src/img) 到本地项目或上传到资源服务器
sendCallback(点击发送按钮的回调)
- type: Function
- default: null
imageCallback(点击图片按钮的回调)
- type: Function
- default: null
不传则图片按钮不会显示