svelte自定義元件|導航條Navbar及選單欄Tabbar

最近一直在學習Svelte知識。目前版本已經到svelte3.x了。
今天給大家分享兩個常用的自定義元件Navbar+Tabbar。

在公共lib目錄下新建Headerbar及Tabbar元件。

引入元件

import HeaderBar from '$lib/HeaderBar.svelte';
import TabBar from '$lib/TabBar.svelte';

Svelte自定義導航條Navbar

<!-- //自定義HeaderBar元件 -->
<script>
    // 是否顯示回退按鈕
    export let back = true
    // 標題
    export let title = ''
    // 顏色
    export let color = '#fff'
    // 背景色
    export let bgcolor = '#22d59c'
    // 是否居中標題
    export let center = false
    // 是否固定
    export let fixed = false
    // 是否鏤空透明
    export let transparent = false
    // 層級
    export let zIndex = 2021

    function goBack() {
        console.log('go back')
        history.go(-1)
        // history.back(-1)
    }
</script>

<div class="header-bar" class:transparent class:fixed={transparent||fixed}>
    <div class="header-bar__wrap flexbox flex-alignc" style:color style:background={bgcolor} style:z-index={zIndex}>
        <!-- //返回 -->
        {#if back && back != 'false'}
            <div class="action hdbar-action__left" on:click={goBack}>
                <slot name="backIco" /><slot name="backText" />
            </div>
        {/if}

        <!-- //標題 -->
        <div class="hdbar-title" class:center>
            {#if $$slots.title}
                <slot name="title" />
            {:else}
                {@html title}
            {/if}
        </div>

        <!-- //搜尋框 -->
        <div class="action hdbar-action__search">
            <slot name="search" />
        </div>

        <!-- //右側 -->
        <div class="action hdbar-action__right">
            <slot name="right" />
        </div>
    </div>
</div>

如上圖：導航條支援 自定義背景(漸變色)、文字顏色、標題居中、搜尋框、沉浸式懸浮、是否固定及層疊 等功能。
還支援 自定義插槽 豐富元件功能，實現一些地址選擇、圓點提示、圖片等功能。

通過如下方式快速呼叫元件。

<HeaderBar bgcolor="#607d8b" color="#fff" title="Svelte自定義導航" center zIndex="6666">

<HeaderBar back="true" bgcolor="linear-gradient(to right, #4978ff, #17f532)" color="#e4ff00">
    <svelte:fragment slot="backIco"><i class="iconfont icon-close"></i></svelte:fragment>
    <svelte:fragment slot="search">
        <div class="flex-c flex1">
            <input class="ipt flex1" placeholder="Search..." value="搜尋關鍵字..." />
        </div>
    </svelte:fragment>
    <svelte:fragment slot="right">
        <div class="ml-20"><i class="iconfont icon-shoucang"></i></div>
        <div class="ml-20"><i class="iconfont icon-female"></i></div>
        <!-- <div class="ml-20"><img src="img/logo.png" height="12" /></div> -->
    </svelte:fragment>
</HeaderBar>

Svelte自定義選單欄Tabbar

/**
 * @Desc     Svelte自定義Tabbar元件
 * @Time     andy by 2022/3/12
 * @About    Q：282310962  wx：xy190310
 */
<script>
    // tab預設索引
    export let current = 0
    // 文字顏色
    export let color = '#999'
    // 背景色
    export let bgcolor = '#fff'
    // 啟用顏色
    export let activeColor = '#ff3e00'
    // 是否固定
    export let fixed = false
    // tab選項
    export let tabs = [
        {
            path: '/',
            icon: 'icon-face',
            title: '訊息',
            badge: 18,
        },
        {
            path: '/contact',
            // icon: 'icon-choose',
            img: 'https://img.yzcdn.cn/vant/user-inactive.png',
            activeImg: 'https://img.yzcdn.cn/vant/user-active.png',
            title: '聯絡人',
        },
        {
            path: '/me',
            icon: 'icon-female',
            title: '我',
            dot: true,
        }
    ]

    import { page } from '$app/stores'
    import { goto } from '$app/navigation'
    import { onMount, createEventDispatcher } from 'svelte'
    const dispatch = createEventDispatcher()

    $: currentTabIndex = current

    onMount(() => {
        console.log('路由：', $page)
        console.log('路由地址：', $page.url)
        const curPath = $page.url.pathname
        tabs.map((item, index) => {
            if(item.path == curPath) {
                currentTabIndex = index
            }
        })
    })

    function changeTabs(index, item) {
        currentTabIndex = index
        dispatch('click', index)
        if(item.path) {
            goto(item.path)
        }
    }
</script>

<div class="tab-bar" class:fixed>
    <div class="tab-bar__wrap flexbox flex-alignc" style="background: {bgcolor}">
        {#each tabs as item,i}
            <div class="navigator" class:on={currentTabIndex==i} on:click={changeTabs(i, item)}>
                <div class="ico" class:dock={item.dock}>
                    {#if item.dock}<i class="dock-bg" style:background={item.dockBg ? item.dockBg : activeColor}></i>{/if}
                    {#if item.icon}<i class={'iconfont '+item.icon} style:color={currentTabIndex == i && !item.dock ? activeColor : color} style:font-size={item.iconSize}></i>{/if}
                    {#if item.img}<img class="iconimg" src={currentTabIndex == i && !item.dock ? item.activeImg : item.img} style:font-size={item.iconSize} />{/if}
                    {#if item.badge}<em class="vui__badge">{@html item.badge}</em>{/if}
                    {#if item.dot}<em class="vui__badge-dot"></em>{/if}
                </div>
                <div class="txt" style:color={currentTabIndex == i ? activeColor : color}>{@html item.title}</div>
            </div>
        {/each}
    </div>
</div>

Tabbar.svelte 支援 自定義背景(漸變背景)、文字顏色|選中顏色、是否固定、中間按鈕dock凸起 等功能。

需要注意的是，svelte子元件向父元件傳遞事件需要引入事件觸發器。

import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()
dispatch('click', 999)

一頓操作下來，發現svelte開發元件確實比vue精簡了不少。不過遺憾的是，目前還沒有找到全域性引入元件的方法。如果大家有一些比較好的方法，歡迎留言交流。

svelte自定義元件|導航條Navbar及選單欄Tabbar

Svelte自定義導航條Navbar

Svelte自定義選單欄Tabbar

相關文章