# search-bar-vue2

> - [search-bar-vue2](#search-bar-vue2) - [Install](#install) - [Use](#use) - [Global component](#global-component) - [Local component](#local-component) - [props options](#props-options) - [Show](#show) - [License](#license)

Latest version **1.0.0** (published 2024-01-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install search-bar-vue2
pnpm add search-bar-vue2
yarn add search-bar-vue2
bun add search-bar-vue2
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2024-01-10 |
| First published | 2022-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 130.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | WenyaoL |
| Maintainers | wenyaol |
| Keywords | 浏览器搜索条, search-bar, browser search bar, Keyword Search, search-toolbar-vue2, search-bar-vue2 |

## Links

- npm: https://www.npmjs.com/package/search-bar-vue2
- npm.io page: https://npm.io/package/search-bar-vue2

## Recent versions

- 1.0.0 (latest) — 2024-01-10
- 0.2.1 — 2022-12-09
- 0.2.0 — 2022-12-08
- 0.1.3 — 2022-12-08
- 0.1.2 — 2022-12-08
- 0.1.1 — 2022-12-07
- 0.1.0 — 2022-12-07

## README

# search-bar-vue2


- [search-bar-vue2](#search-bar-vue2)
  - [Install](#install)
  - [Use](#use)
    - [Global component](#global-component)
    - [Local component](#local-component)
    - [props options](#props-options)
  - [Show](#show)
  - [License](#license)




## Install

```shell
npm install search-bar-vue2 --save
```



## Use

### Global component

```js
import SearchBar from 'search-bar-vue2'
Vue.use(SearchBar)
```



### Local component

```html
<template>
  <div>
    <search-bar :root="'#document'" 
                :highlightClass="'myHighLight'" 
                :selectedClass="'selected-highlight'" 
                :hiden.sync="showSearchBar"/>
    <button @click="searchClick()">搜索按钮</button>
    <div id="document">
        <!--文档-->
      <document/>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Document from './components/Document.vue';
import {SearchBar} from 'search-bar-vue2'
export default Vue.extend({
  name: 'App',
  components: {
    Document,
    SearchBar
  },
  data(){
    return{
      showSearchBar:false
    }
  },
  methods:{
    searchClick(){
      
      this.showSearchBar = !this.showSearchBar
      console.log("切换showSearchBar",this.showSearchBar);
    }
  }
});
</script>

<style>
.myHighLight{/*自定义高亮背景*/
  background-color: yellow;
}
.selected-highlight{/*自定义选中高亮背景*/
  background-color: yellowgreen;
}
</style>
```



### props options

| prop           | description                                                  | type    | default              |
| -------------- | ------------------------------------------------------------ | ------- | -------------------- |
| root           | Selector for element(will be put into docment.querySelector(root)) | string  | Must provide         |
| hiden.sync     | A bidirectional binding attribute to control the display and disappearance of the search bar | boolean | true                 |
| highlightClass | The className assigned by the highlighted block              | string  | "__highLight"        |
| selectedClass  | The className assigned by the selected block                 | string  | "selected-highlight" |

## Show

![searchBar](./doc/searchBar.png)

## License

MIT license

---
_Source: https://npm.io/package/search-bar-vue2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._