• 学习内容：
  1. el-input标签使用
  2. disabled，clearable，show-password，size,maxlength属性的使用
  3. prefix-icon，suffix-icon属性的使用
  4. textarea类型下autosize的使用
  5. 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>
# elementui
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

openEuler系统通过shell脚本安装openGauss 5.0.0企业版

avatar 华为云开发者联盟
cover

一文了解npm install -g和npm install --save-dev的关系

avatar 华为云开发者联盟
cover

【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（2）

avatar 华为云开发者联盟