# @beisen/page

> 页面布局相关组件

Latest version **0.0.2-2** (published 2017-10-30) · 0 weekly downloads

## Install

```sh
npm install @beisen/page
pnpm add @beisen/page
yarn add @beisen/page
bun add @beisen/page
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2-2 |
| Published | 2017-10-30 |
| First published | 2017-09-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | liuqichao |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen/page
- npm.io page: https://npm.io/package/@beisen/page

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.3.3

## Recent versions

- 0.0.2-2 (latest) — 2017-10-30
- 0.0.2-1 — 2017-10-27
- 0.0.2 — 2017-10-12
- 0.0.1-8 — 2017-10-12
- 0.0.1-7 — 2017-09-06
- 0.0.1-6 — 2017-09-05
- 0.0.1-5 — 2017-09-05
- 0.0.1-4 — 2017-09-05
- 0.0.1-3 — 2017-09-04
- 0.0.1-2 — 2017-09-04
- 0.0.1-1 — 2017-09-01

## README

# @beisen/page

> 页面布局相关组件

## 运行

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

## 参数说明

### 组件 nav

参数名称 | 数据类型 | 参数含义
---|---|---
｀show｀ | Boolean | 是否显示该头部
｀title｀ | String | 头部中间显示文字
｀left-item｀ | Array | 左侧显示数据设置
｀right-item｀ | Array | 右侧侧显示数据设置
｀title-item｀ | Object | 中间显示数据设置
｀show-border｀ | Boolean | 是否显示地步边框
｀bg-color｀ | String | 头部显示的背景颜色
｀color｀ | String | 头部显示的文字颜色
｀after-update｀ | Function | 每次更新头部数据回调
｀after-show｀ | Function | 第一次显示头部数据回调

### 组件 nav 使用示例
```
///示例1
 <page-nav>
    <div slot='left'>
        <span class='left-item'>
            <i class='iconfont icon-arrow-left'></i>
        </span>
    </div>
    <div slot='center'>测试头部</div>
    <div slot='right'>
        <span class='right-item'>
            <i class='iconfont icon-more'></i>
        </span>
    </div>
</page-nav>

///示例2

// title 和title-item   二选一
var leftItem=[{
  icon: 'icon-arrow-left',
  text: '',
  handler: ()=>{} //点击回调
}];
var rightItem=[{
  icon: 'icon-more',
  text: '',
  handler: ()=>{}
}];
 <page-nav :left-item=leftItem :right-item=rightItem title="测试数据"／>


```


### 组件 nav

参数名称 | 数据类型 | 参数含义
---|---|---
｀placeholder｀ | String | 输入框placeholder默认文字
｀cancel-text｀ | String | 右侧取消按钮文字
｀blur｀ | Function | 输入框失去焦点焦点的回调事件
｀foucs｀ | Function | 输入框获取焦点的回调事件
｀change｀ | Function | 输入框文字改变的回调事件
｀clear-input｀ | Function | 清空输入框文字的回调事件
｀cancel｀ | Function | 点击取消的回调事件

### 组件 search-nav 使用示例
```
///示例
 <search-nav cancel-text='取消' 
            placeholder='请输入关键字搜索'
            :blur='handleBlur'
            :focus='handleFocus'
            :cancel='handleCancel'
            :change='handleChange'
            :clear-input='handleClearInput'/>
    
```

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