该组件输入、换行、变换光标可以实时给出提示

效果:

textarea.vue

<template>
<div>
<el-input
id="user-input"
type="textarea"
placeholder="请换行输入不同的通知用户"
:autosize="{minRows: 2, maxRows: 10}"
v-model="inputValue"
@blur="closeHint"
@input="settingHint"
@click.native="settingHint"
@keyup.native="disposeKey">
</el-input>
<input-hint
:all-items="hintItems"
:position = 'hintPosition'
@select = "replaceStr"
></input-hint>
</div>
</template> <script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import InputHint from "./inputHint.vue";
import $ from "jquery"; @Component({
components: {
InputHint
}
})
export default class AdvancedTextarea extends Vue {
inputValue: string = '';
Seprator = "\n";
allUsers: string[] = [];
hintItems: string[] = []; //传入提示框的项,可以是html字符串;为空则表示不显示提示框
initPosition = { //输入框的信息,用于计算提示框位置
left: 15,
top: 5,
rowHeight: 20, //一行的高度
fontSize: 7 //一个字的宽度
}
hintPosition = {
left: this.initPosition.left,
top: this.initPosition.top
} //按上下左右键时,重置提示框
disposeKey(e) {
if (e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) {
this.settingHint();
}
} settingHint(val?) {
let cursorLocation = $('#user-input').caret(); //光标位置
let newStr = this.inputValue.slice(0, cursorLocation); //输入框光标前的字符
let newArr = newStr.split(this.Seprator);
let searchKey = newArr.length === 0 ? "" : newArr[newArr.length - 1];
let regExp = new RegExp(searchKey, 'ig');
this.hintItems = searchKey ?
this.allUsers.filter(item => item.indexOf(searchKey) !== -1).map(item => item.replace(regExp, `<strong>${searchKey}</strong>`)) :
this.allUsers;
this.hintPosition.left = this.initPosition.left + this.initPosition.fontSize * (searchKey.length > 0 ? searchKey.length - 1 : 0);
this.hintPosition.top = this.initPosition.top + this.initPosition.rowHeight * (newArr.length > 10 ? 10 : newArr.length);
} closeHint() {
//延后关闭是因为立即关闭的话,点击提示框内容就无法触发点击事件
window.setTimeout(() => {
this.hintItems = null;
window.clearTimeout();
}, 200); } //将光标当前值替换为选中值
replaceStr(val) {
let cursorLocation = $('#user-input').caret(); //光标位置
let newStr = this.inputValue.slice(0, cursorLocation); //输入框光标前的字符
let row = newStr.split(this.Seprator).length - 1; //光标所在行
let oriArr = this.inputValue.split(this.Seprator);
oriArr[row] = val;
this.inputValue = oriArr.join(this.Seprator);
$('#user-input').focus();
} getAllUsers() {
this.allUsers = [
'xiaoming@qq.com',
'daming@163.com',
'liuxioawei@gridsum.com',
'432454354@qq.com',
'zhangzheng@qq.com',
'mostlove@163.com',
'wangweihao@gridsum.com',
'67900332@qq.com',
'xiaosi@qq.com',
'loveshuang@163.com',
'liuxioawei@gridsum.com',
'87456563@qq.com',
'yaru@qq.com',
'wuyuetian@163.com',
'junjun@gridsum.com',
'67576889@qq.com',
'shuanger@qq.com',
'she@163.com',
'ruiji@gridsum.com',
'45454334@qq.com',
]
} mounted() {
if (this.allUsers.length === 0) {
this.getAllUsers();
}
}
} </script>

inputHint.vue

<template>
<div v-show="allItems&&allItems.length!==0">
<ul class="el-dropdown-menu el-popper max-height new-scoll-bar" :style="{left: position.left+'px', top: position.top+'px'}">
<li class="el-dropdown-menu__item" v-for="(item,index) in allItems" :key="index" v-html="item" @click="selectItem(item)"></li>
</ul>
</div>
</template> <style lang="postcss" scoped>
.max-height {
max-height: 250px;
overflow-y: auto;
}
</style> <script lang="ts">
import { Vue, Component } from "vue-property-decorator"; @Component({
props: {
allItems: {
type: Array,
default: []
},
position: {
type: Object,
default: {
left: 0,
top: 0
}
}
}
}) export default class InputHint extends Vue {
allItems = this.allItems;
selectItem(item: string) {
let regExp = /<strong>|<\/strong>/g;
let str = item.replace(regExp, '');
this.$emit('select', str)
}
}
</script>

实现一个可以实时提示的textarea组件的更多相关文章

  1. 写一个可插入自定义标签的 Textarea 组件

    - “插入自定义标签是什么鬼?” - “比如你要插入一个<wise></wise>的标签...” - “什么情况下会有这种需求?” - “得罪了产品的情况下...” 一.需求背 ...

  2. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  3. uni-app中textarea组件

    textarea组件,官方给出的监听事件有以下事件: 其中一定要注意,当使用 v-model 对表单内容进行双向绑定的时候,@input 事件是在绑定变量变化前触发的,所以如果在input事件内打印绑 ...

  4. jquery的实时触发事件(textarea实时获取中文个数)

    jquery的实时触发事件(textarea实时获取中文个数) (2014-09-16 11:49:50) 转载▼ 标签: 实时触发事件 中文个数 onpropertychange oninput o ...

  5. 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

    什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...

  6. 微信小程序input组件抖动及textarea组件光标错位解决方案

    问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...

  7. artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  8. Puer是一个可以实时编辑刷新的前端服务器

    ##Puer是一个可以实时编辑刷新的前端服务器 确保你安装了nodejs(现在还有没nodejs环境的前端? 拖出去喂狗吧) 使用npm全局安装puer命令 npm install puer -g 输 ...

  9. JStorm 是一个分布式实时计算引擎

    alibaba/jstorm JStorm 是一个分布式实时计算引擎. JStorm 是一个类似Hadoop MapReduce的系统, 用户按照指定的接口实现一个任务,然后将这个任务递交给JStor ...

随机推荐

  1. c语言程序设计:用strcpy比较数组(银行卡密码程序设计),strcpy(复制数组内容)和getchar()(敲键盘字符,统计不想要的字符的个数)

    统计从键盘输入一行字符的个数: 1 //用了getchar() 语句 2 //这里的\n表示回车 #include <stdio.h> #include <stdlib.h> ...

  2. 清华大学《C++语言程序设计基础》线上课程笔记05---vector对象,对象的复制与移动,string类

    vector 对象 C++标准库中的一个类模板 封装任何类型的动态数组,自动创建和删除. 数组下标越界检查. 将动态数组封装成类的知识点中封装的ArrayOfPoints也提供了类似功能,但只适用于一 ...

  3. 并发任务管理器AsyncTaskManager

    //-------------------------------------------------------------------------- // // Copyright (c) BUS ...

  4. cakephp2.x 多个应用程序公用一个核心类库

    环境Windows,apache,cake版本2.3.3 Cake项目路径 D:\wamp\www\Mycakephp 浏览器打开 http://localhost/Mycakephp 能够正常访问到 ...

  5. solr 常见的问题整理 -费元星

    本文是我在开发过程中遇到的一些问题的整理,有些摘自网上别人的方法. 1. org.apache.solr.client.solrj.SolrServerException: Timeout occur ...

  6. 『Golang』Go简介以及环境搭建

    简介 go语言是由Google进行维护的一个编程语言,发布自2009年.其以良好的编程风格.优秀的并发机制被广大的技术人员所接受. 使用go语言开发的优秀的产品: Docker gocode lime ...

  7. 快速写一个babel插件

    es6/7/8的出现,给我们带来了很多方便,但是浏览器并不怎么支持,目前chrome应该是支持率最高的,所以为了兼容我们只能把代码转成es5,这应该算是我们最初使用babel的一个缘由,随着业务的开发 ...

  8. 怎样安装Appium

    在浏览器地址栏输入 http://appium.io/ 打开Appium官网: 安装包下载完成后, 一路默认安装, 什么都不用点击, 等待大约10分钟: 安装完成后, 会在桌面生成快捷图标: 启动: ...

  9. git服务器搭建及eclipse使用git

    一.搭建git服务器 1.yum install git 2.新建用户linux用户git,管理git服务 useradd git passwd git 3.初始化git仓库 git init --b ...

  10. Linux命令应用大词典-第45章 服务器配置

    45.1 ssh-agent:存储用于公钥验证的私钥 45.2 ssh-add:添加RSA或DSA身份的认证代理 45.3 ssh-keyscan:收集主机公钥 45.4 sshd:运行sshd守护进 ...