被封装起来的底部栏源码

7d3a05ac · wangruixin · 7d3a05ac · 7d3a05ac · 7d3a05ac · 7d3a05ac
Commit 7d3a05ac authored Nov 14, 2019 by wangruixin
15 changed files
--- a/.babelrc
+++ b/.babelrc
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-3"
+  ]
+}
--- a/.editorconfig
+++ b/.editorconfig
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
--- a/README.md
+++ b/README.md
+# 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引用一下就好了 其他的也用不到
--- a/index.html
+++ b/index.html
+<!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>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "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"
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
+<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>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/首页-未选.png
+++ b/src/assets/首页-未选.png
--- a/src/assets/首页-选中.png
+++ b/src/assets/首页-选中.png
--- a/src/main.js
+++ b/src/main.js
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})
--- a/src/plugin/footerbar.vue
+++ b/src/plugin/footerbar.vue
+<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>
--- a/src/plugin/index.js
+++ b/src/plugin/index.js
+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
--- a/webpack.config.js
+++ b/webpack.config.js
+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'
+}