vue+js input文本框输入时自动填充邮箱后缀组件封装

效果图：

一、组件封装：

HTML：

<template><div class="suggestion-field-box"><div class="sug-input"><inputclass="uni-input"v-model="myValue"@input="onKeyInput":placeholder="placehText":disabled="inputDisabled"@blur="blurHandler"/></div><div class="suggestion-field" v-if="isSuggestionVisible"><ul class="suggesstion-list"><liv-for="(item, index) in suggestionData":key="index"@click="suggestionItemClickHandler(item)"><template v-if="$slots.default"><slot :row="item"></slot></template><template v-else>{{ item.label }}</template></li></ul></div></div>
</template>

JS：

<script>
import { debounce } from "lodash"; //防抖动let debounceTime = 400;export default {props: {fetchSuggestions: { //可通过外部传入后缀填充函数type: Function,default: null},inputDisabled: {type: Boolean,default: false,},suggestionValue: { //外部传入的输入框初始化值type: String,default: "",},placehText: { type: String,default: "",},debounce: {type: Number,default: debounceTime,},},watch: {suggestionValue(val){ this.myValue = val;}},data() {return {myValue: this.suggestionValue,suggestionData: [],isSuggestionVisible: false,};},methods: {onKeyInput: debounce(function (event) {this.fetchSuggestionsHandler(event.target.value);}, debounceTime),async fetchSuggestionsHandler(newValue) {if (!this.fetchSuggestions) {return;}if (!newValue.trim()) {this.isSuggestionVisible = false;return;}const res = await this.fetchSuggestions(newValue);this.suggestionData = res;this.isSuggestionVisible = res && res.length > 0;},blurHandler() {setTimeout(() => {this.isSuggestionVisible = false;}, 100);},suggestionItemClickHandler(item) {this.myValue = item.label;this.$emit("setValue", item.label);this.isSuggestionVisible = false;},},created() {debounceTime = this.debounce;},
};
</script>

CSS:

<style lang="less" scoped>
.suggestion-field-box {position: relative;
}
.suggestion-field {position: absolute;left: 0;right: 0;top: 100%;z-index: 1;background: #fff;
}
ul {list-style: none;padding-inline-start: 0px;
}
.suggesstion-list {border-radius: 8px;box-shadow: 0 0 5px #999;padding: 10px 0 10px 10px;li {padding-bottom: 10px;text-align: left;+ li {padding-top: 10px;border-top: 1px solid #f5f5f5;}}
}
</style>

二、使用示例：

HTML：

<div class="msg-box"><div class="input-text"><span>邮箱：</span></div><suggestion-input:suggestionValue="email":placehText="inputDisabled ? '' : '请输入邮箱'" :inputDisabled="inputDisabled"@setValue="changeEmail":fetchSuggestions="fetchEmailSuggestions"class="input-box"></suggestion-input></div>

JS：

fetchEmailSuggestions(email) {//在此编写自己的填充逻辑即可if (email.indexOf("@") != -1) {return [];}return ["@qq.com", "@163.com", "@gmail.com", "yahoo.com"].map((item) => {return {label: email + item,};});},

vue+js input文本框输入时自动填充邮箱后缀组件封装相关推荐

js实现文本框输入时同步出现模糊搜索列表
做项目的时候遇到类似于淘宝搜索[鞋],出现[皮鞋][运动鞋]这样的模糊搜索功能需求,效果如下: 下面是简单实现方式 html部分 <div class="fubao-serch&quo ...
通过js获得input文本框输入的值
如何通过js获得input文本框输入的值. 前言我们编写的被载入浏览器的HTML页面都是一个 Document 对象.对于Document对象可以使我们通过代码(比如javascript)对HTML ...
已解决selenium模块向网页input文本框输入内容失败问题
已解决(selenium向input文本框输入内容失败问题)selenium.common.exceptions.ElementNotInteractableException: Message: e ...
php如何禁掉文本框输入,如何禁止input文本框输入
如何禁止input文本框输入 nput文本框用于接收用户输入的信息,我们有两种方法可以禁止input文本框,一种方法是使用readonly,另一种方法是使用disabled,但二者之间还是有区别的,请 ...
【干货】JS 限制input文本框输入
JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=v ...
html ip输入框效果,html5 input文本框输入动画特效
特效描述:文本框输入动画动画特效.几个更鼓舞人心的风格为文本框输入动画包括一些新技术和新思想. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Manami Username Web ...
input文本框输入溢出的时候，鼠标悬停显示全部信息
想要鼠标悬停在文本框上时,显示文本框详情,只要title的值等于文本框的value值就可以了 <input onmouseover="this.title=this.value&quo ...
php文本框限制字节,js限制文本框输入长度两种限制方式(长度、字节数)_基础知识...
功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js function li ...
JS对文本框输入字符的限制
文本框Text或TestBox中对输入字符的限制,通过js事件来监控用户输入字符.然而,如果用户是通过Copy的方式来粘贴到文本中来,那这时候文本框的字符长度有可能超过,这时候就容易报错.这种Copy ...
auto js 实现文本框输入
1.利用 setText() 输入 // 利用setText 进行输入,重置输入 setText ([i], text) //返回是否输入成功.当找不到对应的文本框时返回false. // 不加参数i ...

vue+js input文本框输入时自动填充邮箱后缀组件封装

一、组件封装：

HTML：

JS：

CSS:

二、使用示例：

HTML：

JS：

vue+js input文本框输入时自动填充邮箱后缀组件封装相关推荐

最新文章

热门文章