Vue组件 - 智能联想输入框

最新推荐文章于 2024-10-04 03:45:37 发布

weixin_34220963

最新推荐文章于 2024-10-04 03:45:37 发布

阅读量2.2k

点赞数 1

文章标签： javascript 测试 ViewUI

原文链接：https://segmentfault.com/a/1190000011173751

版权

本文介绍了一种在Vue框架下开发的智能输入框组件，旨在解决MVVM框架与传统双向数据绑定的兼容问题。组件功能包括：焦点显示备选项、模糊搜索、键盘操作选择、多选及自定义分隔符等。提供了组件封装、使用方法、实例代码及接口文档，后续计划支持更多自定义参数和数据验证。

摘要由CSDN通过智能技术生成

已经有很多成熟的智能输入框组件，如Form.js。但是现在MVVM框架，如vue、react的为了实现双向数据绑定会重绘所有的元素，这样就会难以兼容使用。所以笔者开发了Vue组件-智能输入框。

包含的功能大同小异：

获得焦点时显示所有备选项
失去焦点时隐藏备选项面板
输入字符后，检索可能的备选项
支持上下键和回车键进行选中
支持点击选中
支持多选
以逗号进行多选的分割

效果图:

图1：

图片描述

图2：

图片描述

智能输入框组件封装

将Vue组件封装到js文件中，smartInput.js:

// 智能输入框Vue组件
Vue.component('smart-input', {
    template: `<div class="friendSearchContainer">
        <input v-model="input" class="form-control smartInput"
            placeholder="输入文本自动检索，上下键选取，回车选中，可点选"
            data-toggle="tooltip" @click="init" @keydown="search" @blur="blur" />
        <ul v-show="searching" class="friendSearchList">
            <p v-if="!filtered.length">空数据</p>
            <li v-else v-for="(item, index) in filtered" @click.stop="clickOne">{
   { item }}</li>
        </ul>
        <div v-show="searching" class="friendSearchModal" @click="searching=false"></div>
    </div>`,
    // 接收list/multiple/value参数
    props: ['props'],
    data() {
        return {
            searching: false,
            timer: null,
            filtered: {},
            input: '',
            focusIndex: 0,
            invalidData: ''
        };
    },
    computed: {
        listLength() {
            return this.filtered.length;
        },
        key() {
            return /(?:.*,)*(.*)$/.exec(this.input)[1];
        }
    },
    mounted() {
        // 支持初始化参数值
        this.input = this.props.value || '';
    },
    methods: {
        // 调整联想搜索面板的大小和位置
        init(e) {
            this.searching = true;

最低0.47元/天解锁文章