# simple-footerbar

> vue项目练习 顶部与底部控件集

Latest version **2.0.5** (published 2019-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-footerbar
pnpm add simple-footerbar
yarn add simple-footerbar
bun add simple-footerbar
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2019-11-18 |
| First published | 2019-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 48.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | wangruixin |
| Maintainers | rye233 |

## Links

- npm: https://www.npmjs.com/package/simple-footerbar
- npm.io page: https://npm.io/package/simple-footerbar

## Dependencies (1)

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

## Recent versions

- 2.0.5 (latest) — 2019-11-18
- 2.0.4 — 2019-11-18
- 2.0.3 — 2019-11-18
- 2.0.2 — 2019-11-18
- 2.0.1 — 2019-11-18
- 2.0.0 — 2019-11-15
- 1.0.3 — 2019-11-14
- 1.0.2 — 2019-11-14
- 1.0.1 — 2019-11-14
- 1.0.0 — 2019-11-14

## README

# 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。(不过还是传一下最好不然可能会报错。。。。。）<br>
(2)selected_id直接传入0即可,不必操作<br>
(3)items一组数据，name中填写底部栏的名字,push内写路由子路径，src_selected需提供选中与未选中的图标页面链接。<br>
(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

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