赞
踩
开发邮箱项目时,需要实现类似qq邮箱收件人的效果,其中包含:可添加多个收件人,输入时匹配通讯录,输入框失去焦点时自动添加输入的内容等功能。
根据需求项目,使用element的el-select插件,该插件已包含多选,输入匹配功能,但默认功能输入数据后,只有按Enter键时,才会自动添加,不符合需求,所以,本文完善下相关功能。
vue版本:2.6.12
不是专业前端的,如果有些描述存在问题,自行理解哈
先贴下完整代码,该代码作为components使用的,示例:
<email-select :address-list="addressBookList" @changeValue="changeRecipientsTos" :email="recipientsTos" placeholder="请添加收件人"></email-select>
参数解析
- address-list 通讯录列表,格式:[{name: "昵称", email: "xxx@xx.xx"}]
- @changeValue 同步输入框收件人列表信息的方法,注意哦,这个方法更新的list,不能是参数email的值哦
- email 初始显示的收件人列表
- placeholder 输入框输入提示
全部代码
- <template>
- <div style="width: 100%">
- <el-select @blur.native.capture="selectBlur" style="width: 100%" v-model="list"
- filterable
- multiple
- allow-create
- remote
- :remote-method="remoteMethod"
- default-first-option
- :placeholder="placeholder">
- <el-option
- v-for="item in options"
- :key="item.email"
- :label="isNotNull(item.name) ? item.name + '<' + item.email + '>' : item.email"
- :value="item.email">
- </el-option>
- </el-select>
- </div>
- </template>
- <script>
- import {isNotNull} from "@/api/default";
-
- export default {
- name: "email-select",
- props:{
- email: {
- type: Array,
- },
- placeholder: {
- type: String
- },
- addressList: {
- type: Array
- }
- },
- data(){
- return {
- list: [],
- options: [],
- addressBookList: [],
- }
- },
- watch: {
- "addressList": {
- handler(newvalue, oldValue){
- this.addressBookList = newvalue;
- }
- },
- "list": {
- handler(newvalue, oldValue){
- this.$emit("changeValue", newvalue);
- }
- },
- },
- created() {
- this.list = this.email;
- this.addressBookList = this.addressList;
- },
- methods: {
- remoteMethod(query) {
- if (query !== '') {
- setTimeout(() => {
- this.options = this.addressBookList.filter(item => {
- return item.email.toLowerCase()
- .indexOf(query.toLowerCase()) > -1;
- });
- }, 200);
- } else {
- this.options = [];
- }
- },
- selectBlur(e){
- let val = e.target.value;
- console.info("selectBlur:" + val);
- let that = this;
- let length = this.list.length;
- setTimeout(function (){
- let timeLength = that.list.length;
- if (length < timeLength){
- return;
- }
- if (isNotNull(val) && !that.list.includes(val)){
- that.list.push(val)
- }
- }, 200);
- }
- }
-
- }
- </script>
方法:isNotNull,只是判断是否为空的方法而已。
- /**
- ** 判断是否为空
- * @param val
- * @returns {boolean}
- */
- export function isNotNull(val){
- if (val == undefined || val == "" || val == null){
- return false;
- } else {
- return true;
- }
- }
相关问题解析:
el-select触发失去焦点事件,需要使用@blur.native.capture触发,只有@blur不行,非搞前端的,其中的原因没去详细了解。
selectBlur方法中,使用了setTimeout,是因为匹配到通讯录中的地址时,如果点击通讯录的地址,依然会触发失去焦点的事件,而获取到的值是输入的地址,而不是点击的通讯录地址。
所以,等待0.2秒,判断下list的值是否增加:
如果点击通讯录中的地址,list会增加一条记录,点击其他地方,list值不会增加。
即
如果list的值增加了,就忽略掉输入框中的值,
如果list没有增加,就添加输入框中的值。
其他的,应该是vue比较基础的,或者element有文档的,就不过多解释了
经过测试,符合项目需求,感觉还行,就记录一下,顺便分享一下
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。