elementUI中input的使用

elementUI中input的使用

<template>
  <div style="padding:20px;">
    <el-card>
      <!-- clearable 可清空 -->
      <el-input
        v-model="basicInput"
        @change="changeInput"
        style="width:200px;"
        clearable
      ></el-input>
    </el-card>
    <el-card style="margin-top:20px;">
      <!-- show-password 密码框  -->
      <el-input
        placeholder="请输入密码"
        v-model="basicInput"
        show-password
        style="width:200px;"
      ></el-input>
    </el-card>
    <el-card style="margin-top:20px;">
      <!-- show-password 密码框  -->
      <el-input
        placeholder="请输入密码"
        v-model="basicInput"
        show-password
        style="width:200px;"
        size="small"
      >
        <template slot="prepend">Http://</template>
      </el-input>
    </el-card>
    <el-card style="margin-top:20px;">
      <!-- 
        带输入建议
        autocomplete 一个可带输入建议的输入框组件
        fetch-suggestions 一个返回输入建议的方法属性:
        如querySearch(queryString,cb),在该方法中输入建议准备好时通过cb(data)返回给autocomplete组件中
        -->
      <el-autocomplete
        placeholder="请输入内容"
        v-model="state"
        :fetch-suggestions="querySearch"
        style="width:300px;"
        size="small"
        @select="selectValue"
      >
        <!-- 可筛选出输入框中匹配的 -->
        <template slot-scope="{ item }">
          <div class="name">{{ item.value }}</div>
          <!-- <span class="addr">{{ item.address }}</span> -->
        </template>
      </el-autocomplete>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      basicInput: "",
      state: "",
      restaurants: [
        { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号",
        },
        {
          value: "新旺角茶餐厅",
          address: "上海市普陀区真北路988号创邑金沙谷6号楼113",
        },
        { value: "泷千家(天山西路店)", address: "天山西路438号" },
        {
          value: "胖仙女纸杯蛋糕（上海凌空店）",
          address: "上海市长宁区金钟路968号1幢18号楼一层商铺18-101",
        },
        { value: "贡茶", address: "上海市长宁区金钟路633号" },
        {
          value: "豪大大香鸡排超级奶爸",
          address: "上海市嘉定区曹安公路曹安路1685号",
        },
        {
          value: "茶芝兰（奶茶，手抓饼）",
          address: "上海市普陀区同普路1435号",
        },
        { value: "十二泷町", address: "上海市北翟路1444弄81号B幢-107" },
        { value: "星移浓缩咖啡", address: "上海市嘉定区新郁路817号" },
        { value: "阿姨奶茶/豪大大", address: "嘉定区曹安路1611号" },
        { value: "新麦甜四季甜品炸鸡", address: "嘉定区曹安公路2383弄55号" },
        {
          value: "Monica摩托主题咖啡店",
          address: "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F",
        },
        {
          value: "浮生若茶（凌空soho店）",
          address: "上海长宁区金钟路968号9号楼地下一层",
        },
      ],
    };
  },
  methods: {
    changeInput() {
      console.log("basicInput", this.basicInput);
    },
    querySearch(queryString, cb) {
      var restautants = this.restaurants;
      var results = queryString
        ? restautants.filter(this.createFilter(queryString))
        : restautants;
      cb(results);
    },
    createFilter(queryString) {
      return (restautant) => {
        return (
          restautant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    selectValue(item) {
      console.log("item", item);
    },
  },
};
</script>

<style lang="scss" scoped></style>

效果展示

参考elementUI