2.0.12 • Published 2 years ago

w-qn-text v2.0.12

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

@weier/w-qn-text

  • 商家后台qn-text重构，内部集成 @weier/w-emoji-picker、@weier/w-upload 两个组件
// 安装
npm i @weier/w-qn-text -S

// 代码引入（可选）
import WQnText from "@weier/w-qn-text"

基础用法

常规用法

:::demo

<template>
<div>
  <w-qn-text
    rows="10"
    v-model="qntextVal"
    :simVariableList="simVariableList"
    :variableList="variableList"
    variableType='answer'
    envType='mock'
    @customChange='customChange'
    @selectCustomEmoji='selectCustomEmoji'
    :paginationChange='paginationFn'
    :maxlength="100"
    showWordLimit
  ></w-qn-text>
</div>
</template>
<script>

const urls = [
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/201903301001538299741d3ce4e1fe2d4848b8a569b3d7a698d8.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/2019033010113820248946abf1ac344f40f8be926547471c2e89.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/20190330100602062502bbe54e45733843bf8d0a508e0098476c.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/201903301741011794688ac0fbb72f6440ed9943bc3df2d3b570.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/20190414153450623578fbaa279606084b56bfa863528ca08b1c.jpg',
]
const generateImgObj = (src) => {
  const id = src + new Date().getTime()
  return {
    url: src,
    id
  }
}
const imgList = urls.map(src => generateImgObj(src))
export default {
  data(){
    return {
      qntextVal: '',
      simVariableList: [
        { value: '买家昵称', label: 'buyer_nick' },
        { value: '客服昵称', label: 'nick_name' },
        { value: '买家称呼', label: 'buyer_name' },
        { value: '换行符', label: 'line_feed_param' }
      ],
      variableList: [
        { value: '买家昵称', label: 'buyer_nick', modify: true },
        { value: '客服昵称', label: 'nick_name', modify: true },
        { value: '买家称呼', label: 'buyer_name', modify: true },
        { value: '换行符', label: 'line_feed_param', modify: true }
      ]
    }
  },
  methods: {
    customChange(res, callback){
      console.log(res)
      callback()
    },
    selectCustomEmoji(data){
      console.log(data)
    },
    paginationFn(options){
      console.log(options)
      return Promise.resolve({
        list: [...imgList],
        total: 40
      })
    }
  }
}
</script>

:::

variableType不填的情况

当未传 variableType 时，快捷变量无法使用，需要 传递 detectionVariableList 字段 ，以保证 添加变量功能的完整，如果detectionVariableList不传或者传个空数组，则不会展示 添加变量功能

:::demo

<template>
  <w-qn-text
    rows="10"
    v-model="qntextVal"
    :detectionVariableList="variableList"
    envType='mock'
    @customChange='customChange'
    @selectCustomEmoji='selectCustomEmoji'
    :paginationChange='paginationFn'
  ></w-qn-text>
</template>
<script>

const urls = [
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/201903301001538299741d3ce4e1fe2d4848b8a569b3d7a698d8.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/2019033010113820248946abf1ac344f40f8be926547471c2e89.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/20190330100602062502bbe54e45733843bf8d0a508e0098476c.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/201903301741011794688ac0fbb72f6440ed9943bc3df2d3b570.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/20190414153450623578fbaa279606084b56bfa863528ca08b1c.jpg',
]
const generateImgObj = (src) => {
  const id = src + new Date().getTime()
  return {
    url: src,
    id
  }
}
const imgList = urls.map(src => generateImgObj(src))
export default {
  data(){
    return {
      qntextVal: '',
      simVariableList: [
        { value: '买家昵称', label: 'buyer_nick' },
        { value: '客服昵称', label: 'nick_name' },
        { value: '买家称呼', label: 'buyer_name' },
        { value: '换行符', label: 'line_feed_param' }
      ],
      variableList: [
        { value: '买家昵称', label: 'buyer_nick', modify: true },
        { value: '客服昵称', label: 'nick_name', modify: true },
        { value: '买家称呼', label: 'buyer_name', modify: true },
        { value: '换行符', label: 'line_feed_param', modify: true }
      ]
    }
  },
  methods: {
    customChange(res, callback){
      console.log(res)
      callback()
    },
    selectCustomEmoji(data){
      console.log(data)
    },
    paginationFn(options){
      console.log(options)
      return Promise.resolve({
        list: [...imgList],
        total: 40
      })
    }
  }
}
</script>

:::

variableType='answer'，全插槽自定义模式

:::demo

<template>
  <w-qn-text
    ref="wQnText"
    cols="30"
    rows="10"
    variableType='answer'
    v-model="qntextVal"
    envType='mock'
  >
    <template slot='variableQuick'>
      <el-popover placement="top-start" width="400" trigger="hover" :open-delay="300">
        <div class="customCheckbox">
          <span v-for="item in simVariableList" :key="item.label" class="cone" @click="addVariable(item)">{{ item.value }}</span>
        </div>
        <el-button slot="reference" type="text" style="margin:0 10px;" size="mini">
          插入变量
          <i class="el-icon-caret-top el-icon--right"></i>
        </el-button>
      </el-popover>
    </template>
    <template slot='variableSelect'>
      <el-select v-model="variableSelectValue" @change="addVariable">
        <el-option v-for="item in variableList" :key="item.value" :value="item" :label="item.value"></el-option>
      </el-select>
    </template>
    <template slot='position'>position slot</template>
  </w-qn-text>
</template>
<script>

export default {
  data(){
    return {
      qntextVal: '',
      simVariableList: [
        { value: '买家昵称', label: 'buyer_nick' },
        { value: '客服昵称', label: 'nick_name' },
        { value: '买家称呼', label: 'buyer_name' },
        { value: '换行符', label: 'line_feed_param' }
      ],
      variableList: [
        { value: '买家昵称', label: 'buyer_nick', modify: true },
        { value: '客服昵称', label: 'nick_name', modify: true },
        { value: '买家称呼', label: 'buyer_name', modify: true },
        { value: '换行符', label: 'line_feed_param', modify: true }
      ],
      variableSelectValue: ''
    }
  },
  methods: {
    addVariable(data){
      this.$refs.wQnText.insertVariable(data)
    }
  }
}
</script>

:::

w-qn-text Attributes

参数说明类型可选值默认值
value输入框内容String——''
variableList变量列表，下拉框使用Array--[]
filter是否需要对特殊字符过滤Boolean--false
simVariableList快捷变量列表Array--[]
detectionVariableList需要检验的变量列表，气泡弹窗使用{paramValue: String, position: Boolean, insertNum: Nunber}[]--[]
showEmoji是否显示表情Boolean--true
showCustomEmoji是否显示自定义表情Boolean--true
variableType变量类型，如果为'answer'，显示变量快捷操作，如果为空显示 气泡变量添加String----
stopEnter是否支持enter换行Boolean--false
envType环境指向String['mock', 'dev', 'pre', 'prod']'dev'
customeUploadimagePics触发上传回调(e: event) => Promise<string[]>--false
showWordLimittextarea 文字限制，需要设置 maxlength 生效Boolean--false
w-emoji-picker 组件参数
platform平台类型String['qn', 'wx', 'ks']'qn'
paginationChange自定义表情查询方法(必须返回一个promise)Function----
emojiList额外配置的emoji表情{ "name": "", "code": "", "miniImg": "", "bigImg": "", "class": "" }[]--[]
sort自定义排序方法Function--null
hoverShowBighover显示大表情Boolean--false
自动透传 textarea 参数
自动透传 w-emoji-picker 参数
自动透传 w-upload 参数
  • 注：paginationChange 需要返回一个promise，包含参数 list、total，pageSize可选，如果 pageSize 不返回，将使用默认值 15
  • list返回的 数据格式 {id: String, url: String}，id、url 为必须 :::demo
<template>
  <w-qn-text
    rows="10"
    v-model="qntextVal"
    :simVariableList="simVariableList"
    :variableList="variableList"
    envType='mock'
    :paginationChange='paginationFn'
  ></w-qn-text>
</template>
<script>
const urls = [
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/201903301001538299741d3ce4e1fe2d4848b8a569b3d7a698d8.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/2019033010113820248946abf1ac344f40f8be926547471c2e89.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/20190330100602062502bbe54e45733843bf8d0a508e0098476c.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/201903301741011794688ac0fbb72f6440ed9943bc3df2d3b570.jpg',
  'https://healthpro-test.oss-cn-hangzhou.aliyuncs.com/20190414153450623578fbaa279606084b56bfa863528ca08b1c.jpg',
]
const generateImgObj = (src) => {
  const id = src + new Date().getTime()
  return {
    url: src,
    id
  }
}
const imgList = urls.map(src => generateImgObj(src))
export default {
  data(){
    return {
      qntextVal: '',
      simVariableList: [
        { value: '买家昵称', label: 'buyer_nick' },
      ],
      variableList: [
        { value: '买家昵称', label: 'buyer_nick', modify: true },
      ]
    }
  },
  methods: {
    paginationFn(options){
      console.log(options)
      return Promise.resolve({
        list: [...imgList],
        total: 40,
        pageSize: 15
      })
    }
  }
}
</script>

:::

w-qn-text Events

事件名称说明参数
selectCustomEmoji选择了自定义表情{ type 类型 emoji、pic, id 图片id, url 图片地址 }
customChange自定义表情变更{ type 类型，add、delete，data 具体数据源，add情况下 为 添加图片的内容，delete 内部有 ids，为需要删除的图片id }

w-qn-text Methods

方法名说明参数
insertVariable插入值到内容区{ value: 需要插入的值 }

w-qn-text slots

| 插槽name | 说明 | | default | 默认插槽，在 variableType 不等于 answer的时候使用，在插入变量的按钮之后 |\ | position | 位置插槽，在 variableType='answer'的时候使用，使用flex布局，在顶部最右侧 | | variableQuick | 快捷变量插槽，在 variableType='answer' 并且 simVariableLis 长度为0的时候使用 | | variableSelect | 下拉框变量插槽，在 variableType='answer' 并且 variableList 长度为0的时候使用 |

实现思路

  • 接入 w-emoji-picker 组件，来进行实现 emoji表情这块
  • 使用 textarea 来实现多行文本的输入，使用 preventDefault 来阻止 enter 的默认事件
  • 使用 selectionStart 来判断需要插入的位置，ie需要做特殊处理

其他备注

作者：基础建设组-尘寂

@infinitebrahmanuniverse/nolb-w-@everything-registry/sub-chunk-3107
2.0.12

2 years ago