更新了2.0版本基本调试完善

14eb347c · wangruixin · 744de6d3 · 14eb347c · 14eb347c · 14eb347c
Commit 14eb347c authored Nov 18, 2019 by wangruixin
10 changed files
--- a/.gitignore
+++ b/.gitignore
 .DS_Store
 node_modules/
-dist/
+#dist/
 npm-debug.log
 yarn-error.log

--- a/README.md
+++ b/README.md
 # 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模板。
+#### 一、html模板
 ```
 <template>
-    <footer-bar 
+    <rye-footerbar
        :items='itemsssss'
        :showIcons='showIcons'
        :selected_id='selected_id'
        @change="changeeee"
    >
-    </footer-bar>
+    </rye-footerbar>
 <template>
 ```
 此处showIcons可以不传,默认为false(不适用阿里图标库).传入true可支持阿里图标库
-### 二、script标签
+#### 二、script标签
 (1)若不使用阿里图标库，则不需要传入showIcons，需要使用则传入true。(不过还是传一下最好不然可能会报错。。。。。）<br>
 (2)selected_id直接传入0即可,不必操作<br>
@@ -30,11 +62,7 @@
 ```
 <script>
-import FooterBar from  'simple-footerbar';
 export default {
-    components: {
-        FooterBar
-    },
    data(){
        return{
            showIcons:false, 
@@ -65,25 +93,19 @@ export default {
 <script>
 ```
-### 三、使用静态图片路径需注意
+#### 三、使用静态图片路径需注意
 - 如果是在assets目录下需要加require
    - 例: src_selected: require('../assets/首页-选中.png'),
 - 如果是static目录下静态图片则不用
    - 例:  src_selected:'static/首页-选中.png',
-### 四、vue路由
+#### 四、vue路由
 组件使用的webpack-simple搭建，引入后需要自己定义路由 直接把子路由路径在数据中心写入'push'字段即可，直接标签引入样式可以保持  但没有数据会报错 
-### 五、使用iconfont图标指南()
+#### 五、使用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/dist/simple-footerbar.js
+++ b/dist/simple-footerbar.js
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("simple-footerbar",[],t):"object"==typeof exports?exports["simple-footerbar"]=t():e["simple-footerbar"]=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=5)}([function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=r(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<e.length;o++){var a=e[o];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(e,t,n){function r(e){for(var t=0;t<e.length;t++){var n=e[t],r=d[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(i(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{for(var a=[],o=0;o<n.parts.length;o++)a.push(i(n.parts[o]));d[n.id]={id:n.id,refs:1,parts:a}}}}function o(){var e=document.createElement("style");return e.type="text/css",f.appendChild(e),e}function i(e){var t,n,r=document.querySelector("style["+m+'~="'+e.id+'"]');if(r){if(h)return v;r.parentNode.removeChild(r)}if(b){var i=p++;r=l||(l=o()),t=a.bind(null,r,i,!1),n=a.bind(null,r,i,!0)}else r=o(),t=s.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}function a(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=y(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function s(e,t){var n=t.css,r=t.media,o=t.sourceMap;if(r&&e.setAttribute("media",r),g.ssrId&&e.setAttribute(m,t.id),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var c="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!c)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=n(10),d={},f=c&&(document.head||document.getElementsByTagName("head")[0]),l=null,p=0,h=!1,v=function(){},g=null,m="data-vue-ssr-id",b="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,n,o){h=n,g=o||{};var i=u(e,t);return r(i),function(t){for(var n=[],o=0;o<i.length;o++){var a=i[o],s=d[a.id];s.refs--,n.push(s)}t?(i=u(e,t),r(i)):i=[];for(var o=0;o<n.length;o++){var s=n[o];if(0===s.refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete d[s.id]}}}};var y=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t,n,r,o,i){var a,s=e=e||{},c=typeof e.default;"object"!==c&&"function"!==c||(a=e,s=e.default);var u="function"==typeof s?s.options:s;t&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0),n&&(u.functional=!0),o&&(u._scopeId=o);var d;if(i?(d=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(i)},u._ssrRegister=d):r&&(d=r),d){var f=u.functional,l=f?u.render:u.beforeCreate;f?(u._injectStyles=d,u.render=function(e,t){return d.call(t),l(e,t)}):u.beforeCreate=l?[].concat(l,d):[d]}return{esModule:a,exports:s,options:u}}},function(e,t,n){"use strict";t.a={name:"RyeHeader"}},function(e,t,n){"use strict";t.a={name:"RyeFooterbar",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:!1},selected_id:{default:0,type:Number}},methods:{change:function(e,t){this.$router.push(e.push),this.$emit("change",t)}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(6),o=n(12),i=[o.a,r.a],a=function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];i.forEach(function(t,n){e.component(t.name,t)})};"undefined"!=typeof window&&window.Vue&&a(window.Vue),t.default={install:a,RyeFooterbar:o.a,RyeHeader:r.a}},function(e,t,n){"use strict";var r=n(7);"undefined"!=typeof window&&window.Vue&&window.Vue.use(r.a),r.a.install=function(e){e.component(r.a.name,r.a)},t.a=r.a},function(e,t,n){"use strict";function r(e){n(8)}var o=n(3),i=n(11),a=n(2),s=r,c=a(o.a,i.a,!1,s,"data-v-06280418",null);t.a=c.exports},function(e,t,n){var r=n(9);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("4513c5fa",r,!0,{})},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,".header[data-v-06280418]{width:100%;height:10vh;background:#6e70f0;background:#ffd500;font-size:3.8vh;text-align:center;vertical-align:center;position:relative}.header_div[data-v-06280418]{line-height:10vh}#left[data-v-06280418]{float:left;margin-left:5vw;color:#fff;position:absolute;left:0;top:0}#right[data-v-06280418]{float:right;margin-right:5vw;position:absolute;right:0;top:0}img[data-v-06280418]{margin-top:2.5vh;padding:10px,10px;width:5vh;height:5vh}",""])},function(e,t){e.exports=function(e,t){for(var n=[],r={},o=0;o<t.length;o++){var i=t[o],a=i[0],s=i[1],c=i[2],u=i[3],d={id:e+":"+o,css:s,media:c,sourceMap:u};r[a]?r[a].parts.push(d):n.push(r[a]={id:a,parts:[d]})}return n}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"header"},[n("div",{staticClass:"header_div"},[n("span",{attrs:{id:"left"}},[e._t("left")],2),e._v(" "),e._t("default",[e._v("欢迎使用header!")]),e._v(" "),n("span",{attrs:{id:"right"}},[e._t("right")],2)],2)])},o=[],i={render:r,staticRenderFns:o};t.a=i},function(e,t,n){"use strict";var r=n(13);"undefined"!=typeof window&&window.Vue&&window.Vue.use(r.a),r.a.install=function(e){e.component(r.a.name,r.a)},t.a=r.a},function(e,t,n){"use strict";function r(e){n(14)}var o=n(4),i=n(16),a=n(2),s=r,c=a(o.a,i.a,!1,s,"data-v-27494b82",null);t.a=c.exports},function(e,t,n){var r=n(15);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(1)("7b75bc83",r,!0,{})},function(e,t,n){t=e.exports=n(0)(!1),t.push([e.i,".footer[data-v-27494b82]{width:100%;height:10vh;display:flex;background:ivory;overflow:hidden;box-sizing:border-box;color:#bebebe;position:fixed;left:0;bottom:0;text-align:center}.bar[data-v-27494b82]{flex:1}.text[data-v-27494b82]{display:block;font-size:2.5vh}.on[data-v-27494b82]{color:#1989fa;background:#ddd}i[data-v-27494b82]{font-size:5vh}img[data-v-27494b82]{width:5vh;height:5vh}",""])},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"footer"},e._l(e.items,function(t,r){return n("div",{key:r,staticClass:"bar",class:[{on:e.selected_id===r}],on:{click:function(n){return e.change(t,r)}}},[n("i",{directives:[{name:"show",rawName:"v-show",value:e.showIcons,expression:"showIcons"}],class:t.icon}),e._v(" "),n("img",{directives:[{name:"show",rawName:"v-show",value:!e.showIcons,expression:"!showIcons"}],attrs:{src:r===e.selected_id?t.src_selected:t.src_unselected}}),e._v(" "),n("span",{staticClass:"text"},[e._v(e._s(t.name))])])}),0)},o=[],i={render:r,staticRenderFns:o};t.a=i}])});
\ No newline at end of file
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
  <meta charset="utf-8">
  <title>simple-footerbar</title>
-  </head>
+</head>
-  <body>
-    <div id="app"></div>
+<body>
+  <div id="app">
+    <header-npm id="header_later">
+      <span slot='left'>返回</span>
+      顶部栏
+      <span slot='right'><img src="./assets/添加.png" /></span>
+    </header-npm>
+    <footer-barnpm :items='itemsssss' :showIcons='showIcons' :selected_id='selected_id' @change="changeeee">
+    </footer-barnpm>
+  </div>
  <script src="/dist/simple-footerbar.js"></script>
-  </body>
+  <script>
+    new Vue({
+      el: '#app',
+      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
+        },
+      },
+    })
+  </script>
+</body>
 </html>
\ No newline at end of file
--- a/package.json
+++ b/package.json
 {
  "name": "simple-footerbar",
-  "description": "vue项目练习 footerbar底部导航栏",
+  "description": "vue项目练习 顶部与底部控件集",
-  "version": "2.0.0",
+  "version": "2.0.5",
  "author": "wangruixin <wrx@33.cn>",
  "license": "MIT",
  "private": false,

--- a/src/footerbar/footerbar.vue
+++ b/src/footerbar/footerbar.vue
@@ -16,7 +16,7 @@
 <script>
 export default {
-    name:'rye-footerbar',
+    name:'RyeFooterbar',
    props:{
        items:{
            type:Array,

--- a/src/footerbar/index.js
+++ b/src/footerbar/index.js
@@ -2,7 +2,8 @@ import RyeFooterbar from './footerbar';
 //判断是否有window对象( 如果是vue.min.js的话, 是不行的)
 if (typeof window !== 'undefined' && window.Vue) {
-    window.Vue.component('rye-footerbar', RyeFooterbar)
+    window.Vue.use(RyeFooterbar);
+    //window.Vue.component('rye-footerbar', RyeFooterbar)
 }
 //全局安装
 RyeFooterbar.install = function(Vue){

--- a/src/header/header.vue
+++ b/src/header/header.vue
@@ -14,7 +14,7 @@
 <script>
 export default {
-  name: "rye-header"
+  name: "RyeHeader"
 };
 </script>
 <style scoped>
@@ -22,6 +22,8 @@ export default {
  width: 100%;
  height: 10vh;
  background: rgb(110, 112, 240);
+  background:#ffd500;
  font-size: 3.8vh;
  text-align: center;
  vertical-align: center;

--- a/src/header/index.js
+++ b/src/header/index.js
-import RyeHeader from './heaader';
+import RyeHeader from './header';
 //判断是否有window对象( 如果是vue.min.js的话, 是不行的)
 if (typeof window !== 'undefined' && window.Vue) {
-    window.Vue.component('rye-header', RyeHeader)
+    window.Vue.use(RyeHeader);
+    //window.Vue.component('rye-header', RyeHeader)
 }
 //全局安装
 RyeHeader.install = function(Vue){

--- a/src/index.js
+++ b/src/index.js
@@ -5,12 +5,16 @@ const components = [
    RyeFooterbar,
    RyeHeader,
 ]
+const install = function (Vue, opts = {}) {
-const install = function(Vue, opts = {}) {
+  components.forEach((elem, i) => {
-  components.map(component => {
+    Vue.component(elem.name, elem);
-    Vue.component(component.name, component);
  })
 }
+//const install = function(Vue, opts = {}) {
+//  components.map(component => {
+//    Vue.component(component.name, component);
+//  })
+//}
 /* 支持使用标签的方式引入 */
 if (typeof window !== 'undefined' && window.Vue) {