uni-app:封装组件_uni-app 封装组件-程序员宅基地

技术标签: 跨平台uni-app  前端  vue.js  javascript  

Vue封装组件
根据官方文档来做其实很简单,我这里记录一下注意点。

通过uni-app的easycom: 将组件引入精简为一步。只要组件安装在项目的 components 目录下,并符合
components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册,直接在页面中使用。

找到 components 目录,在下面创建你的组件目录和组件vue,要名称一致。

在这里插入图片描述
注意点:
props 可以是数组或对象,用于接收来自父组件的数据。HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。
也就是说你在封装组件里面的属性是contentText,在传值的时候就是content-text

这是我封装的空数据占位图,大家可以参考使用。

<template>
	<view class="fq-empty">
		<image src="/static/image/empty-view.png"></image>
		<text class="">{
    {
    emptyText}}</text>
	</view>
</template>

<script>
	export default {
    
		props: {
    
			// 检测类型 + 其他验证
			emptyText: {
    
				type: String,
				default: '什么都没有',
			}
		},
	}
</script>

<style>
	.fq-empty {
    
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 16px;
	}

	.fq-empty image {
    
		width: 300rpx;
		height: 300rpx;
		margin: 30rpx;
	}
</style>

使用案例

<!-- 无数据 -->
	<template v-else>
		 <fq-empty empty-text="暂无订单"></fq-empty>
	 </template>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wujakf/article/details/123107874

智能推荐

kvm迁移镜像启动报错(the CPU is incompatible with host CPU: Host CPU does not provide required features: fma)-程序员宅基地

文章浏览阅读4.1k次。这是因为两台宿主机的CPU类型不一致导致的,解决方法也很简单,将xml文件中的CPU类型改为与当前宿主机一致即可。(可以自己创建一个新的虚拟机,看配置文件取替换最为保险)1. 查看当前宿主机的CPU类型。2. 修改xml文件的CPU类型。3. 重新注册并启动虚拟机。_the cpu is incompatible with host cpu: host cpu does not provide required fe

PyCharm恢复初始设置-程序员宅基地

文章浏览阅读6.3k次。首先在用户目录下找到PyCharm的配置信息目录 ls -al ----列出文件,找到.PyCharm(版本)目录删除PyCharm的配置信息目录 rm -r ~/.Pycharm(版本)转载于:https://www.cnblogs.com/mengxinteriri/p/10330543.html..._pycharm reset 参数

Druid SQL解析原理以及使用(一)_利用 druid 改写 sql 方言-程序员宅基地

文章浏览阅读2.6w次,点赞28次,收藏78次。本篇文章主要以使用为主,比如通过解析分析一条SQL的组成来完成SQL改写等,现在流行的数据中间件中使用很广泛,Mycat、Dble等。Druid的SQL解析器主要有三部分组成,如下:1、Parser a、词法分析 b、语法分析2、AST(Abstract Syntax Tree,抽象语法树)3、Visitor1、什么是AST在计算机科..._利用 druid 改写 sql 方言

【C/C++】联合union的用法和说明_c++ union联合体的用法-程序员宅基地

文章浏览阅读1w次,点赞8次,收藏14次。看了几篇c语言中union的文章,整理记录一下============分=======隔=======线============1、什么是联合?“联合”是一种特殊的类,也是一种构造类型的数据结构。在一个“联合”内可以定义多种不同的数据类型, 一个被说明为该“联合”类型的变量中,允许装入该“联合”所定义的任何一种数据,这些数据共享同一段内存,已达到节省空间的目的(还有一个节省_c++ union联合体的用法

从零开始发送数字签名邮件-outlook&&163邮箱&&windows_邮件如何添加数字证书信息-程序员宅基地

文章浏览阅读4.6k次,点赞4次,收藏11次。1.申请数字证书大家可以从以下网站申请数字证书:中国数字认证网(http://www.ca365.com)天威诚信安全身份认证服务中心(http://www.itrus.com.cn)中国金融认证中心(http://www.cfca.com.cn)本文从该网站申请:https://www.gdca.com.cn/(1)首先点击GDCA免费邮件证书使用你的163邮箱申请;申请完毕..._邮件如何添加数字证书信息

怎样用机器人助手管理微信社群?_微信群机器人助手-程序员宅基地

文章浏览阅读663次。这一次我给大家带来了一款超好用的微信群机器人——webot社群助手!!添加webot社群助手,可以实现在后台简单化、批量化、快速化管理社群。它主要有以下几大功能。1.群数据统计webot社群助手拥有的群数据统计功能,它可以帮助你分析群人数走向,掌握进退群人数、群成员的发言数等。更神奇的是,可以将群内详细数据表格导出保存,方便永久储存查看。3.入群欢迎语Webot社群助手的入群欢迎语支持推送文字、图片、文字+图片3种形式的欢迎语。同时,Webot社群助手的入群欢迎语还可以设置多条欢迎语,新成员入_微信群机器人助手

随便推点

「VUE架构」axios请求application/x-www-form-urlencoded键值对参数问题-程序员宅基地

文章浏览阅读7.7k次,点赞6次,收藏8次。本文主要介绍axios请求类型application/x-www-form-urlencoded,后端获取不到键值对参数问题解决方案一:var qs = require('qs');this.axios.post("orgUserLogin", qs.stringify({ loginName: this.userName, loginPwd: this.passwor......

angr安装_mkvirtualenv --python=$(which python3) angr-程序员宅基地

文章浏览阅读3.4k次,点赞3次,收藏11次。1.安装依赖(基本开发环境):sudo apt-get install python-dev libffi-dev build-essential virtualenvwrapper2.virtualenvwrapper初始化:首先设置一个环境变量WORKON_HOMEexport WORKON_HOME=$HOME/Python-workhome这里的$HOME/Python-..._mkvirtualenv --python=$(which python3) angr

matlab 8fsk,MFSK蒙特卡洛仿真与理论误码率的对比-程序员宅基地

文章浏览阅读1.5k次。close all;clear;clc% MFSK的误码率仿真,M可变snrStart = 0;% snr初始值snrStep = 1; % 步长snrEnd = 15; % snr结束Nsnr =numel(snrStart:snrStep:snrEnd);% 仿真信噪比个数simNum = 100;% 仿真次数Nsym = 667;% Mfsk的符号数mcnt = 0;for mm =..._mfsk的误码率

【Linux】grep过滤、排除-程序员宅基地

文章浏览阅读3.8k次。cat test.sh | grep 123 | grep -v 456查看test.sh文件内容,过滤出123,排除掉456

安卓中一个字符串str1是否包含在另一个str2中,判断一个字符串是否为电话号码格式_androidstring是否包含另一个string-程序员宅基地

文章浏览阅读956次。public bool isMatch(String str1, String str2){ /* ��k�@ */ String strPattern = "(?i)"+str1; Pattern p = Pattern.compile(str2); Matcher m = p.matcher(small); return m.find();}_androidstring是否包含另一个string

matlab子系统,第7篇 Simulink子系统技术.ppt-程序员宅基地

文章浏览阅读530次。第7章 Simulink子系统技术 7.1 Simulink简单子系统概念:回顾与复习 7.2 Simulink高级子系统技术 7.3 Simulink的子系统封装技术 7.4 Simulink模块库技术 7.1 Simulink简单子系统概念:回顾与复习 7.1.1 通用子系统的生成 在使用Simulink子系统技术时,通常子系统的生成有如下两种..._matlab子系统触发

推荐文章

热门文章

相关标签