uni-app 4.7封装头像组件

创建free-avart.vue文件

<template><image :src="src" mode="widthFix" :style="getStyle" :class="type"></image>
</template><script>export default{props:{size:{type:[String,Number],default:90},src:{type:String,default:""},type:{type:String,default:"rounded"}},computed:{getStyle(){return `width: ${this.size}rpx;height: ${this.size}rpx;`;}}}
</script><style>
</style>

在index.nvue中引入组件

// 第一步
import freeAvatar from '@/components/free-ui/free-avatar.vue';
// 第二步
components: {freeNavBar,freeAvatar},
// 第三步
<!-- 列表 --><block v-for="(item,index) in list" :key="index"><view class="flex align-center"><view class="flex align-center justify-center" style="width: 145rpx;"><free-avatar :src="item.avatar" size="92"></free-avatar></view><view class="flex flex-column border-bottom flex-1 py-3 pr-3 border-light-secondary"><view class="flex align-center justify-between mb-1"><text class="font-md">{{item.nickname}}</text><text class="font-sm text-light-muted">{{item.update_time|formateTime}}</text></view><text class="font text-ellipsis text-light-muted">{{item.data}}</text></view></view>

感谢大家观看，我们下次见。

uni-app 4.7封装头像组件相关推荐

封装 vue 组件的过程记录
在我们使用vue的开发过程中总会遇到这样的场景,封装自己的业务组件. 封装页面组件前要考虑几个问题: 1.该业务组件的使用场景 2.在什么条件下展示一些什么数据,数据类型是什么样的,及长度颜色等 3. ...
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 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
react native Android端保持APP后台运行--封装 Headless JS
react native Android端保持APP后台运行--封装 Headless JS 前些日子在做后台下载时踩了后台运行这个大坑,RN官网文档上面在安卓上提供了Headless JS方法,iO ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
封装Vue组件的原则及技巧
封装Vue组件的原则及技巧 Vue的组件系统 Vue组件的API主要包含三部分:prop.event.slot props表示组件接收的参数,最好用对象的写法,这样可以针对每个属性设置类型.默认值或自 ...

uni-app 4.7封装头像组件

uni-app 4.7封装头像组件相关推荐

最新文章

热门文章