cv-autocomplete-load 带搜索功能输入框

简要

type属性为text的input
带有搜索功能的输入框，一般和表单配合使用，默认为实心白色背景。

示例

::: demo

<template>
  <div style="width: 520px">
    <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px">
      <h1>autocomplete 远程搜索</h1>
      <h3>默认有数据的</h3>
      <cv-autocomplete-base v-model="formData.search" :dataLists="settSearchData" />
      <h3>远程加载数据的</h3>
      <cv-autocomplete-load v-model="formData.testData" :compConfig="compConfig">
        <template #default="{ item }">
          <div style="display: flex">
            <div class="value">名称：{{ item.name }}</div>
            <div class="value">地址：{{ item.address }}</div>
            <div class="value">IP产品名称：{{ item.product_name }}</div>
            <div class="value">产品价格(天)：{{ item.product_price_sale }}</div>
          </div>
        </template>
      </cv-autocomplete-load>
    </div>
    <cv-btn-base @click="hanldeSubmit">按钮</cv-btn-base>
  </div>
</template>

<script>
const testData = [
  { name: '三全鲜食（北新泾店）', address: '长宁区新渔路144号' },
  { name: 'Hot honey 首尔炸鸡（仙霞路）', address: '上海市长宁区淞虹路661号' },
  { name: '新旺角茶餐厅', address: '你好三个' },
  { name: '泷千家(天山西路店)', address: '天山西路438号' },
  { name: '胖仙女纸杯蛋糕（上海凌空店）', address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
  { name: '贡茶', address: '上海市长宁区金钟路633号' },
  { name: '豪大大香鸡排超级奶爸', address: '上海市嘉定区曹安公路曹安路1685号' },
  { name: '茶芝兰（奶茶，手抓饼）', address: '上海市普陀区同普路1435号' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
  { name: '星移浓缩咖啡', address: '上海市嘉定区新郁路817号' }
];
function mock_function(param) {
  console.log('请求参数', param);
  let lastData = [];
  if (param.keyword) {
    let lastData = testData.find((item) => {
      return item.name.includes(param.keyword) || item.address.includes(param.keyword);
    });
  } else {
    lastData = testData;
  }
  let mockData = {
    msg: '请求mock数据成功',
    status: 200,
    pagesize: 10,
    page: 1,
    pagemax: 5,
    total: 5,
    data: lastData,
    ...param
  };
  return new Promise((resolve, reject) => {
    try {
      // resolve({
      //   data: d
      //   total: this.data1.length,
      // })
      return resolve(mockData);
    } catch {
      reject();
    }
  });
}
export default {
  data() {
    return {
      compConfig: {
        apiFunc: mock_function,
        where: {},
        // 搜索2个字段
        searchField: ['name', 'address']
      },
      settSearchData: testData,
      formData: {
        testData: null
      }
    };
  },
  methods: {
    hanldeSubmit() {
      console.log('baseForm的数据', this.formData);
    }
  }
};
</script>

:::

属性

属性名	类型	默认值	说明	可选值
placeholder	String	-	输入框占位文本	-
disabled	Boolen	false	是否禁止	-
v-model	String	-	数据双向绑定	-
size	String	-	尺寸	medium / small / mini
clearable	boolean	true	清空按钮	-
compConfig	Object	-	组件配置	-

• 属性 compConfig详情

属性名	类型	默认值	说明	可选值
apiFunc	Function	-	请求接口	-
searchField	Arrat	['value']	查找字段	-

属性

name	说明
-	预留了匿名插槽可以自定义按钮

事件

事件名	参数	说明