simple-footerbar v2.0.5

simple-footerbar

2.0版本全新升级为控件集，引入名为"simple-footbar" 后，
可以使用 包括 底部栏（支持切换、路由、选中高亮、自定义图片、使用阿里iconfont在线库），
顶部栏（支持插槽，左右侧边栏支持自定义图片） 在内的多个控件。
不过目前只有header和footerbar这两个~ 
名字还是simple-footerbar。

Install

npm install simple-footerbar

update tips

在本地测试时发现 直接npm update 不太行
需要手动更改package.json 版本 (可检查当前最新版本是啥) 
然后重新 使用install命令。

Qucik Start

【重要】全局引入：

在main.js里引入下面代码。引入之后，可以通过标签的方式，直接引入下面的header和footer组件。 需要注意，为了区分和显示，我们特别规定了下面两个组件标签的名字分别为rye-header与rye-footerbar，请额外注意。 注：引入需在定义Vue实例之前。

import SimpleFooterbar from 'simple-footerbar'
Vue.use(SimpleFooterbar);

使用header

(1) 简单使用: 全局引入之后, 直接使用，此时引入的顶部栏只有中心文字。

<rye-header>标题内容在这里写入</rye-header>

(2) 使用插槽以及图片引入，左右设置了具名插槽，也支持放入图片。

<rye-header id="header">
      <span slot='left'>返回</span>
      联系人
      <span slot='right'><img src="../assets/添加联系人.png" /></span>
</rye-header>

(3) 参数设置: 高度给了10vh，字体和图片是随着分辨率自适配的，可以在引入后重新给一个background/color等，来覆盖默认定义颜色。

使用footerbar

一、html模板

<template>
    <rye-footerbar
        :items='itemsssss'
        :showIcons='showIcons'
        :selected_id='selected_id'
        @change="changeeee"
    >
    </rye-footerbar>
<template>

此处showIcons可以不传,默认为false(不适用阿里图标库).传入true可支持阿里图标库

二、script标签

(1)若不使用阿里图标库，则不需要传入showIcons，需要使用则传入true。(不过还是传一下最好不然可能会报错。。。。。） (2)selected_id直接传入0即可,不必操作 (3)items一组数据，name中填写底部栏的名字,push内写路由子路径，src_selected需提供选中与未选中的图标页面链接。 (4)需要几栏则传入几栏,页面是flex布局会自动适配，响应式也适配移动端与pc页面

<script>
export default {
    data(){
        return{
            showIcons:false, 
            selected_id:0,
            itemsssss: [
            {
                name:'首页1',
                push:"/shouye1",
                // icon:'iconfont icon-shouye',
                src_selected:require('./assets/首页-选中.png'),
                src_unselected:require('./assets/首页-未选.png'),
            },{
                name:'首页2',
                push:"/shouye2",
                // icon:'iconfont icon-shouye',
                src_selected:require('./assets/首页-选中.png'),
                src_unselected:require('./assets/首页-未选.png'),
            }],
        }
    },
    //回调方法不可少，因为需要获取子组件id确定选中状态
    methods:{
        changeeee(index){
            this.selected_id=index;// selectid赋值了 然后同步子组件那边qwq
        }
    },
}
<script>

三、使用静态图片路径需注意

• 如果是在assets目录下需要加require
  • 例: src_selected: require('../assets/首页-选中.png'),
• 如果是static目录下静态图片则不用
  • 例: src_selected:'static/首页-选中.png',

四、vue路由

组件使用的webpack-simple搭建，引入后需要自己定义路由 直接把子路由路径在数据中心写入'push'字段即可，直接标签引入样式可以保持 但没有数据会报错

五、使用iconfont图标指南()

直接传入  icon:'iconfont icon-shouye', 
后面是icon名字即可。
可以直接link到在线链接，如<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1506652_gu6ynvavag7.css" > 
可查看博文教程 https://blog.csdn.net/JCAL123/article/details/99561835