vue-expression v0.1.6

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;
}