Press Plus

# TeamSearch

# Introduction

import PressTeamSearch from 'press-plus/press-team-search/press-team-search';

export default {
   components: {
     PressTeamSearch,
   }
}

# Code Demo

# Basic usage

<PressTeamSearch
   :team-list="teamList"
   :loading="loading"
   @search="onSearch"
   @clickTeam="onClickTeam"
   @clear="onClear"
   @focus="onFocus"
   @blur="onBlur"
/>

export default {
   data() {
     return {
       teamList: [],
       loading: false,
     }
   },
   methods: {
     onSearch() {},
     onClickTeam() {},
     onClear() {},
     onFocus() {},
     onBlur() {},
   }
}

# API

# Props

Parameters Description Type Default value
placeholder placeholder text string Search event name
custom-style custom style string -
default-search-words Default search content string -
loading Whether it is loading boolean false
show-content Whether to display search results, the default is a list boolean true
team-list team list array -

# Events

Event name Description Parameters
focus Input box focus searchWords
blur input box out of focus searchWords
search Click to search searchWords
clear Clear search content -
clickTeam click team team

# Slot

Name Description
content Search team list
other other search results

# teamList type

type ITeamList = Array<{
   team_id: string; // Need to be unique as key
   team_logo: string; // Team picture
   teamNameHtml: string; // HTML with team name highlighted
}>

# getHighLightHtml

Here is a method to obtain highlighted html, which can generate highlighted html based on previous content and search content.

import { getHighLightHtml } from 'press-plus/press-team-search/utils';

const teamName = '123123';
const searchWords = '1';


getHighLightHtml(teamName, searchWords, '#1181d7');
// <span style="color: #1181d7;">1</span>23<span style="color: #1181d7;">1</span>23

← MessageBoard →