Skip to content

F
footerbar_for_npm
Commit 14eb347c authored by wangruixin's avatar wangruixin
Browse files
Options

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

parent 744de6d3
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 40 deletions
.gitignore
View file @ 14eb347c
.DS_Store
node_modules/
dist/
#dist/
npm-debug.log
yarn-error.log
......
README.md
View file @ 14eb347c
# 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引用一下就好了 其他的也用不到
dist/simple-footerbar.js 0 → 100644
View file @ 14eb347c
!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
index.html
View file @ 14eb347c
<!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>
<head>
<meta charset="utf-8">
<title>simple-footerbar</title>
</head>
<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>
<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
package.json
View file @ 14eb347c
{
"name": "simple-footerbar",
"description": "vue项目练习 footerbar底部导航栏",
"version": "2.0.0",
"description": "vue项目练习 顶部与底部控件集",
"version": "2.0.5",
"author": "wangruixin <wrx@33.cn>",
"license": "MIT",
"private": false,
......
src/footerbar/footerbar.vue
View file @ 14eb347c
......@@ -16,7 +16,7 @@
<script>
export default {
name:'rye-footerbar',
name:'RyeFooterbar',
props:{
items:{
type:Array,
......
src/footerbar/index.js
View file @ 14eb347c
......@@ -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){
......
src/header/header.vue
View file @ 14eb347c
......@@ -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;
......
src/header/index.js
View file @ 14eb347c
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){
......
src/index.js
View file @ 14eb347c
......@@ -5,12 +5,16 @@ const components = [
RyeFooterbar,
RyeHeader,
]
const install = function(Vue, opts = {}) {
components.map(component => {
Vue.component(component.name, component);
const install = function (Vue, opts = {}) {
components.forEach((elem, i) => {
Vue.component(elem.name, elem);
})
}
//const install = function(Vue, opts = {}) {
// components.map(component => {
// Vue.component(component.name, component);
// })
//}
/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
......
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