0.0.2-2 • Published 7 years ago
@beisen/page v0.0.2-2
@beisen/page
页面布局相关组件
运行
# 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'/>