尝鲜Vue3.0+Vite自定义导航栏+弹窗组件

前言

最近得空一直在捣鼓Vue3开发,想要快速上手,还是得写一些自定义组件。之前就有基于vue2.x写过一些自定义Navbar Tabbar及弹窗组件。于是就撸起袖子开整。

尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件

今天主要是给大家分享一些如何快速上手Vue3开发。

目前Vue3的最新版本是V3.0.4,star高达19.7K 。而且更新还很频繁。

尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件
# vue3官网
https://v3.vuejs.org/

# vue3中文网
https://v3.cn.vuejs.org/

# vue3仓库地址
https://github.com/vuejs/vue-next

# Vite构建工具
https://vite-design.surge.sh/

通过如下2种方法快速创建Vue3项目。

1、Vite构建工具

$ npm init vite-app 
$ cd 
$ npm install
$ npm run dev

如果安装了Vite脚手架 create-vite-app,也可以通过下面方法快速创建。

$ create-vite-app <project-name>
尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件

2、@vue/cli脚手架

通过CLI创建需要版本是V4.5以上。升级CLI,npm i @vue/cli -g

$ vue create <project-name>
# 选择 Vue3选项 即可
$ npm run serve
尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件

下面进入今天的主题,Vue3实现自定义导航栏 底部Tab 弹窗组件。

尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件

在components目录下新建headerBar.vue和tabBar.vue两个页面。

并新建一个components.js页面用于引入公共组件。

尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件

然后在main.js中注册即可。

尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件

1、自定义headerBar.vue

其实这个组件和vue2.x创建没啥区别。

<template>
    <div class="header-bar" :class="{\'fixed\': fixed, \'transparent fixed\': transparent}">
        <div class="header-bar__wrap flexbox flex-alignc" :style="{\'background\': bgcolor, \'color\': color, \'z-index\': zIndex}">
            
            <div class="action hdbar-action__left" v-if="back && back!=\'false\'" @click="$router.go(-1)">
                <slot name="backIco" /><slot name="backText" />
            div>

            
            <div class="hdbar-title" :class="{\'center\': center}">
                <template v-if="$slots.title">
                    <slot name="title" />
                template>
                <template v-else>
                    {{title}}
                template>
            div>

            
            <div class="action hdbar-action__search">
                <slot name="search" />
            div>

            
            <div class="action hdbar-action__right">
                <slot name="right" />
            div>
        div>
    div>
template>

<script>
    export default {
        props: {
            // 是否返回
            back: { type: [Boolean, String], default: true },
            // 标题
            title: { type: String, default: \'\' },
            // 标题颜色
            color: { type: String, default: \'#fff\' },
            // 背景颜色
            bgcolor: { type: String, default: \'#22d59c\' },
            // 标题是否居中
            center: { type: [Boolean, String], default: false },
            // 是否固定
            fixed: { type: [Boolean, String], default: false },
            // 背景透明
            transparent: { type: [Boolean, String], default: false },
            // 设置层级
            zIndex: { type: [Number, String], default: \'2020\' },
        }
    }
script>

支持自定义背景色、文字颜色、左侧图标、标题、搜索框,右侧支持图标|文字|图片。

尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件
尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件
<header-bar :back="true" bgcolor="#f9f9f9" color="#ff0" center transparent>
  <template #backIco><i class="iconfont icon-close">i>template>
  <template v-slot:backText>返回template>
  
  <template v-slot:title>
    <img src="~/assets/img/logo.png" height="16" /> <em>Vue3.0em>
  template>
  
  <template #right><i class="iconfont icon-search">i>template>
header-bar>

2、自定义tabBar.vue

这里的逻辑代码主要是在setup里处理。

<template>
    <div class="tab-bar" :class="{\'fixed\': fixed}">
        <div class="tab-bar__wrap flexbox flex-alignc" :style="{\'background\': bgcolor}">
            <div v-for="(item, index) in tabs" :key="index" class="navigator" :class="currentTabIndex == index ? \'on\' : \'\'" @click="switchTabs(index, item)">
                <div class="ico" :class="{\'dock\': item.dock}">
                    <i v-if="item.dock" class="dock-bg" :style="{\'background\': item.dockBg ? item.dockBg : activeColor}">i>
                    <i v-if="item.icon" class="iconfont" :class="item.icon" :style="{\'color\': (currentTabIndex == index && !item.dock ? activeColor : color), \'font-size\': item.iconSize}">i>
                    <img v-if="item.img" class="iconimg" :src="currentTabIndex == index && !item.dock ? item.activeImg : item.img" :style="{\'font-size\': item.iconSize}" />
                    <em v-if="item.badge" class="nuxt__badge">{{item.badge}}em>
                    <em v-if="item.dot" class="nuxt__badge-dot">em>
                div>
                <div class="txt" :style="{\'color\': (currentTabIndex == index ? activeColor: color)}">{{item.title}}div>
            div>
        div>
    div>
template>

<script>
import { ref } from \'vue\'
import { useRouter, useRoute } from \'vue-router\'
    export default {
        props: {
            current: { type: [Number, String], default: 0 },
            // 背景色
            bgcolor: { type: String, default: \'#fff\' },
            // 颜色
            color: { type: String, default: \'#999\' },
            // 激活颜色
            activeColor: { type: String, default: \'#22d59c\' },
            // 是否固定
            fixed: { type: [Boolean, String], default: false },
            // tab选项
            tabs: {
                type: Array,
                default: () => null
            },
        },
        emits: {
            click: null
        },
        setup(props, context) {
            const currentTabIndex = ref(props.current)
            const router = useRouter()
            const route = useRoute()

            // 匹配当前路由页面
            const _curPath = route.path
            props.tabs.map((item, index) => {
                if(item.path == _curPath) {
                    currentTabIndex.value = index
                }
            })

            const switchTabs = (index, item) => {
                currentTabIndex.value = index
                context.emit(\'click\', index)
                if(item.path) {
                    router.push(item.path)
                }
            }
            return {
                currentTabIndex,
                switchTabs,
            }
        }
    }
script>

支持自定义背景色、文字颜色|选中颜色、是否固定、点击选项(返回索引值)。

另外还支持dock效果,图标支持iconfont及图片。

尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件
<tab-bar bgcolor="#f9f9f9" color="#f00" @click="tabbarClicked" :tabs="[
  {
    icon: \'icon-home\', title: \'首页\', path: \'/index\',
  },
  {
    icon: \'icon-guanli\', title: \'管理\', path: \'/manage\'
    badge: 1
  },
  {
    icon: \'icon-fabu\', title: \'发布\',
    dock: true, dockBg: \'#f60\',
    iconSize: \'20px\',
  },
  {
    icon: \'icon-guanli\', title: \'联系人\',
    img: \'http://www.xxx.com/contact.jpg\',
    activeImg: \'http://www.xxx.com/contact_on.jpg\',
  },
  {
    icon: \'icon-me\', title: \'我的\',
    dot: true
  }]"
/>

// 点击事件
tabbarClicked(index) {
  console.log(\'tabbar索引值:\'   index)
}

3、自定义V3Popup组件

V3Popup 基于Vue3开发的一款集合Alert、Dialog、ActionSheet、Toast等功能的移动端Vue3.0弹出框组件。

尝鲜 Vue3.0 Vite 自定义导航栏 弹窗组件

支持标签式 函数式两种调用方式。

// 标签式调用
"showAlert"
  title="标题" 
  content="弹窗内容信息"
  type="ios"
  shadeClose="false"
  xclose
  z-index="2021"
  :btns="[
    {...},
    {...},
  ]"
/>
// 函数式调用
let $el = this.$v3popup({
  title: \'标题\',
  content: \'弹窗内容信息\',
  type: \'ios\',
  shadeClose: false,
  xclose: true,
  zIndex: 2021,
  btns: [
    {text: \'关闭\'},
    {
      text: \'确定\',
      style: \'color:#09f;\',
      click: () => {
        $el.close()
      }
    },
  ]
});

template模板写法和vue2.x没什么区别,主要是逻辑处理部分,既可以使用vue2.x的写法,也可以使用vue3的Composition API写法。

下面主要是使用Vue3写法实现逻辑。

注意:Vue3不支持div的slot插槽。

// 不支持
"content">div> // 支持 <template v-slot:content>显示自定义插槽内容!template> <template #content>显示自定义插槽内容!template>

ok,今天就分享到这里。篇幅有些长,感谢大家的阅读。

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/18336.html

发表评论

登录后才能评论