Skip to content

F
footerbar_for_npm
Commit 7d3a05ac authored by wangruixin's avatar wangruixin
Browse files
Options

被封装起来的底部栏 源码

parents
Hide whitespace changes
Inline Side-by-side
Showing with 438 additions and 0 deletions
.babelrc 0 → 100644
View file @ 7d3a05ac
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
.editorconfig 0 → 100644
View file @ 7d3a05ac
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.gitignore 0 → 100644
View file @ 7d3a05ac
.DS_Store
node_modules/
dist/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
README.md 0 → 100644
View file @ 7d3a05ac
# simple-footerbar
## Install
npm install simple-footerbar
## Qucik Start
### 一、html模板。
```
<template>
<footer-bar
:items='itemsssss'
:showIcons='showIcons'
:selected_id='selected_id'
@change="changeeee"
>
</footer-bar>
<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>
import FooterBar from 'simple-footerbar';
export default {
components: {
FooterBar
},
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
## main.js 全局安装：
import FooterBar from 'simple-footerbar'
Vue.use(FooterBar)
然后在其他.vue文件里面，直接使用组件 <footerbar/> 即可
但是因为是底部导航栏 所以不推荐这种方式~ 还要传数据什么的 一般好像在App.vue引用一下就好了 其他的也用不到
index.html 0 → 100644
View file @ 7d3a05ac
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>simple-footerbar</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/simple-footerbar.js"></script>
</body>
</html>
package-lock.json 0 → 100644
View file @ 7d3a05ac
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 7d3a05ac
{
"name": "simple-footerbar",
"description": "vue项目练习 footerbar底部导航栏",
"version": "1.0.3",
"author": "wangruixin <wrx@33.cn>",
"license": "MIT",
"private": false,
"main":"/dist/simple-footerbar.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
src/App.vue 0 → 100644
View file @ 7d3a05ac
<template>
<div id="footer">
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1506652_gu6ynvavag7.css" >
<footer-barnpm
:items='itemsssss'
:showIcons='showIcons'
:selected_id='selected_id'
@change="changeeee"
>
</footer-barnpm>
</div>
</template>
<script>
import FooterBarnpm from "./plugin/footerbar";
export default {
components: {
FooterBarnpm
},
data(){
return{
selected_id:0,
showIcons:false, //这里其实也可以不传.
itemsssss: [
{
name:'首页',
push:"/shouye1",
icon:'iconfont icon-shouye',
src_selected:require('./assets/首页-选中.png'),
src_unselected:require('./assets/首页-未选.png'),
},
{
name:'首页',
push:"/shouye2",
icon:'iconfont icon-shouye',
src_selected: require('./assets/首页-选中.png'),
src_unselected:require('./assets/首页-未选.png'),
},
{
name:'首页',
push:"/shouye3",
icon:'iconfont icon-shouye',
src_selected:require('./assets/首页-选中.png'),
src_unselected:require('./assets/首页-未选.png'),
},
{
name:'首页',
push:"/shouye4",
icon:'iconfont icon-shouye',
src_selected:require('./assets/首页-选中.png'),
src_unselected:require('./assets/首页-未选.png'),
},
],
}
},
methods:{
changeeee(index){
this.selected_id=index;// selectid赋值了 然后同步给子组件那边qwq
}
// 这个index是多少呢....
// 是里面点击之后向外传递出来的
// 这个只是对接了 $emit里面的那句话罢了...
// 具体的参数还是要写的 怎么可以不写呢~
}
};
</script>
<style>
</style>
src/main.js 0 → 100644
View file @ 7d3a05ac
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
src/plugin/footerbar.vue 0 → 100644
View file @ 7d3a05ac
<template>
<div class="footer">
<div
class="bar"
v-for="(item,index) in items"
:key="index"
:class="[{on:selected_id===index}]"
@click="change(item,index)"
>
<i v-show="showIcons" :class="item.icon" />
<img :src="index===selected_id?item.src_selected:item.src_unselected" v-show="!showIcons" />
<span class="text">{{item.name}}</span>
</div>
</div>
</template>
<script>
export default {
name:'simple-footerbar',
props:{
items:{
type:Array,
default:function(){
return ([{
name:'选项1',
push:"/shouye1",
icon:'iconfont icon-shouye',
src_selected:'static/合同-选中.png',
src_unselected:'static/合同-未选.png',
},
{
name:'选项2',
push:"/shouye2",
icon:'iconfont icon-shouye',
src_selected:'static/合同-选中.png',
src_unselected:'static/合同-未选.png',
},
{
name:'选项3',
push:"/shouye3",
icon:'iconfont icon-shouye',
src_selected:'static/合同-选中.png',
src_unselected:'static/合同-未选.png',
}])
}
},
showIcons:{ // 选项 使用阿里云的库还是自己定义的图片 默认还是自己定义的图片
type:Boolean,
default:false,
},
selected_id:{
default:0,
type:Number,
},
},
methods:{
change(item,index){
this.$router.push(item.push);
this.$emit('change',index);
}
},
}
</script>
<style scoped>
*{
margin:0;
padding:0;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
.footer {
width: 100%;
height: 10vh;
display: flex;
background: #fffff0;
overflow: hidden;
box-sizing: border-box;
color: #bebebe;
position: fixed;
left: 0;
bottom: 0;
}
.bar {
flex: 1;
}
.text {
display: block;
font-size: 2.5vh;
}
.on {
color: rgb(25, 137, 250);
background: #DDDDDD;
}
i {
font-size: 5vh;
}
img {
width: 5vh;
height: 5vh;
}
</style>
src/plugin/index.js 0 → 100644
View file @ 7d3a05ac
import simpleFooterbar from './footerbar';
//判断是否有window对象( 如果是vue.min.js的话, 是不行的)
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component('simple-footerbar', simpleFooterbar)
}
//全局安装
simpleFooterbar.install = function(Vue){
Vue.component(simpleFooterbar.name, simpleFooterbar)
}
export default simpleFooterbar
\ No newline at end of file
webpack.config.js 0 → 100644
View file @ 7d3a05ac
var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV
module.exports = {
//entry: './src/main.js',
entry: NODE_ENV == 'development' ? './src/main.js': './src/plugin/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'simple-footerbar.js',
library: 'simple-footerbar',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
//devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
//module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}else{
module.exports.devtool = '#source-map'
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment