uni-app开发：（源码级别）uni-badge样式修改（自定义插槽）

一、效果图需求说明：

二、源码 · 修改前后对比：

说明：
修改：仅仅对代码进行了标签更名（ <text> —> <view>），并额外增添加了插槽标签<slot></slot>
具体如下所示代码。

2.1. 修改前

<template><view class="uni-badge--x"><slot /><text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]" class="uni-badge" @click="onClick()">{{displayValue}}</text></view>
</template>

2.2. 修改后

<template><view class="uni-badge--x"><slot /><view v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]" class="uni-badge" @click="onClick()"><slot></slot>{{displayValue}}</view></view>
</template>

修改为<view>之后，请自行查看项目中已经调用该组件的页面是否出现布局或样式错乱？
如果没有，请继续下文。

三、调用代码：

文件来源：【博主自留项目》pages》user】

 <!-- 列表样式 --><view class="p-2 flex align-center border-bottom border-light-secondary"><image src="../../static/default.jpg" style="width: 100rpx;height: 100rpx;" class="rounded-circle mr-2"></image><view class="flex flex-column flex-1"><text class="font-md text-dark">昵称</text><uni-badge :text="24" type="error"></uni-badge></view><view class="uni-icon uni-icon-checkbox-filled text-light-muted"></view></view>

附件：uni-app官方组件源码（修改前）：

<template><view class="uni-badge--x"><slot /><text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]" class="uni-badge" @click="onClick()">{{displayValue}}</text></view>
</template><script>/*** Badge 数字角标* @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景* @tutorial https://ext.dcloud.net.cn/plugin?id=21* @property {String} text 角标内容* @property {String} type = [default|primary|success|warning|error] 颜色类型*     @value default 灰色*     @value primary 蓝色*     @value success 绿色*     @value warning 黄色*     @value error 红色* @property {String} size = [normal|small] Badge 大小*  @value normal 一般尺寸*    @value small 小尺寸* @property {String} inverted = [true|false] 是否无需背景颜色* @event {Function} click 点击 Badge 触发事件* @example <uni-badge text="1"></uni-badge>*/export default {name: 'UniBadge',emits: ['click'],props: {type: {type: String,default: 'default'},inverted: {type: Boolean,default: false},isDot: {type: Boolean,default: false},maxNum: {type: Number,default: 99},absolute: {type: String,default: ''},offset: {type: Array,default () {return [0, 0]}},text: {type: [String, Number],default: ''},size: {type: String,default: 'normal'},customStyle: {type: Object,default () {return {}}}},data() {return {};},computed: {width() {return String(this.text).length * 8 + 12},classNames() {const {inverted,type,size,absolute} = thisreturn [inverted ? 'uni-badge--' + type + '-inverted' : '','uni-badge--' + type,'uni-badge--' + size,absolute ? 'uni-badge--absolute' : '']},positionStyle() {if (!this.absolute) return {}let w = this.width / 2,h = 10if (this.isDot) {w = 5h = 5}const x = `${- w  + this.offset[0]}px`const y = `${- h + this.offset[1]}px`const whiteList = {rightTop: {right: x,top: y},rightBottom: {right: x,bottom: y},leftBottom: {left: x,bottom: y},leftTop: {left: x,top: y}}const match = whiteList[this.absolute]return match ? match : whiteList['rightTop']},badgeWidth() {return {width: `${this.width}px`}},dotStyle() {if (!this.isDot) return {}return {width: '10px',height: '10px',borderRadius: '10px'}},displayValue() {const {isDot,text,maxNum} = thisreturn isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)}},methods: {onClick() {this.$emit('click');}}};
</script><style scoped>.uni-badge--x {/* #ifdef APP-NVUE *//* #endif *//* #ifndef APP-NVUE */display: inline-block;/* #endif */position: relative;}.uni-badge--absolute {position: absolute;}.uni-badge {/* #ifndef APP-NVUE */display: flex;overflow: hidden;box-sizing: border-box;/* #endif */justify-content: center;flex-direction: row;height: 20px;line-height: 20px;color: #333;border-radius: 100px;background-color: #f1f1f1;background-color: transparent;text-align: center;font-family: "Helvetica Neue", Helvetica, sans-serif;font-size: 12px;/* #ifdef H5 */cursor: pointer;/* #endif */}.uni-badge--inverted {padding: 0 5px 0 0;color: #f1f1f1;}.uni-badge--default {color: #333;background-color: #f1f1f1;}.uni-badge--default-inverted {color: #999;background-color: transparent;}.uni-badge--primary {color: #fff;background-color: #007aff;}.uni-badge--primary-inverted {color: #007aff;background-color: transparent;}.uni-badge--success {color: #fff;background-color: #4cd964;}.uni-badge--success-inverted {color: #4cd964;background-color: transparent;}.uni-badge--warning {color: #fff;background-color: #f0ad4e;}.uni-badge--warning-inverted {color: #f0ad4e;background-color: transparent;}.uni-badge--error {color: #fff;background-color: #dd524d;}.uni-badge--error-inverted {color: #dd524d;background-color: transparent;}.uni-badge--small {transform: scale(0.8);transform-origin: center center;}
</style>

以上就是关于“ uni-app开发：（源码级别）uni-badge样式修改（自定义插槽） ”的全部内容。

uni-app开发：（源码级别）uni-badge样式修改（自定义插槽）相关推荐

新版金色UI萝卜影视APP系统源码+Java原生开发
正文: 新版金色UI萝卜影视APP系统源码+Java原生开发,当前这个版本,可以说这是目前以来很牛的一款源码,无论是流畅度,还是原生稳定性都是非常稳定的. 环境:Android Studio,纯Jav ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
最新仿网易优选APP商城源码+Vue开发全家桶
正文: 最新仿网易优选APP商城源码+Vue开发全家桶,源码采用Vue全家桶+mintUI+axios技术栈开发,只写了前端,后端采用网易商场抓包接口,也可以二次修改成自己的接口. 安装方法: 1.将 ...
Android源码级别开发
Android源码级别开发 1.课程简介(3) 1.系统开发概述 2.系统编译简介 3.源码查看工具 4.系统启动流程 5.Handler消息机制 6.AsyncTask原理系统架构的回顾(13) ...
2022外卖霸王餐程序、外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变自带账单在线支付提现等
2022外卖霸王餐程序.外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变自带账单在线支付提现等外卖霸王餐系统程序/H5/APP源码 2022最新霸王餐程序霸王餐程序/H5/A ...
2021最新外卖霸王餐小程序、外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变分销源码分享
2021最新外卖霸王餐小程序.外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变分销源码外卖霸王餐系统小程序/H5/APP源码 2021最新霸王餐小程序霸王餐小程序源码地址成品演 ...
小程序/app 商城源码发布（包括后台）
小程序/app 商城源码发布(包括后台)无任何隐瞒前端使用uniapp,后端使用thinkphp,开发简单好用的商城,可以生成为app,网站,公众号,小程序等, 这是一个直接可以商用的商城项目. ...
微信App支付源码坑注释
微信App支付源码&坑注释部分的代码,因为代码是copy的我自己代码,然后再进行部分的编辑和注释,所以在使用的时候有可能有欠缺,不过整体来说,应该不影响使用的.如果有疑问,可以留言.在微信A ...
这样的成品app直播源码到手一定会后悔
以前还是学生的时候,师哥告诉我说没有自己产品的公司不要进,纯外包的公司不要进,当时年轻气盛不觉得有什么不好,甚至觉得在高强度流水化作业的状态下更能锻炼人,后来真正入职以后才追悔莫及,一年后离职,再找工 ...

uni-app开发：（源码级别）uni-badge样式修改（自定义插槽）

文章目录

uni-app开发：（源码级别）uni-badge样式修改（自定义插槽）

一、效果图需求说明：

二、源码 · 修改前后对比：

2.1. 修改前

2.2. 修改后

三、调用代码：

附件：uni-app官方组件源码（修改前）：

uni-app开发：（源码级别）uni-badge样式修改（自定义插槽）相关推荐

最新文章

热门文章