el-input入门学习

自律最差的编程狗

已于 2022-05-16 10:44:48 修改

阅读量6.7k

点赞数

分类专栏： element-ui 文章标签： elementui

于 2022-05-16 10:43:00 首次发布

原文链接：https://element.eleme.cn/#/zh-CN/component/input

版权

element-ui 专栏收录该内容

43 篇文章 21 订阅

订阅专栏

学习内容：

el-input标签使用
disabled，clearable，show-password，size,maxlength属性的使用
prefix-icon，suffix-icon属性的使用
textarea类型下autosize的使用
el-autocomplete标签实现获取建议功能（难点）

实现效果图
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <el-input v-model='inputData' :placeholder='textPlaceholder'></el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder' disabled></el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder' clearable></el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder' show-password></el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder' prefix-icon='el-icon-search' suffix-icon='el-icon-date'></i></el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder'><i slot='prefix' class='el-input__icon el-icon-search'></i><i slot='suffix' class='el-input__icon el-icon-date'></i></el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder' type='textarea'></el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder' type='textarea' autosize></el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder' type='textarea' :autosize={minRows:1,maxRows:4}></el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder'>
            <el-select slot='prepend' v-model='selectData'>
                <el-option v-for='item in optionList' :key='item.id' :label='item.value' :value='item.id'></el-option>
            </el-select>
            <el-button slot='append' icon='el-icon-search'></el-button>
        </el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder' suffix-icon='el-icon-date' size='small'></el-input>
        <el-autocomplete
            v-model='inputData'
            :placeholder='textPlaceholder'
            :fetch-suggestions='querySearch'
        >
        </el-autocomplete>
        <el-autocomplete
            v-model='inputData'
            :placeholder='textPlaceholder'
            :trigger-on-focus='false'
            :fetch-suggestions='querySearch'
        >
        </el-autocomplete>
        <el-autocomplete
            v-model='inputData'
            :placeholder='textPlaceholder'
            :fetch-suggestions='querySearch'
            suffix-icon='el-icon-edit'
        >
            <template slot-scope='{item}'>
                <div class='name'>{{item.value}}</div>
                <div class='addr'>{{item.address}}</div>
            </template>
        </el-autocomplete>
        <el-autocomplete
            v-model='inputData'
            :placeholder='textPlaceholder'
            :fetch-suggestions='querySearchAsync'

        >    
        </el-autocomplete>
        <el-input v-model='inputData' :placeholder='textPlaceholder' :maxlength='10' :show-word-limit='true'></el-input>
        <el-input v-model='inputData' :placeholder='textPlaceholder' :maxlength='50' :show-word-limit='true' type='textarea'></el-input>
    </div>
</body>
</html>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            textPlaceholder:'请输入内容',
            inputData:'',
            selectData:2,
            optionList:[
                {id:1,value:'甜啦啦',address:'xxx'},
                {id:2,value:'蜜雪冰城',address:'xxx'},
                {id:3,value:'奈雪的茶',address:'xxx'},
                {id:4,value:'辛巴克',address:'xxx'},
            ],
        },
        methods:{
            //lambda表达式增加了些许难度
            querySearch(searchData,callback){
                let returnData = searchData?this.optionList.filter(option=>option.value.toLowerCase().indexOf(searchData)==0):this.optionList
                callback(returnData)
            },
            //Async方法不停加载？？
            querySearchAsync(searchData,callback){
                let resultData = searchData?this.optionList.filter(option=>option.value.toLowerCase().indexOf(searchData)):this.optionList
                //不理解
                clearTimeout(this.timeout)
                this.timeout= setTimeout(()=>{
                    callback(resultData)
                },3000*Math.random())
            }
        }
    })
</script>

<style>
    .el-row{
        margin-bottom: 20px;
    }
    .el-select .el-input {
        width: 130px;
    }
    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }
</style>