uni-app：封装组件

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>

uni-app：封装组件相关推荐

uniapp实战项目（仿知识星球App) - - 封装组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
get request uni 参数_uni-app 环境配置，uni.request封装，接口配置，全局配置，接口调用的封装...
1.环境配置 (可参考uni-官网的环境配置) common文件夹下新建config.js let url_config = "" if(process.env.NODE_ENV ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
vue 封装组件供全局使用_vue 封装组件的基本操作
/**1.封装组件局部封装**/ // 1.创建组件构造器对象 const cpnC = Vue.extend({ template: ` <div> </div>` }) ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
什么是APP封装？APP封装有什么途径？
APP封装是形成APP成本最低的一种方式.你只需要拥有一个手机端的网址就可以通过一些技术处理封装成一个跨iOS和Android的APP,这个过程往往只需要几分钟.既节省时间又能节省开发的成本资金,所以 ...
蘑菇街App的组件化之路·续
原文:http://limboy.me/ios/2016/03/14/mgj-components-continued.html 蘑菇街 App 的组件化之路·续前几天在「移动学习分享群」分享了关于 ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...

uni-app：封装组件

uni-app：封装组件相关推荐

最新文章

热门文章