Search

基础渲染

<template>
  <d-search @search="handlerSearch"></d-search>
</template>

<script>
  export default {
    methods: {
      handlerSearch() {
        alert();
      },
    },
  };
</script>

自定义右侧内容

搜索

<template>
  <d-search>
    <span slot="right">搜索</span>
  </d-search>
</template>

圆形搜索框

<template>
  <d-search shape="round"></d-search>
</template>

搜索框内容对齐

<template>
  <d-search shape="round" input-align="center"></d-search>
</template>

自定义背景色

请使用 CSS 自定义背景色。

<template>
  <d-search shape="round" :style="{ background: 'red' }"></d-search>
</template>

API

属性

名称	说明	类型	默认值
value v-model	输入框初始值	string
placeholder	输入框提示文案	string	请输入搜索关键字
shape	搜索框形状	square | round	square
inputAlign	输入框对齐方式	left | center | right	left

插槽

名称	说明	参数
right	搜索区域右侧内容	无

事件

名称	说明	参数
search	确定搜索时触发	名称 说明 类型 value 输入框当前的值 string
input	输入框内容变化时触发	名称 说明 类型 value 输入框当前的值 string
focus	输入框获得焦点时触发	名称 说明 类型 value 输入框当前的值 string
blur	输入框失去焦点时触发	名称 说明 类型 value 输入框当前的值 string
clear	点击清除按钮后触发	无

贡献者

无