src/components/mini/box13-reply.vue

@@ -1,5 +1,4 @@
<template>

   <div>
      <div class="visitInfo">
         <a-form-model ref="myForm" layout="inline" :rules="rules" :model="form" :label-col="labelCol"
@@ -23,9 +22,11 @@
            </a-form-model-item>
         </a-form-model>
      </div>

      <div class="replyMsgInfo" v-if="showReplyMsgInfo">
         <div>{{msgInfo.useName}} </div>
         <div style="padding: 0px 3px;"> : </div>
         <div>
            {{msgInfo.useName}}<span style="padding: 0px 3px;"> : </span>
         </div>
         <div>
            <span v-html="msgInfo.userComment.replace(/\n/g, '<br>')"></span>
         </div>
@@ -33,8 +34,11 @@
      <a-comment>
         <div slot="content">
            <a-form-item>
               <a-textarea :rows="4" v-model="form.visitorContent" :placeholder="replyHolder" />
               <a-textarea :rows="4" v-model="form.visitorContent" :placeholder="replyHolder"
                  class="OwO-textarea" />
            </a-form-item>
            <div class="OwO"></div>

            <div>
               <a-button html-type="submit" type="primary" @click="send()" v-if="!showReplyMsgInfo"
                  :disabled="isSending || $attrs.isAllowedComment==0">
@@ -51,7 +55,7 @@
               <a-checkbox v-model="form.isReceiveMail">
                  接收邮件回复通知
               </a-checkbox>
               <a-checkbox style=" margin-left: 8px;" v-if="!showReplyMsgInfo" v-model="form.isSecretMsg">
               <a-checkbox v-if="!showReplyMsgInfo" v-model="form.isSecretMsg">
                  悄悄说..<span class="myTip">(仅登录后可查看)</span>
               </a-checkbox>
            </div>
@@ -67,9 +71,26 @@
   } from '../../api/blogArticleComment.js'
   import md5 from 'js-md5';

   import 'owo/dist/OwO.min.css';
   import OwO from 'owo/dist/OwO.min.js';
   // import OwO from '/public/OWO.js';


   const VisitorDataKey = "visitorData.inleft.com"

   export default {
      mounted() {
         var OwO_demo = new OwO({
            logo: 'OωO表情',
            container: document.getElementsByClassName('OwO')[0],
            target: document.getElementsByClassName('OwO-textarea')[0],
            api: './OwO.json',
            // api: 'http://diygod.github.io/OwO/demo/OwO.json',
            position: 'down',
            width: '100%',
            maxHeight: '250px'
         });
      },
      methods: {
         getMsgInfo(param) {
            this.msgInfo = param;
@@ -248,10 +269,26 @@
<style lang="less">
   .replyMsgInfo {
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      box-shadow: 0px 9px 10px 0 rgba(0, 0, 0, 0.24), 1px 3px 15px 0 rgba(0, 0, 0, 0.19);
      padding: 20px 25px 20px;
      margin-left: 15px;
      margin-top: 10px;
   }

   .OwO {
      padding: 0px 0px 20px 0px;
   }

   .OwO .OwO-logo {
      height: 30px;
   }

   .OwO .quyin,
   .OwO img {
      margin-bottom: -0.125rem;
      min-height: 3.5rem;
      height: 1em;
   }
</style>