本文介绍: 【代码】【VUE】UniAPP之uview组件库，自定义tag封装，支持添加u-icon图标。
组件代码
<template>
<view class="tag" :class="[props.mode, props.shape]">
<slot name="left">
<!-- icon图标 没有传入图标时不显示 -->
<u-icon v-if="props.icon !== ''" :name="props.icon" :color="props.color" size="20" />
</slot>
{{ props.text }}
<slot name="right"></slot>
</view>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue'
const props = defineProps({
text: { //显示文本
type: String,
default: '自定义33'
},
color: { //颜色 主体颜色
type: String,
default: 'red'
},
mode: { //light dark / plain
type: String,
default: 'light'
},
shape: { //形状square circle / circleLeft / circleRight
type: String,
default: 'circle'
},
icon: { //icon图标
type: String,
default: ''
}
})
</script>
<style lang="scss" scoped>
$color: v-bind(color);
.tag {
padding: 8rpx 22rpx;
font-size: 20rpx;
// border-radius: 36rpx;
text-align: center;
position: relative;
z-index: 1;
&::before {
content: "";
display: block;
border-radius: 36rpx;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.07;
z-index: 0;
}
}
// 形状
.tag.circle {
border-radius: 36rpx;
}
.tag.circleLeft {
border-radius: 36rpx;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.tag.circleRight {
border-radius: 36rpx;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
// 模式
.tag.light {
color: $color;
border: 2rpx solid $color;
&::before {
background-color: $color;
}
}
.tag.light2 {
color: $color;
&::before {
background-color: $color;
}
}
.tag.light3 {
color: $color;
background-color: #fff;
&::before {
// background-color: #fff;
border: 1rpx solid $color;
}
}
.tag.dark {
color: #fff;
background-color: $color;
}
.tag.plain {
color: $color;
border: 2rpx solid $color;
}
</style>
使用案例
<tag text="分享" mode="light2" icon="zhuanfa" color="#3820d9" />
<tag text="重新生成" mode="light3" icon="reload" color="#000" />
效果展示
原文地址:https://blog.csdn.net/liulinet/article/details/136048808
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_67331.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
