【UniApp】-uni-app -自定义组件

风晓 2023-12-29 10:41:54  49481 赞同 0 反对 0

分类：资源

本章节来给大家介绍一下 uni-app-自定义组件的基本使用方法原本打算是直接写项目的，在写项目之前还有个内容需要我在码一篇文章，所以就先码这篇文章了本章节的内容比较简单，大家可以快速的过一遍，然后在项目中使用就是自定义组件，虽然 UniApp 是基于 Vue 的，但是在使用自定义组件的时候，还是有一些需要注意的地方，所以本章节就来给大家介绍一下

步入正题

首先我们打开官方文档：https://uniapp.dcloud.net.cn/component/#easycom
在 UniApp 的组件当中，有一个 easycom 的组件规范，只要你遵循了这个规范，就可以进行自定义组件

那么遵循了这个规范又有什么好处呢？

传统 vue 组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom 将其精简为一步
只要组件安装在项目的 components 目录下或 uni_modules 目录下，并符合 components/组件名称/组件名称.(vue|uvue) 就可以不用引用、注册，直接在页面中使用

目录结构注意：当同时存在 vue 和 uvue 时，uni-app 项目优先使用 vue 文件，而 uni-app x 项目优先使用 uvue 文件

好了，知道了 UniApp 中有这么一个规范之后，我们来试一下，看是不是就可以如此简单的使用自定义组件了

首先我们在项目的 components 目录下创建一个 ITButton 文件夹
然后在 ITButton 文件夹下创建一个 ITButton.vue 文件

ITButton.vue

<template>
	<view :class="['it-btn', type]">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'default'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.it-btn {
		width: 400rpx;
		height: 150rpx;
		line-height: 150rpx;
		font-size: 40rpx;
		text-align: center;
	}

	.default {
		background-color: gray;
	}

	.warn {
		background-color: red;
	}

	.primary {
		background-color: deepskyblue;
	}
</style>

到这，我们自定义组件创建好了，官方介绍，只要我们遵循了这个规范，就可以不用引用、注册，直接在页面中使用，那么我们就来试一下：

在 index.vue 中使用

index.vue

<template>
	<view>
		<ITButton type="primary">我是自定义按钮哦</ITButton>
	</view>
</template>

然后我们运行一下，看看效果

很完美哦，我们就不用引用、注册，就可以直接在页面中使用了
可以根据 type 的不同，来设置不同的样式，这样就可以实现一个按钮，多种样式的效果了
我这个组件已经实现了，好了本文就到这里，下一篇文章我们就来写项目了

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

相关资源

JAVA多线程——自定义显示锁BooleanLock 2023-12-30 52201 浏览
synchronized是java多线程里面一个比较很重要的关键字，它提供了一种排他式的同步机制，在某个时间内，如果其中一个线程获取了锁，那么其他线程试图获取锁，就会进入阻塞状态，等到某个线程释放了锁才能获取锁。
自定义Graph Component：1-开发指南 2024-01-02 51907 浏览
可以使用自定义NLU组件和策略扩展Rasa，本文提供了如何开发自己的自定义Graph Component指南。 Rasa提供各种开箱即用的NLU组件和策略。可以使用自定义Graph Component对其进行自定义或从头开始创建自己的组件。
C++ Qt开发：自定义Dialog对话框组件 2023-12-30 52115 浏览
Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍自定义Dialog组件的常用方法及灵活运用。在之前的文章中笔者已经为大家展示了默认Dialog组件的使用方法，虽然内置组件支持对数据的输入，但有时候我们需要一次性输入多个数据，此时如果之使用默认模态对话框似乎不太够用，此时我们需要自己创建一个自定义对话框，需要说明的是此类对话框也是一种窗体，所以可以在其上面放置任何通用组件，以实现更多复杂的开发需求。 自定义对话框需要解决的问题是，如何让父窗体与子窗体进行数据交换，要实现数据的交换有两种方式，第一种方式是通过动态加载模态对话框，当用户点击确定后通过GetValue()来拿到数据，而第二种方式则是通过发送信号的方式将数据投递给父窗体，这两种方式都可以，读者可根据自身需求来选择不同的通信方式。
Python 自定义函数的基本步骤 2023-12-28 48257 浏览
Python 自定义函数
打印机--自定义纸张大小 2023-12-28 52574 浏览
适用范围本文以Windows 2000和 Windows 98系统为背景，举例说明了HP LaserJet 6L打印机打印自定义纸型的设置方法。惠普其他激光打印机在Windows 98、Me、2000、Xp、2003中打印自定义纸型的设置方法也可参考本文。
自定义异常 2023-12-28 53083 浏览
对于除数是负数也视为错误的。0也是错误的。都是无法进行运算的。那么这个异常怎么定义呢？ 自定义异常的类首先要继承一下 Exception类。然后自定义一下异常的信息。然后需要实现的类的方法去throws 这个自定义异常的类名就可以了
C++ Qt开发：QItemDelegate自定义代理组件 2023-12-30 52708 浏览
Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍QStyledItemDelegate自定义代理组件的常用方法及灵活运用。
Kernel Memory 入门系列：自定义处理流程 2023-12-30 49546 浏览
在整个文档预处理的流程中，涉及到很多的处理步骤，例如：文本提取，文本分片，向量化和存储。这些步骤是Kernel Memory中的默认提供的处理方法，如果有一些其他的需求，也可以进行过程的自定义。
C++自定义迭代器 2023-12-31 47524 浏览
迭代器对于任何自定义的类序列都是一个强大的附加工具。它允许我们将算法运用到有自定义类元素的容器上。可能会出现一种情形，没有可以满足我们需要的标准 STL 容器，这时候就需要定义一个自己的容器。我们的容器类可能需要迭代器。通过深入理解什么样的类(定义了迭代器)才能被 STL 所接受，可以让我们了解到 STL 内部发生了些什么。
【Python】【 OpenCV】边缘检测和创建自定义核 2023-12-29 50833 浏览
对于使用OpenCV已有的算子，我们还可以自定义卷积核以达到不同的效果。

【UniApp】-uni-app -自定义组件

步入正题

相关资源

关注我们