crm-mobile/components/base/add-comment.vue

<template>
  <view
    :class="{shadow: showShadow || showEmoji}"
    class="add-comment">
    <view class="input-box">
      <view class="textarea-core">
        <textarea
          ref="textarea"
          v-model="content"
          :focus="focusFlag"
          :show-confirm-bar="false"
          :fixed="true"
          confirm-type="done"
          maxlength="500"
          placeholder-class="wk-placeholder"
          placeholder="请输入内容"
          auto-height
          class="textarea"
          @focus="handleFocus"
          @blur="handleBlur"
          @confirm="submit"
          @input="changeText" />
      </view>
      
      <view class="control">
        <view class="submit-btn" @click="submit">
          回复
        </view>
      </view>
    </view>

    <!-- <emoji-section
      :visible.sync="showEmoji"
      @select="handleEmoji" /> -->
  </view>
</template>

<script>
  // import EmojiSection from '@/components/emoji/index'
  import xss from 'xss'

  export default {
    name: 'AddComment',
    components: {
      // EmojiSection
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      replay: {
        type: Object,
        default: null
      },
      immediateFocus: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        focusFlag: false,
        content: '',
        replayInfo: null,

        showEmoji: false,
        showShadow: false
      }
    },
    watch: {
      value: {
        handler(val) {
          this.content = val
        },
        immediate: true
      },
      replay: {
        handler(val) {
          this.replayInfo = val
          if (
            !this.focusFlag &&
            !this.$isEmpty(val)
          ) {
            this.$nextTick(() => {
              this.handleFocus()
            })
          }
        },
        immediate: true,
        deep: true
      },
      immediateFocus: {
        handler() {
          this.$nextTick(() => {
            if (this.immediateFocus) {
              this.handleFocus()
            }
          })
        },
        immediate: true
      },
      content(newVal, oldVal) {
        if (this.replayInfo) {
          let str = `回复@${this.replayInfo.user.realname} `
          if (!newVal.startsWith(str)) {
            this.replayInfo = null
            if (newVal.length > 0) {
              this.content = oldVal.slice(str.length)
              // console.log('newVal', newVal)
              // console.log('oldVal', oldVal)
              // console.log('content', this.content)
            }
            this.$emit('change-user', null)
          }
        }
        this.$emit('input', this.content)
      }
    },
    methods: {
      focus() {
        this.focusFlag = true
      },

      handleFocus() {
        this.showShadow = true
        this.focusFlag = true
        this.showEmoji = false
      },
      handleBlur() {
        this.showShadow = false
        this.focusFlag = false
      },

      handleEmoji(emoji) {
        this.content += emoji
      },
			
      formatValue(oldStr) {
        // 禁止输入 emoji
        const regStr = /[\ud800-\udbff]|[\udc00-\udfff]/g;
        return oldStr.replace(regStr, '');
      },
			
      changeText() {
        let oldStr = String(this.content)
        let valueStr = this.formatValue(this.content)
			
        this.content = oldStr
        this.$nextTick(function() {
          this.content = valueStr
        })
      },

      submit() {
        if (this.content == '') {
          this.$toast('回复内容不能为空')
          return
        }
        this.content = xss(this.content)
        this.$emit('submit', this.content)

        this.showEmoji = false
        this.content = ''
        this.replayInfo = null
      },
    }
  }
</script>

<style scoped lang="scss">
  .add-comment {
    position: fixed;
    left: 0;
    bottom: 0;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
		z-index: 10;
    width: 100%;
		font-size: 26rpx;
		min-height: 102rpx;
		overflow: hidden;
    &.shadow {
			/* #ifdef MP-WEIXIN */
			bottom: 32rpx;
			/* #endif */
      box-shadow: 0 -10rpx 15rpx rgba(0,0,0,0.05);
    }

    .input-box {
      position: relative;
      width: 100%;
      background-color: white;
      border-top: 1rpx solid $border-color;
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
			overflow: hidden;
			
			.textarea-core {
				flex: 1;
				min-height: 70rpx;
				border-radius: 3rpx;
				background-color: #f5f5f5;
				padding: 16rpx 20rpx;
				overflow: hidden;
				@include center;
				.textarea {
					width: 100%;
					max-height: 200rpx;
					font-size: 26rpx;
				}
			}
      
      .control {
				flex-shrink: 1;
        height: 70rpx;
        @include left;
        .face-icon {
          width: 36rpx;
					height: 36rpx;
          margin: 0 30rpx;
        }
        .submit-btn {
          font-size: $wk-font-sm;
          color: white;
          background-color: $theme-color;
          padding: 10rpx 20rpx;
          border-radius: 4rpx;
					margin-left: 30rpx;
        }
      }
    }
  }
</style>