view-L快速复制开发之vlTab

引言

view-L使用一个提高开发速度的组件，复制即用，不拖泥带水，直接是放在components组件，引用之后就可以了。不需要你在写代码。对接业务逻辑即刻。（后续继续更新，争取搞一个商城完整版出来）

使用前准备：

（1）、建立uniapp项目

（2）、选择基于vite-ts建立手机端项目

npx degit dcloudio/uni-preset-vue#vite-ts view-L

（3）、引用图标库，iconfont（引用位置为index.html）

<link rel="stylesheet" href="//at.alicdn.com/t/font_3367682_f9qpm5y3i2c.css" />

（3）、在src下建立文件加components文件夹，用于存放组件。

（4）、由于使用vue3.0建立项目，即建立一个hook来代替this。

截图：

 

 源码：

import { ComponentInternalInstance, getCurrentInstance } from 'vue'
/**
  * @Description: 上下文
  * 获取上下文
  * 全局挂载实例
  * 类似2.0的this相关
  * @author 老蒋
  * @param
  * @return
  * @createTime: 2022-1-7 10:52:40 ?F10: AM?
  * @Copyright by 老蒋注释
  */
export default function useCurrentInstance() {
  console.log(getCurrentInstance())
  const { appContext } = getCurrentInstance() as ComponentInternalInstance
  const globalProperties = appContext.config.globalProperties
  return {
    globalProperties
  }
}

1.组件名称

底部Tab

2.使用步骤

v-l-tab底部导航栏目源码：

<template>
	<view class="v-l-tab" :class="lineTopFlag?'v-l-tab-top-line':''">
		<view class="v-l-tab-cell"
			v-for="(item, index) in list"
			:key="index"
			:style="`color:${index === tabIndex?acColor:'#636363'}`"
			@tap="optionHandlerClick(item, index)">
			<view class="v-l-icon">
				<text class="iconfont tab-icon" :class="item.icon"></text>
				<text class="v-l-brage" v-if="brageFlag&&item.brage!==0">{{item.brage<99?item.brage:'99+'}}</text>
			</view>
			<view class="v-l-title">{{item.title}}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	/**
	  * @Description: v-l-Tab栏目组件
	  * @author 老蒋
	  * @param 数据
	  * @return 
	  * @createTime: 2022-4-29 12:05:23 ?F10: PM?
	  * @Copyright by 老蒋注释
	  */
	import { ref, reactive } from 'vue'
	import useCurrentInstance from '@/hooks/useCurrentInstance.ts'
	let tabIndex = ref(0)
	/* 定义类似this的hook */
	const { globalProperties } = useCurrentInstance()
	interface Props {
		list: {
			type: Array,
			default: 1
		},
		/* 是否显示数字 */
		brageFlag: boolean,
		/* 颜色风格 */
		acColor: String,
		/* 是否显示线条 */
		lineTopFlag: boolean
	}
	const props = withDefaults(defineProps<Props>(), {
		list: () => {
			return [
				{
					icon: 'icon-31shouyexuanzhong',
					code: 0,
					brage: 999,
					title: '首页'
				},
				{
					icon: 'icon-fenleiorguangchangorqitatianchong',
					code: 1,
					brage: 1,
					title: '商品分类'
				},
				{
					icon: 'icon-gouwuchefill',
					code: 2,
					brage: 0,
					title: '购物车'
				},
				{
					icon: 'icon-gerenzhongxin2',
					code: 3,
					brage: 0,
					title: '个人中心'
				}
			]
		},
		brageFlag: true,
		acColor: 'red',
		lineTopFlag: true
	})
	const $emit = defineEmits({
		optionHandlerClick: null
	})
	const optionHandlerClick = (item, index) => {
		tabIndex.value = index
		$emit('optionHandlerClick', item)
	}
	console.log('')
</script>

<style lang="less" scoped>
	.v-l-tab{
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: calc(env(safe-area-inset-bottom) / 2);
		.v-l-tab-cell{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #636363;
			.v-l-icon{
				position: relative;
				.tab-icon{
					font-size: 48rpx;
				}
				.v-l-brage{
					position: absolute;
					top: -4rpx;
					left: 100%;
					padding: 0 10rpx;
					border-radius: 100rpx;
					background-color: red;
					color: white;
					font-size: 24rpx;
				}
			}
			.v-l-title{
				font-size: 24rpx;
				line-height: 36rpx;
			}
		}
	}
	.v-l-tab-top-line{
		border-top: 1rpx solid rgba(0,0,0,0.1);
	}
</style>

3.使用方式

项目使用源码：

<template>
	<view class="content">
		<vl-tab></vl-tab>
		<vl-tab acColor="#00aaff" :brageFlag="false"></vl-tab>
		<vl-tab acColor="#00aaff"></vl-tab>
		<vl-tab acColor="#00aa00" :brageFlag="false" :lineTopFlag="false"></vl-tab>
		<vl-tab acColor="#00aa00" :brageFlag="false" :lineTopFlag="false" :list="list"></vl-tab>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import VlTab from '@/components/v-l-Tab/index.vue'
	const list = reactive([
		{
			icon: 'icon-31shouyexuanzhong',
			code: 0,
			brage: 999,
			title: '首页'
		},
		{
			icon: 'icon-fenleiorguangchangorqitatianchong',
			code: 1,
			brage: 1,
			title: '商品分类'
		},
		{
			icon: 'icon-gerenzhongxin2',
			code: 3,
			brage: 0,
			title: '个人中心'
		}
	])
</script>

截图展示：

4.技术语

复制粘贴