tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增组件 tags course页面绘制

Browse Source
This commit is contained in:
yanghang
2025-06-19 14:20:53 +08:00
parent 514bea374a
commit 2a08429c97
8 changed files with 735 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/uni_modules/uv-tags/changelog.md
+10
View File
@@ -0,0 +1,10 @@
## 1.0.3（2023-10-02）
1. 兼容customStyle参数
2. 优化
## 1.0.2（2023-07-31）
1. nvue模式下增加cell-child参数，避免在list中使用出现回收后不显示的BUG
## 1.0.1（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.0（2023-05-10）
uv-tags 标签
src/uni_modules/uv-tags/components/uv-tags/props.js
+95
View File
@@ -0,0 +1,95 @@
export default {
props: {
// 标签类型info、primary、success、warning、error
type: {
type: String,
default: 'primary'
},
// 不可用
disabled: {
type: [Boolean, String],
default: false
},
// 标签的大小，large，medium，mini
size: {
type: String,
default: 'medium'
},
// tag的形状，circle（两边半圆形）, square（方形，带圆角）
shape: {
type: String,
default: 'square'
},
// 标签文字
text: {
type: [String, Number],
default: ''
},
// 背景颜色，默认为空字符串，即不处理
bgColor: {
type: String,
default: ''
},
// 标签字体颜色，默认为空字符串，即不处理
color: {
type: String,
default: ''
},
// 标签的边框颜色
borderColor: {
type: String,
default: ''
},
// 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
name: {
type: [String, Number],
default: ''
},
// 镂空时是否填充背景色
plainFill: {
type: Boolean,
default: false
},
// 是否镂空
plain: {
type: Boolean,
default: false
},
// 是否可关闭
closable: {
type: Boolean,
default: false
},
// 关闭按钮图标的颜色
closeColor: {
type: String,
default: '#C6C7CB'
},
// 关闭按钮图标的位置 right（右边）right-top（右上） 默认right-top
closePlace: {
type: String,
default: 'right-top'
},
// 是否显示
show: {
type: Boolean,
default: true
},
// 内置图标，或绝对路径的图片
icon: {
type: String,
default: ''
},
// 图标颜色
iconColor: {
type: String,
default: ''
},
// nvue模式下 是否直接显示，在uv-list等cell下面使用就需要设置
cellChild: {
type: Boolean,
default: false
},
...uni.$uv?.props?.tags
}
}
src/uni_modules/uv-tags/components/uv-tags/uv-tags.vue
+379
View File
@@ -0,0 +1,379 @@
<template>
<uv-transition
mode="fade"
:show="show"
:cell-child="cellChild"
>
<view class="uv-tags-wrapper">
<view
class="uv-tags"
:class="[`uv-tags--${shape}`, !plain && `uv-tags--${type}`, plain && `uv-tags--${type}--plain`, `uv-tags--${size}`,`uv-tags--${size}--${closePlace}`, plain && plainFill && `uv-tags--${type}--plain--fill`]"
@tap.stop="clickHandler"
:style="[{
marginRight: closable&& closePlace=='right-top' ? '10px' : 0,
marginTop: closable && closePlace=='right-top' ? '10px' : 0,
}, style, $uv.addStyle(customStyle)]"
>
<slot name="icon">
<view
class="uv-tags__icon"
v-if="icon"
>
<image
v-if="$uv.test.image(icon)"
:src="icon"
:style="[imgStyle]"
></image>
<uv-icon
v-else
:color="elIconColor"
:name="icon"
:size="iconSize"
></uv-icon>
</view>
</slot>
<text
class="uv-tags__text"
:style="[textColor]"
:class="[`uv-tags__text--${type}`, plain && `uv-tags__text--${type}--plain`, `uv-tags__text--${size}`]"
>{{ text }}</text>
<view
class="uv-tags__close"
:class="[`uv-tags__close--${size}`,`uv-tags__close--${closePlace}`]"
v-if="closable && closePlace=='right'"
@tap.stop="closeHandler"
:style="{backgroundColor: closeColor}"
>
<uv-icon
name="close"
:size="closeSize"
color="#ffffff"
></uv-icon>
</view>
</view>
<view
class="uv-tags__close"
:class="[`uv-tags__close--${size}`,`uv-tags__close--${closePlace}`]"
v-if="closable && closePlace=='right-top'"
@tap.stop="closeHandler"
:style="{backgroundColor: closeColor}"
>
<uv-icon
name="close"
:size="closeSize"
color="#ffffff"
></uv-icon>
</view>
</view>
</uv-transition>
</template>
<script>
import { image } from '@/uni_modules/uv-ui-tools/libs/function/test.js'
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* Tag 标签
* @description tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
* @tutorial https://www.uvui.cn/components/tag.html
* @property {String} type 标签类型info、primary、success、warning、error （默认 'primary' ）
* @property {Boolean | String} disabled 不可用（默认 false ）
* @property {String} size 标签的大小，large，medium，mini （默认 'medium' ）
* @property {String} shape tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
* @property {String | Number} text 标签的文字内容
* @property {String} bgColor 背景颜色，默认为空字符串，即不处理
* @property {String} color 标签字体颜色，默认为空字符串，即不处理
* @property {String} borderColor 镂空形式标签的边框颜色
* @property {String} closeColor 关闭按钮图标的颜色（默认 #C6C7CB）
* @property {String | Number} name 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
* @property {Boolean} plainFill 镂空时是否填充背景色（默认 false ）
* @property {Boolean} plain 是否镂空（默认 false ）
* @property {Boolean} closable 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
* @property {Boolean} show 标签显示与否（默认 true ）
* @property {String} icon 内置图标，或绝对路径的图片
* @event {Function(index)} click 点击标签时触发 index: 传递的index参数值
* @event {Function(index)} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值
* @example <uv-tags text="标签" type="error" plain plainFill></uv-tags>
*/
export default {
name: 'uv-tags',
emits: ['click','close'],
mixins: [mpMixin, mixin, props],
computed: {
style() {
const style = {}
if (this.bgColor) {
style.backgroundColor = this.bgColor
}
if (this.color) {
style.color = this.color
}
if(this.borderColor) {
style.borderColor = this.borderColor
}
return style
},
// nvue下，文本颜色无法继承父元素
textColor() {
const style = {}
if (this.color) {
style.color = this.color
}
return style
},
imgStyle() {
const width = this.size === 'large' ? '17px' : this.size === 'medium' ? '15px' : '13px'
return {
width,
height: width
}
},
// 文本的样式
closeSize() {
const size = this.size === 'large' ? 15 : this.size === 'medium' ? 13 : 12
return size
},
// 图标大小
iconSize() {
const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16
return size
},
// 图标颜色
elIconColor() {
return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff'
}
},
methods: {
// 点击关闭按钮
closeHandler() {
this.$emit('close', this.name)
},
// 点击标签
clickHandler() {
this.$emit('click', this.name)
}
}
}
</script>
<style lang="scss" scoped >
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-tags-wrapper {
position: relative;
}
.uv-tags {
@include flex;
align-items: center;
border-style: solid;
&--circle {
border-radius: 100px;
}
&--square {
border-radius: 3px;
}
&__icon {
margin-right: 4px;
}
&__text {
&--mini {
font-size: 12px;
line-height: 12px;
}
&--medium {
font-size: 13px;
line-height: 13px;
}
&--large {
font-size: 15px;
line-height: 15px;
}
}
&--mini {
height: 22px;
line-height: 22px;
padding: 0 5px;
&--right {
padding-right: 2px;
}
}
&--medium {
height: 26px;
line-height: 22px;
padding: 0 10px;
&--right {
padding: 0 4px 0 8px;
}
}
&--large {
height: 32px;
line-height: 32px;
padding: 0 15px;
&--right {
padding: 0 4px 0 8px;
}
}
&--primary {
background-color: $uv-primary;
border-width: 1px;
border-color: $uv-primary;
}
&--primary--plain {
border-width: 1px;
border-color: $uv-primary;
}
&--primary--plain--fill {
background-color: #ecf5ff;
}
&__text--primary {
color: #FFFFFF;
}
&__text--primary--plain {
color: $uv-primary;
}
&--error {
background-color: $uv-error;
border-width: 1px;
border-color: $uv-error;
}
&--error--plain {
border-width: 1px;
border-color: $uv-error;
}
&--error--plain--fill {
background-color: #fef0f0;
}
&__text--error {
color: #FFFFFF;
}
&__text--error--plain {
color: $uv-error;
}
&--warning {
background-color: $uv-warning;
border-width: 1px;
border-color: $uv-warning;
}
&--warning--plain {
border-width: 1px;
border-color: $uv-warning;
}
&--warning--plain--fill {
background-color: #fdf6ec;
}
&__text--warning {
color: #FFFFFF;
}
&__text--warning--plain {
color: $uv-warning;
}
&--success {
background-color: $uv-success;
border-width: 1px;
border-color: $uv-success;
}
&--success--plain {
border-width: 1px;
border-color: $uv-success;
}
&--success--plain--fill {
background-color: #f5fff0;
}
&__text--success {
color: #FFFFFF;
}
&__text--success--plain {
color: $uv-success;
}
&--info {
background-color: $uv-info;
border-width: 1px;
border-color: $uv-info;
}
&--info--plain {
border-width: 1px;
border-color: $uv-info;
}
&--info--plain--fill {
background-color: #f4f4f5;
}
&__text--info {
color: #FFFFFF;
}
&__text--info--plain {
color: $uv-info;
}
&__close {
border-radius: 100px;
background-color: #C6C7CB;
@include flex(row);
align-items: center;
justify-content: center;
transform: scale(0.6);
&--right-top {
position: absolute;
z-index: 999;
top: 10px;
right: 10px;
/* #ifndef APP-NVUE */
transform: scale(0.6) translate(80%,-80%);
/* #endif */
/* #ifdef APP-NVUE */
transform: scale(0.6) translate(50%, -50%);
/* #endif */
}
&--mini {
width: 18px;
height: 18px;
}
&--medium {
width: 22px;
height: 22px;
}
&--large {
width: 25px;
height: 25px;
}
}
}
</style>
src/uni_modules/uv-tags/package.json
+89
View File
@@ -0,0 +1,89 @@
{
"id": "uv-tags",
"displayName": "uv-tags 标签 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.3",
"description": "tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景。",
"keywords": [
"uv-tags",
"uvui",
"uv-ui",
"tag",
"标签"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-transition",
"uv-icon"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
src/uni_modules/uv-tags/readme.md
+11
View File
@@ -0,0 +1,11 @@
## Tag 标签
> **组件名：uv-tags**
tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景。
### <a href="https://www.uvui.cn/components/tag.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>