【UniApp】-uni-app-自定义组件 - BNTang
source link: https://www.cnblogs.com/BNTang/p/17918769.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
【UniApp】-uni-app-自定义组件 - BNTang - 博客园
- 经过上个章节的介绍,大家可以了解到 uni-app-网络请求的基本使用方法
- 那本章节来给大家介绍一下 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 的不同,来设置不同的样式,这样就可以实现一个按钮,多种样式的效果了
- 我这个组件已经实现了,好了本文就到这里,下一篇文章我们就来写项目了
- 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
- 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力
__EOF__
Recommend
-
392
背景 最近在做跨平台框架的试点,选择了uni-app,并打算先在h5上开始试点。 由于uni-app提供的基于vue-cli的脚手架与我们内部的脚手架稍有些不同,直接使用稍微有点学习成本,所以fork了一下,稍作修改,做了一个内部版本的脚手架(主要就是将pub
-
34
背景 最近团队内部一直在试点用uni-app去做一些小需求,但主要是先在H5上做试点,之后再按计划编译成小程序去发布。这回分享几个遇到的小问题和解决方案。 下面说到的问题主要在用uni-app开发H5平台时才会遇到,非H5平台可忽略。 跨域的问题 首先,在本地
-
8
V2EX › 程序员 uni-app 多端小程序选择哪个组件库? han3sui · 10 小时 50 分钟前...
-
5
【uniapp实战笔记】使用uni-nav-bar自定义顶部状态栏和导航栏 原创 博读代码 2022-03-02 16...
-
5
开发的时候经常遇到问题,uniapp打包限制次数限制,超过次数好像是2元一次,同时对包的大小有限制的,一般不能超过40M,超过40M则需要缴费打包,好像十块钱一次,虽然不贵,但是长此以往也是一笔不小的费用,且不是解决根源问题的处理方式。所以推荐使用离线打包的方...
-
3
V2EX › Vue.js uni-app 需要使用像 uView 一类的组件库吗
-
3
Uniapp进行APP打包——iOS 系统 一、打包过程 1、创建唯一标识符 首先,申请苹果开发者账号。 没有苹果开发者账号是无法进行 ios 打包上线的。 (2) 进入
-
3
【UniApp】-uni-app-网络请求 - BNTang - 博客园
-
4
本文主要介绍苹果计算器项目中计算功能的实现 在前面...
-
4
『UniApp』uni-app-打包成App - BNTang - 博客园 ...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK