vue-expression
v0.1.6
Published
vue表情组件
Downloads
3
Readme
touch-select
首先
import rem from 'rem-init' //这只是一个rem单位响应布局插件
import Vue from 'vue' //vue
import expression from 'vue-expression' //表情插件
rem({psd_width:"320"}); //rem初始化 设置 psd设计图宽度320
Vue.use(expression);
template
<div id="editor" contenteditable="true" placeholder="请文明评论:" class="aboutComment_reply_content size14 look_set_img"></div>
<expression></expression>
js
//当表情面板展示的状态下 如果切换到某个div 聚焦时 需要隐藏表情面板 那么对那个标签加上 class='look_out'
//在需要表情的输入框加上class='look_set_img' 输入框必须为div标签
//函数look_to_content(html) 将带表情的文本框内的html传入返回字符串 存储到服务器
//函数complie_content(cont) 将被look_to_content编译过的字符串转换为带表情的html
//函数hide_look() 隐藏表情面板
methods:{
//将对话框内的 文字以及html 编译 为 字符串 并返回 用以发送到后台保存
set_look_text:function (htmls) {
if(htmls)
var tha=this;
var html =htmls;
return tha.$children[0].look_to_content(html) //tha.$children[0] 表示expression组件 也可能为[1]或者[2]自己打印出列表查看expression组件具体是第几个下标内
},
//将字符串 编译为 html代码 并返回 用以展示到评论区
get_look_html:function (texts) {
if(texts)
var tha=this;
var text =texts;
return tha.$children[0].complie_content(text)
}
}
style
.aboutComment_reply_content:empty:before {
content: attr(placeholder);
color: #cacaca;
}
.aboutComment_reply_content {
overflow: auto;
box-sizing: border-box;
padding: .15rem;
height: 1.5rem;
}
.size14 {
font-size: .14rem;
}
* {
margin: 0;
padding: 0;
}