@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'/>