最近始终在学习Svelte常识。目前版本曾经到svelte3.x了。
明天给大家分享两个罕用的自定义组件Navbar+Tabbar。
svelte官网：https://svelte.dev/
在公共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精简了不少。不过遗憾的是，目前还没有找到全局引入组件的办法。如果大家有一些比拟好的办法，欢送留言交换。