vue.js移动选项卡组件的打包实践示例

这是vue.js系列文章的第二次。第一篇文章讲述了如何构建vue.js的开发环境，并计划在时间允许的情况下，按照进度制作一个完整的app。本文使用手写笔语法。至于为什么用手写笔代替sass，主要是因为手写笔来自Node.js社区。总之，手写笔是一个高效的CSS预处理器，它的具体用途超出了本文的范围。好了，废话少说。下面介绍如何封装tababr交换。

底部选项卡切换页面，使用vue中的路由，即vue-router

当我们安装vue-cli时，我们可以选择默认安装的vue-router。

安装后，打开我的项目。我们需要在路由器目录的index.vue中配置路由信息。具体配置信息如下

从上图可以看出，我们已经配置了4个子页面，其中重定向是配置默认组件的路由。

完成路由配置后，我们需要封装tab组件

因为选项卡组件属于基本组件，所以我们创建了一个新的文件夹选项卡，然后在选项卡文件夹下创建了一个新的tabbar组件和一个新的tababritem组件。让我们从封装tababritem组件开始

Tabbaritem包

我们知道tababritem有一个普通的显示图片，一个选中的图片，以及图片下的文字，其中属性id用来记录当前tababritem的组件名称，属性isRouter用来记录当前选择的是否是这个Tababritem。

模板a class=' m-tab bar-item ' : class=' { ' is-active ' : isaactive } ' @ click=' GoToRouter ' div class=' m-tab bar-item-icon ' v-show='！isaactive ' slot name=' icon-normal '/slot/div class=' m-tabbbar-item-icon ' v-show=' isaactive ' slot name=' icon-active '/slot/div class=' m-tabbbar-item-text ' slot/slot/div/a/template script type=' text/ecmascript-6 '导出默认值{ props : { id : { type 3: String }，isRouter: { type:布尔值，default$家长。$emit('tabbarActionEvent '，This.id) //判断是否是路由跳转This。$路由器。推(这个。id)}}}/scriptstylescoped lang=“手写笔”rel=“样式表/手写笔”。m-tab bar-项目flex: 1文本-对齐：中心。m-tabbar-item-icon padding-top : 5px padding-bottom 1px img width : 24px height : 2 4px . m-Tabbar-item-text font-size : 8pxcolor 3360 # 949494 . is-active . m-Tabbar-item-text color : # fa3e 25/style接下来，我们需要封装Tabbar，它需要包含tabbaritem，主要设置的样式绝对代码

tabbar包装

template div class=' m-tab bar ' slot/slot/div/template script type=' text/ecmascript-6 ' export default { }/script style作用域lang='stylus' rel='样式表/stylus '。m-tabbar显示： flex-direction :行位置：固定底部： 0左侧： 0右侧： 0宽度： 100%飞越： hi DDEN高度3360 50px背景： # FFF边界-TOP : 1 px solid # e4e4/Style最后，参考我们的app.vue中的tabbar组件，听听子类tabbar的点击方法

App.vue代码

模板div id='app '路由器-视图/路由器-视图m-tabbar @ tabbarActionEvent=' changeseselected value ' m-tabbar-item id=' Home ' :是outer=' isHome '！[](./assets/[emailprotected])！[](./assets/[emailprotected])首页/m-制表符条-项目m-制表符条-项目id='位置' :是外部='是位置'！[](./assets/[emailprotected])！[](./assets/[emailprotected])职位/m-标签栏-项目m-标签栏-项目id=' Message ' :是外部='是Message '！[](./assets/[emailprotected])！[](./assets/[emailprotected])消息/m-标签栏-项目m-标签栏-项目id=' Me ' :是外部=' IsMe '！[](./assets/[emailprotected])！[](./assets/[emailprotected])我/m-标签栏-项目/m-标签栏/div/模板脚本从' common/tab/tab.vue '导入mtabar从“常用/标签/标签栏-项目”导入mtabaritem导出默认{ name: 'app '，components: { mTabbar，mTabbarItem }，data () { return { isHome: true，isPosition: false，isMessage: false，isMe: false } }，methods : { changes selected value : }函数(elVaLue){ if(elVaLue==' Home '){ this。ishome=true } else { this。I some=false } if(elVaLue==' Position '){ this。Position=true } else { this。Message=true }否则{ this。is Message=false }如果(elValue==' Me '){这。Me=true } else { this。是我=假的。自此tababr已经封装完毕了，其中用到的tabbaritem图片，大家可以自己替换掉，下一篇，会提到导航部分的封装

最终运行效果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。