InputPasteImmage 可粘贴图片输入框

基础用法

<template>
  <plv-paste-image
    placeholder="请输入内容"
    @change="handleChange"
    @submit="handleSubmit"
  />
</template>
<script>
export default {
  data() {
    return {
      content: [],
    };
  },
  methods: {
    handleChange(data) {
      console.info(data);
      this.content = data;
    },
    handleSubmit() {
      console.info('submit');
    },
  },
};
</script>

显示代码

设置最小、最大显示行数

<template>
  <plv-paste-image
    placeholder="请输入内容"
    :minLineCount="2"
    :maxLineCount="4"
  />
</template>

显示代码

插槽

<template>
  <plv-input-paste-image
    placeholder="我也来参与一下互动"
  >
    <template slot="header">
      <div>
        <plv-icon icon="picture" />
      </div>
    </template>
    <template slot="footer">
      <div>
        <plv-button>发送</plv-button>
      </div>
    </template>
  </plv-input-paste-image>
</template>

显示代码

禁用状态

<template>
  <plv-paste-image disabled/>
</template>

显示代码

Attributes

参数	说明	类型	可选值	默认值
width	宽度	Number	-	200
fontSize	字体大小	Number	-	14
lineHeight	行高	Number	-	1.6
minLineCount	最小显示行数	Number	-	1
maxLineCount	最大显示行数	Number	-	3，超过则出现滚动条
maxImageCount	一次最多可粘贴图片数量	Number	-	9
maxlength	最多可输入的文字数量	Number	-	200
disabled	输入框是否可用	Boolean	-	false
placeholder	输入框占位文本	String	-	-
background	背景样式	String	-	-

说明：

1. 输入框最小高度由字体大小，行高和最小显示行数共同决定
2. 输入框最大高度由字体大小，行高和最大显示行数共同决定

Events

事件名称	说明	回调参数
focus	在 Input 获得焦点时触发	(event: Event)
blur	在 Input 失去焦点时触发	(event: Event)
change	在 Input 值改变时触发	(data: Array<ChangeItem>)
submit	输入框回车后触发	(event: Event)
over-max-image-count	超出 maxImageCount 值时触发	图片文件数
over-maxlength	超出 maxlength 值时触发	-
preview	双击图片时触发	图片链接
is-overflow	内容高度超过输入框最大高度时触发	是否超出

ChangeItem说明

Attributes

属性值	说明	类型	可选值	默认值
file	图片文件	File	-	-
content	文本内容	String	-	-
type	类型	String	'img'|'text'	-

file和content同时只会存在一个

Slots

name	说明
header	输入框前置内容
footer	输入框后置内容

兼容性说明

1. 火狐下同时最多只能粘贴一张图片，并且会出现图片文件名