插入用户昵称 h5端

最新推荐文章于 2024-05-13 14:04:21 发布

csstmg

最新推荐文章于 2024-05-13 14:04:21 发布

阅读量211

点赞数

分类专栏：前端深入学习

本文链接：https://blog.csdn.net/csstmg/article/details/119545583

版权

前端同时被 2 个专栏收录

171 篇文章 1 订阅

订阅专栏

深入学习

18 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<template>
  <div class="insertText">
   <!-- 文字弹窗 -->
   <van-action-sheet v-model="text_show" title="新建/编辑话术">
      <div class="text_edit_content">
        <div class="edit-user-content">
          <!-- <p class="edit-card-limit">{{(editContent?editContent.length:0) + '/1300'}}</p> -->
          <p class="edit-card-add">
            <!-- @click="addEditContent(currentCusInfo.externalUserName)" -->
            <span @click="addEditContent('用户昵称')">「插入用户昵称」</span>
            <!-- <span v-if="currentCusInfo.externalUserName !== currentCusInfo.remarkName" @click="addEditContent(currentCusInfo.remarkName)">「插入备注名」</span> -->
          </p>
          <div style="height:100%;">
            <div class="edit-text-cont">
              <van-field rows="15" maxlength="1300" v-model="editContent" type="textarea" id="textarea" placeholder="请输入留言" />
            </div>
          </div>
        </div>
        <div class="footer">
          <van-button plain type="info" @click="clickCancel">取消</van-button>
          <van-button type="info" @click="clickSubmit">保存</van-button>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>

export default {
  name: 'insertText',
  components: {

  },
  props: {
    itemInfo: {
      default: () => ({}),
      type: Object
    }
  },

  data() {
    return {
      text_show: false,
      editContent: ''
    }
  },
  computed: {

  },
  methods: {
    open() {
      this.text_show = true
    },
    addEditContent (cusInfo) {
      if (this.editContent.length >= 1300) {
        this.$toast('输入文字超出限制')
        return
      }
      var elInput = document.getElementById('textarea') // 根据id选择器选中对象
      var startPos = elInput.selectionStart// input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd// 选中的字符到最后的字符
      if (startPos === undefined || endPos === undefined) return
      var txt = elInput.value
      // 将表情添加到选中的光标位置
      var result = txt.substring(0, startPos) + cusInfo + txt.substring(endPos)
      elInput.value = result// 赋值给input的value
      // 重新定义光标位置
      elInput.focus()
      elInput.selectionStart = startPos + cusInfo.length
      elInput.selectionEnd = startPos + cusInfo.length
      this.editContent = result// 赋值给表单中的的字段
    }

  }
}
</script>
<style lang="scss" scoped>
.insertText{
  .text_edit_content{
    margin: .2rem;
    .edit-user-content{
      padding: .24rem .16rem;
      background-color: #f8f8f8;
      border-radius: .24rem;
      color: #4675C0;
    }
    .van-cell.van-field{
      padding: .2rem .1rem;
      height: 6rem;
      background-color: #f8f8f8;
      border-radius: 0 0px .24rem .24rem;
    }
    // .edit-text-cont {
    //   height: 100%;
    //   overflow-y: scroll;
    //   /deep/ .van-field__control {
    //     font-size: 0.26rem;
    //     color: #424242;

    //   }
      /deep/ .van-cell {
        padding: 20px 0 0 0px !important;
      }
    // }
  }
 .footer{
    margin-top:.3rem;
    display: flex;
    justify-content:space-between;
    .van-button{
      width: 3rem;
      border-radius: .2rem;
    }
  }
}
</style>