rui-vue-emoji
Version:
基于 Vue2.0 的emoji插件
136 lines (131 loc) • 3.26 kB
HTML
<html>
<head>
<title>Vue-emoji</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../dist/vue-emoji.css">
<script src = './vue.min.js'></script>
<script src = '../dist/vue-emoji.js'></script>
<style type="text/css">
body {
max-width: 800px;
margin: 0 auto;
}
[contenteditable] {
min-height: 60px;
background: #fff;
padding: 20px;
border: 1px solid #233;
box-shadow: 0 0 3px yellowgreen;
text-align: left;
color: #333;
line-height: 1.7;
}
[contenteditable]:focus .rui-emoji-img{
vertical-align: text-top;
}
[contenteditable]:focus {
outline: none;
}
pre {
border: 1px solid #eee;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Vue-Emoji</h1>
<div id="app">
<div>
<div contenteditable="" ref = 'edit' focus></div>
<button ref = 'btn' @click = 'showEmoji = !showEmoji'>emoji</button>
<vue-emoji
v-show = 'showEmoji'
ref = 'emoji'
:autoInsert='false'
@select = 'handleSelect'
@hide = 'hide()'
></vue-emoji>
</div>
</div>
<strong>从上面图片里面选择一个表情， 会在下面显示对应的unicode编码emoji</strong>
<div class="img-to-unicode"></div>
<hr>
<div id="app2">
<div>
<h2>使用unicode字符</h2>
<div contenteditable="" ref = 'edit' focus></div>
<button ref = 'btn' @click = 'showEmoji = !showEmoji'>emoji</button>
<vue-emoji
v-show = 'showEmoji'
ref = 'emoji'
:unicode='true'
:auto-insert='true'
@select = 'handleSelect'
@hide = 'hide()'
></vue-emoji>
</div>
</div>
<strong>从Unicode里面选择一个表情， 会在下面显示对应的图片</strong>
<div class="unicode-to-img"></div>
<div class="example-code">
<pre>
</pre>
</div>
<script type="text/javascript" id = 'script'>
var $app1 = document.querySelector('.unicode-to-img');
var $app2 = document.querySelector('.img-to-unicode');
var getCommon = function (selector) {
return {
el: selector,
components: {
VueEmoji
},
data () {
return {
showEmoji : false,
}
},
mounted () {
this.$refs.emoji.appendTo({
area: this.$refs.edit,
btn: this.$refs.btn,
position: 'top left'
});
},
methods: {
hide () {
this.showEmoji = false;
},
handleSelect (img) {
console.log(img)
if (img.nodeType === 3) {
var $img = new Image();
$img.src = this.$refs.emoji.getImgPathByUnicode(img.textContent);
$app1.appendChild($img);
} else {
var unicode = this.$refs.emoji.getUnicodeByImgPath(img.src);
var node = document.createTextNode(unicode);
$app2.appendChild(node);
}
this.hide();
}
},
watch: {
showEmoji (value) {
if (value) {
this.$refs.emoji.calcPosition();
}
}
}
};
}
new Vue(getCommon('#app'));
new Vue(getCommon('#app2'));
</script>
<script type="text/javascript">
document.querySelector('.example-code pre').innerHTML = document.querySelector('#script').innerHTML;
</script>
</body>
</html>