课程中心页面注册，uv-tabs引入
This commit is contained in:
yanghang
+24
-1
@@ -39,4 +39,27 @@ export const uploadFile = (file, data) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// 对象存储预览 /traoss/tras3/show/{文件ID}
|
||||||
|
export function previewFile(id,responseType = 'blob') {
|
||||||
|
const token = getToken();
|
||||||
|
const header = {};
|
||||||
|
if (token)
|
||||||
|
header['summary'] = token
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.request({
|
||||||
|
url: `/traoss/tras3/show/${id}`,
|
||||||
|
header,
|
||||||
|
responseType,
|
||||||
|
success(result) {
|
||||||
|
resolve(result.data)
|
||||||
|
},
|
||||||
|
fail(error) {
|
||||||
|
reject(new Error('Upload failed'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<image :src="imgUrl"></image>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import previewFile from'@/api/common.js'
|
||||||
|
export default {
|
||||||
|
name:"image-preview",
|
||||||
|
props:{
|
||||||
|
modelValue:{
|
||||||
|
default:'',
|
||||||
|
type:String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imgUrl
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelValue: {
|
||||||
|
handler(newval, oldval) {
|
||||||
|
if (newval) {
|
||||||
|
this.getPreviewUrlBlob(newval);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
imgUrlShow: {
|
||||||
|
handler(newval, oldval) {
|
||||||
|
if (oldval) {
|
||||||
|
URL.revokeObjectURL(oldval);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getPreviewUrlBlob(id) {
|
||||||
|
previewFile(id).then((res) => {
|
||||||
|
this.imgUrlShow = URL.createObjectURL(res);
|
||||||
|
|
||||||
|
// const reader = new FileReader();
|
||||||
|
// reader.readAsDataURL(res)
|
||||||
|
// reader.onloadend = () => {
|
||||||
|
// this.imgUrlShow = reader.result;
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.modelValue) {
|
||||||
|
this.getPreviewUrlBlob(this.modelValue);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
URL.revokeObjectURL(this.imgUrlShow);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -18,6 +18,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/course/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "课程中心",
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/intelligent_answering/index",
|
"path": "pages/intelligent_answering/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<view class="course-center max_page">
|
||||||
|
<view class="top-bg"></view>
|
||||||
|
<view class="bot-bg"></view>
|
||||||
|
<view class="course-center-body">
|
||||||
|
<view class="body-title">
|
||||||
|
<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
|
||||||
|
课程中心
|
||||||
|
</view>
|
||||||
|
<uv-input shape="circle"
|
||||||
|
placeholderStyle='color:#999999;font-size:28rpx'
|
||||||
|
placeholder="请输入课程名"
|
||||||
|
suffixIcon="search"
|
||||||
|
:customStyle="customStyle"
|
||||||
|
:suffixIconStyle="suffixIconStyle"
|
||||||
|
:readonly="true">
|
||||||
|
</uv-input>
|
||||||
|
<uv-tabs :list="tabList" @click="changeTab"></uv-tabs>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import common from '@/common/common'
|
||||||
|
const customStyle = {
|
||||||
|
backgroundColor: "#ffffff",
|
||||||
|
paddingLeft: "40rpx",
|
||||||
|
height:'60rpx',
|
||||||
|
paddingTop: "5px",
|
||||||
|
paddingBottom: "5px",
|
||||||
|
border: "none"
|
||||||
|
}
|
||||||
|
const suffixIconStyle = {
|
||||||
|
color: "#2c8ef2",
|
||||||
|
fontSize: "40rpx"
|
||||||
|
}
|
||||||
|
const tabList = [
|
||||||
|
{ name:'全部'},
|
||||||
|
{ name:'热门'},
|
||||||
|
{ name:'最新'},
|
||||||
|
{ name:'推荐'},
|
||||||
|
{ name:'生产线'},
|
||||||
|
]
|
||||||
|
const changeTab = (item) => {
|
||||||
|
console.log(item)
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.course-center{
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.top-bg{
|
||||||
|
background: linear-gradient(16deg,rgba(234,246,255,0) 0%,#c3e6ff 100%);
|
||||||
|
height: 419rpx;
|
||||||
|
width: 750rpx;
|
||||||
|
}
|
||||||
|
.bot-bg{
|
||||||
|
// background-color: #F6F8FF;
|
||||||
|
background: linear-gradient(136deg,rgba(234,246,255,0) 0%,#c3e6ff 100%);
|
||||||
|
width: 750rpx;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.course-center-body{
|
||||||
|
position: absolute;
|
||||||
|
left:0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding:0 15rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.body-title{
|
||||||
|
height: 150rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 33rpx;
|
||||||
|
padding-top: 70rpx;
|
||||||
|
line-height: 46rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
.arrow-icon{
|
||||||
|
position: absolute;
|
||||||
|
left:36rpx;
|
||||||
|
top:80rpx;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -73,7 +73,7 @@
|
|||||||
<!-- 8个导航 -->
|
<!-- 8个导航 -->
|
||||||
<view class="navigation_div">
|
<view class="navigation_div">
|
||||||
<view class="group">
|
<view class="group">
|
||||||
<view class="item">
|
<view class="item" @click="common.navigateTo('/pages/course/index')">
|
||||||
<image class="icon" src="@/static/images/index/navigation_course.png"></image>
|
<image class="icon" src="@/static/images/index/navigation_course.png"></image>
|
||||||
<view class="title">课程中心</view>
|
<view class="title">课程中心</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -0,0 +1,7 @@
|
|||||||
|
## 1.0.2（2023-06-04）
|
||||||
|
1. 修复type等属性为null的时候不显示徽标的BUG
|
||||||
|
## 1.0.1（2023-05-16）
|
||||||
|
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||||
|
2. 优化部分功能
|
||||||
|
## 1.0.0（2023-05-10）
|
||||||
|
uv-badge 徽标数，数字角标
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 是否显示圆点
|
||||||
|
isDot: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 显示的内容
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 是否显示
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 最大值，超过最大值会显示 '{max}+'
|
||||||
|
max: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 999
|
||||||
|
},
|
||||||
|
// 主题类型，error|warning|success|primary
|
||||||
|
type: {
|
||||||
|
type: [String,undefined,null],
|
||||||
|
default: 'error'
|
||||||
|
},
|
||||||
|
// 当数值为 0 时，是否展示 Badge
|
||||||
|
showZero: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 背景颜色，优先级比type高，如设置，type参数会失效
|
||||||
|
bgColor: {
|
||||||
|
type: [String, null],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
// 字体颜色
|
||||||
|
color: {
|
||||||
|
type: [String, null],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
// 徽标形状，circle-四角均为圆角，horn-左下角为直角
|
||||||
|
shape: {
|
||||||
|
type: [String,undefined,null],
|
||||||
|
default: 'circle'
|
||||||
|
},
|
||||||
|
// 设置数字的显示方式，overflow|ellipsis|limit
|
||||||
|
// overflow会根据max字段判断，超出显示`${max}+`
|
||||||
|
// ellipsis会根据max判断，超出显示`${max}...`
|
||||||
|
// limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
|
||||||
|
numberType: {
|
||||||
|
type: [String,undefined,null],
|
||||||
|
default: 'overflow'
|
||||||
|
},
|
||||||
|
// 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
|
||||||
|
offset: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
// 是否反转背景和字体颜色
|
||||||
|
inverted: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 是否绝对定位
|
||||||
|
absolute: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
...uni.$uv?.props?.badge
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<text
|
||||||
|
v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
|
||||||
|
:class="[isDot ? 'uv-badge--dot' : 'uv-badge--not-dot', inverted && 'uv-badge--inverted', shape === 'horn' && 'uv-badge--horn', `uv-badge--${propsType}${inverted ? '--inverted' : ''}`]"
|
||||||
|
:style="[$uv.addStyle(customStyle), badgeStyle]"
|
||||||
|
class="uv-badge"
|
||||||
|
>{{ isDot ? '' :showValue }}</text>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
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';
|
||||||
|
/**
|
||||||
|
* badge 徽标数
|
||||||
|
* @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
|
||||||
|
* @tutorial https://www.uvui.cn/components/badge.html
|
||||||
|
*
|
||||||
|
* @property {Boolean} isDot 是否显示圆点 （默认 false ）
|
||||||
|
* @property {String | Number} value 显示的内容
|
||||||
|
* @property {Boolean} show 是否显示 （默认 true ）
|
||||||
|
* @property {String | Number} max 最大值，超过最大值会显示 '{max}+' （默认999）
|
||||||
|
* @property {String} type 主题类型，error|warning|success|primary （默认 'error' ）
|
||||||
|
* @property {Boolean} showZero 当数值为 0 时，是否展示 Badge （默认 false ）
|
||||||
|
* @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
|
||||||
|
* @property {String} color 字体颜色 （默认 '#ffffff' ）
|
||||||
|
* @property {String} shape 徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
|
||||||
|
* @property {String} numberType 设置数字的显示方式，overflow|ellipsis|limit （默认 'overflow' ）
|
||||||
|
* @property {Array}} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
|
||||||
|
* @property {Boolean} inverted 是否反转背景和字体颜色（默认 false ）
|
||||||
|
* @property {Boolean} absolute 是否绝对定位（默认 false ）
|
||||||
|
* @property {Object} customStyle 定义需要用到的外部样式
|
||||||
|
* @example <uv-badge :type="type" :count="count"></uv-badge>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uv-badge',
|
||||||
|
mixins: [mpMixin, mixin, props],
|
||||||
|
computed: {
|
||||||
|
// 是否将badge中心与父组件右上角重合
|
||||||
|
boxStyle() {
|
||||||
|
let style = {};
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
// 整个组件的样式
|
||||||
|
badgeStyle() {
|
||||||
|
const style = {}
|
||||||
|
if(this.color) {
|
||||||
|
style.color = this.color
|
||||||
|
}
|
||||||
|
if (this.bgColor && !this.inverted) {
|
||||||
|
style.backgroundColor = this.bgColor
|
||||||
|
}
|
||||||
|
if (this.absolute) {
|
||||||
|
style.position = 'absolute'
|
||||||
|
// 如果有设置offset参数
|
||||||
|
if(this.offset.length) {
|
||||||
|
// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
|
||||||
|
const top = this.offset[0]
|
||||||
|
const right = this.offset[1] || top
|
||||||
|
style.top = this.$uv.addUnit(top)
|
||||||
|
style.right = this.$uv.addUnit(right)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
showValue() {
|
||||||
|
switch (this.numberType) {
|
||||||
|
case "overflow":
|
||||||
|
return Number(this.value) > Number(this.max) ? this.max + "+" : this.value
|
||||||
|
break;
|
||||||
|
case "ellipsis":
|
||||||
|
return Number(this.value) > Number(this.max) ? "..." : this.value
|
||||||
|
break;
|
||||||
|
case "limit":
|
||||||
|
return Number(this.value) > 999 ? Number(this.value) >= 9999 ?
|
||||||
|
Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value /
|
||||||
|
1e3 * 100) / 100 + "k" : this.value
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return Number(this.value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
propsType(){
|
||||||
|
return this.type || 'error'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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-badge-primary: $uv-primary !default;
|
||||||
|
$uv-badge-error: $uv-error !default;
|
||||||
|
$uv-badge-success: $uv-success !default;
|
||||||
|
$uv-badge-info: $uv-info !default;
|
||||||
|
$uv-badge-warning: $uv-warning !default;
|
||||||
|
$uv-badge-dot-radius: 100px !default;
|
||||||
|
$uv-badge-dot-size: 8px !default;
|
||||||
|
$uv-badge-dot-right: 4px !default;
|
||||||
|
$uv-badge-dot-top: 0 !default;
|
||||||
|
$uv-badge-text-font-size: 11px !default;
|
||||||
|
$uv-badge-text-right: 10px !default;
|
||||||
|
$uv-badge-text-padding: 2px 5px !default;
|
||||||
|
$uv-badge-text-align: center !default;
|
||||||
|
$uv-badge-text-color: #FFFFFF !default;
|
||||||
|
|
||||||
|
.uv-badge {
|
||||||
|
border-top-right-radius: $uv-badge-dot-radius;
|
||||||
|
border-top-left-radius: $uv-badge-dot-radius;
|
||||||
|
border-bottom-left-radius: $uv-badge-dot-radius;
|
||||||
|
border-bottom-right-radius: $uv-badge-dot-radius;
|
||||||
|
@include flex;
|
||||||
|
line-height: $uv-badge-text-font-size;
|
||||||
|
text-align: $uv-badge-text-align;
|
||||||
|
font-size: $uv-badge-text-font-size;
|
||||||
|
color: $uv-badge-text-color;
|
||||||
|
|
||||||
|
&--dot {
|
||||||
|
height: $uv-badge-dot-size;
|
||||||
|
width: $uv-badge-dot-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--inverted {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--not-dot {
|
||||||
|
padding: $uv-badge-text-padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--horn {
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--primary {
|
||||||
|
background-color: $uv-badge-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--primary--inverted {
|
||||||
|
color: $uv-badge-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--error {
|
||||||
|
background-color: $uv-badge-error;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--error--inverted {
|
||||||
|
color: $uv-badge-error;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--success {
|
||||||
|
background-color: $uv-badge-success;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--success--inverted {
|
||||||
|
color: $uv-badge-success;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--info {
|
||||||
|
background-color: $uv-badge-info;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--info--inverted {
|
||||||
|
color: $uv-badge-info;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--warning {
|
||||||
|
background-color: $uv-badge-warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--warning--inverted {
|
||||||
|
color: $uv-badge-warning;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
{
|
||||||
|
"id": "uv-badge",
|
||||||
|
"displayName": "uv-badge 徽标数，数字角标 全面兼容小程序、nvue、vue2、vue3等多端",
|
||||||
|
"version": "1.0.2",
|
||||||
|
"description": "徽标数一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。",
|
||||||
|
"keywords": [
|
||||||
|
"uv-badge",
|
||||||
|
"uvui",
|
||||||
|
"uv-ui",
|
||||||
|
"徽标数",
|
||||||
|
"数字角标"
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
## Badge 徽标数
|
||||||
|
|
||||||
|
> **组件名：uv-badge**
|
||||||
|
|
||||||
|
该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
|
||||||
|
|
||||||
|
### <a href="https://www.uvui.cn/components/badge.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>
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
## 1.0.9（2023-12-01）
|
||||||
|
1. 修复current为字符串activeStyle不生效的BUG
|
||||||
|
2. 优化文档
|
||||||
|
## 1.0.8（2023-10-13）
|
||||||
|
1. 优化点击一个选项，change事件重复派发的问题
|
||||||
|
## 1.0.7（2023-09-14）
|
||||||
|
1. 优化首次加载时，处理下划线会有左到右的过渡效果
|
||||||
|
## 1.0.6（2023-09-13）
|
||||||
|
1. 修复设置lineWidth未带单位产生的误差BUG
|
||||||
|
## 1.0.5（2023-06-23）
|
||||||
|
添加uv-icon依赖
|
||||||
|
## 1.0.4（2023-06-16）
|
||||||
|
1. 增加customStyle参数
|
||||||
|
## 1.0.3（2023-06-12）
|
||||||
|
1. activeStyle设置字体大小，导致下划线位置不对的BUG，增加this.$nextTick机制
|
||||||
|
## 1.0.2（2023-05-23）
|
||||||
|
1. 修复nvue中不滚动的BUG
|
||||||
|
## 1.0.1（2023-05-16）
|
||||||
|
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||||
|
2. 优化部分功能
|
||||||
|
## 1.0.0（2023-05-10）
|
||||||
|
uv-tabs 标签选项卡
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 滑块的移动过渡时间，单位ms
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
default: 300
|
||||||
|
},
|
||||||
|
// tabs标签数组
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
// 滑块颜色
|
||||||
|
lineColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#3c9cff'
|
||||||
|
},
|
||||||
|
// 菜单选择中时的样式
|
||||||
|
activeStyle: {
|
||||||
|
type: [String, Object],
|
||||||
|
default: () => ({
|
||||||
|
color: '#303133'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 菜单非选中时的样式
|
||||||
|
inactiveStyle: {
|
||||||
|
type: [String, Object],
|
||||||
|
default: () => ({
|
||||||
|
color: '#606266'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 滑块长度
|
||||||
|
lineWidth: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 20
|
||||||
|
},
|
||||||
|
// 滑块高度
|
||||||
|
lineHeight: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 3
|
||||||
|
},
|
||||||
|
// 滑块背景显示大小，当滑块背景设置为图片时使用
|
||||||
|
lineBgSize: {
|
||||||
|
type: String,
|
||||||
|
default: 'cover'
|
||||||
|
},
|
||||||
|
// 菜单item的样式
|
||||||
|
itemStyle: {
|
||||||
|
type: [String, Object],
|
||||||
|
default: () => ({
|
||||||
|
height: '44px'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 菜单是否可滚动
|
||||||
|
scrollable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 当前选中标签的索引
|
||||||
|
current: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 默认读取的键名
|
||||||
|
keyName: {
|
||||||
|
type: String,
|
||||||
|
default: 'name'
|
||||||
|
},
|
||||||
|
...uni.$uv?.props?.tabs
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,390 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uv-tabs" :style="[$uv.addStyle(customStyle)]">
|
||||||
|
<view class="uv-tabs__wrapper">
|
||||||
|
<slot name="left" />
|
||||||
|
<view class="uv-tabs__wrapper__scroll-view-wrapper">
|
||||||
|
<scroll-view
|
||||||
|
:scroll-x="scrollable"
|
||||||
|
:scroll-left="scrollLeft"
|
||||||
|
scroll-with-animation
|
||||||
|
class="uv-tabs__wrapper__scroll-view"
|
||||||
|
:show-scrollbar="false"
|
||||||
|
ref="uv-tabs__wrapper__scroll-view"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="uv-tabs__wrapper__nav"
|
||||||
|
ref="uv-tabs__wrapper__nav"
|
||||||
|
:style="{
|
||||||
|
flex: scrollable ? '' : 1
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="uv-tabs__wrapper__nav__item"
|
||||||
|
v-for="(item, index) in list"
|
||||||
|
:key="index"
|
||||||
|
@tap="clickHandler(item, index)"
|
||||||
|
:ref="`uv-tabs__wrapper__nav__item-${index}`"
|
||||||
|
:style="[{flex: scrollable ? '' : 1},$uv.addStyle(itemStyle)]"
|
||||||
|
:class="[`uv-tabs__wrapper__nav__item-${index}`, item.disabled && 'uv-tabs__wrapper__nav__item--disabled']"
|
||||||
|
>
|
||||||
|
<text
|
||||||
|
:class="[item.disabled && 'uv-tabs__wrapper__nav__item__text--disabled']"
|
||||||
|
class="uv-tabs__wrapper__nav__item__text"
|
||||||
|
:style="[textStyle(index)]"
|
||||||
|
>{{ item[keyName] }}</text>
|
||||||
|
<uv-badge
|
||||||
|
:show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
|
||||||
|
:isDot="item.badge && item.badge.isDot || propsBadge.isDot"
|
||||||
|
:value="item.badge && item.badge.value || propsBadge.value"
|
||||||
|
:max="item.badge && item.badge.max || propsBadge.max"
|
||||||
|
:type="item.badge && item.badge.type || propsBadge.type"
|
||||||
|
:showZero="item.badge && item.badge.showZero || propsBadge.showZero"
|
||||||
|
:bgColor="item.badge && item.badge.bgColor || propsBadge.bgColor"
|
||||||
|
:color="item.badge && item.badge.color || propsBadge.color"
|
||||||
|
:shape="item.badge && item.badge.shape || propsBadge.shape"
|
||||||
|
:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
|
||||||
|
:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
|
||||||
|
customStyle="margin-left: 4px;"
|
||||||
|
></uv-badge>
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<view
|
||||||
|
class="uv-tabs__wrapper__nav__line"
|
||||||
|
ref="uv-tabs__wrapper__nav__line"
|
||||||
|
:style="[{
|
||||||
|
width: $uv.addUnit(lineWidth),
|
||||||
|
height: firstTime?0:$uv.addUnit(lineHeight),
|
||||||
|
background: lineColor,
|
||||||
|
backgroundSize: lineBgSize
|
||||||
|
}]"
|
||||||
|
>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view
|
||||||
|
class="uv-tabs__wrapper__nav__line"
|
||||||
|
ref="uv-tabs__wrapper__nav__line"
|
||||||
|
:style="[{
|
||||||
|
width: $uv.addUnit(lineWidth),
|
||||||
|
transform: `translate(${lineOffsetLeft}px)`,
|
||||||
|
transitionDuration: `${firstTime ? 0 : duration}ms`,
|
||||||
|
height: firstTime?0:$uv.addUnit(lineHeight),
|
||||||
|
background: lineColor,
|
||||||
|
backgroundSize: lineBgSize,
|
||||||
|
}]"
|
||||||
|
>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
<slot name="right" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
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 uvBadgeProps from '@/uni_modules/uv-badge/components/uv-badge/props.js'
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const animation = uni.requireNativePlugin('animation')
|
||||||
|
const dom = uni.requireNativePlugin('dom')
|
||||||
|
// #endif
|
||||||
|
import props from './props.js';
|
||||||
|
/**
|
||||||
|
* Tabs 标签
|
||||||
|
* @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
|
||||||
|
* @tutorial https://www.uvui.cn/components/tabs.html
|
||||||
|
* @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}]
|
||||||
|
* @property {String | Number} duration 滑块移动一次所需的时间，单位秒（默认 200 ）
|
||||||
|
* @property {String | Object} activeStyle 菜单选择中时的样式（默认{ color: '#303133' }）
|
||||||
|
* @property {String | Object} inactiveStyle 菜单非选择中时的样式（默认{ color: '#606266' }）
|
||||||
|
* @property {String | Number} lineWidth 滑块长度（默认 20）
|
||||||
|
* @property {String | Number} lineHeight 滑块高度（默认 3）
|
||||||
|
* @property {String} lineColor 滑块颜色（默认：'#3c9cff'）
|
||||||
|
* @property {String} lineBgSize 滑块背景显示大小，当滑块背景设置为图片时使用（默认 cover）
|
||||||
|
* @property {String | Number} itemStyle 菜单item的样式（默认 { height: '44px' }）
|
||||||
|
* @property {String} scrollable 菜单是否可滚动，选项很少的时候设置为false整个tabs自动居中显示（默认：true）
|
||||||
|
* @property {String | Number} current 当前选中标签的索引（默认 0 ）
|
||||||
|
* @property {String} keyName 从list元素对象中读取的键名（默认 'name' ）
|
||||||
|
* @property {String | Number} swierWidth swiper的宽度（默认 '750rpx' ）
|
||||||
|
* @property {String | Object} customStyle 自定义外部样式
|
||||||
|
*
|
||||||
|
* @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
|
||||||
|
* @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
|
||||||
|
* @example <uv-tabs :list="list" :is-scroll="false" :current="current" @change="change"></uv-tabs>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uv-tabs',
|
||||||
|
emits: ['click','change'],
|
||||||
|
mixins: [mpMixin, mixin, props],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
firstTime: true,
|
||||||
|
scrollLeft: 0,
|
||||||
|
scrollViewWidth: 0,
|
||||||
|
lineOffsetLeft: 0,
|
||||||
|
tabsRect: {
|
||||||
|
left: 0
|
||||||
|
},
|
||||||
|
innerCurrent: 0,
|
||||||
|
moving: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
current: {
|
||||||
|
immediate: true,
|
||||||
|
handler (newValue, oldValue) {
|
||||||
|
// 内外部值不相等时，才尝试移动滑块
|
||||||
|
if (newValue !== this.innerCurrent) {
|
||||||
|
this.innerCurrent = newValue
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// list变化时，重新渲染list各项信息
|
||||||
|
list() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
textStyle() {
|
||||||
|
return index => {
|
||||||
|
const style = {}
|
||||||
|
// 取当期是否激活的样式
|
||||||
|
const customeStyle = index == this.innerCurrent ? this.$uv.addStyle(this.activeStyle) : this.$uv
|
||||||
|
.addStyle(
|
||||||
|
this.inactiveStyle)
|
||||||
|
// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
|
||||||
|
if (this.list[index].disabled) {
|
||||||
|
style.color = '#c8c9cc'
|
||||||
|
}
|
||||||
|
return this.$uv.deepMerge(customeStyle, style)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
propsBadge() {
|
||||||
|
return uvBadgeProps
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setLineLeft() {
|
||||||
|
const tabItem = this.list[this.innerCurrent];
|
||||||
|
if (!tabItem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 获取滑块该移动的位置
|
||||||
|
let lineOffsetLeft = this.list
|
||||||
|
.slice(0, this.innerCurrent)
|
||||||
|
.reduce((total, curr) => total + curr.rect.width, 0);
|
||||||
|
// 获取下划线的数值px表示法
|
||||||
|
let lineWidth = this.$uv.getPx(this.lineWidth);
|
||||||
|
// 如果传的值未带单位+设置了全局单位，则带上单位计算，这样才没有误差
|
||||||
|
if (this.$uv.test.number(this.lineWidth) && this.$uv.unit) {
|
||||||
|
lineWidth = this.$uv.getPx(`${this.lineWidth}${this.$uv.unit}`);
|
||||||
|
}
|
||||||
|
this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
// 第一次移动滑块，无需过渡时间
|
||||||
|
this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
|
||||||
|
// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
|
||||||
|
if (this.firstTime) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.firstTime = false
|
||||||
|
}, 20);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// nvue下设置滑块的位置
|
||||||
|
animation(x, duration = 0) {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const ref = this.$refs['uv-tabs__wrapper__nav__line']
|
||||||
|
animation.transition(ref, {
|
||||||
|
styles: {
|
||||||
|
transform: `translateX(${x}px)`
|
||||||
|
},
|
||||||
|
duration
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// 点击某一个标签
|
||||||
|
clickHandler(item, index) {
|
||||||
|
// 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
|
||||||
|
this.$emit('click', {
|
||||||
|
...item,
|
||||||
|
index
|
||||||
|
})
|
||||||
|
// 如果disabled状态，返回
|
||||||
|
if (item.disabled) return
|
||||||
|
if(this.innerCurrent != index) {
|
||||||
|
this.$emit('change', {
|
||||||
|
...item,
|
||||||
|
index
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.innerCurrent = index
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.resize()
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
// nvue模式下再给点延时，确保万无一失
|
||||||
|
this.$uv.sleep(30).then(res=>{
|
||||||
|
this.resize()
|
||||||
|
});
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
this.$uv.sleep().then(() => {
|
||||||
|
this.resize()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setScrollLeft() {
|
||||||
|
// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
|
||||||
|
const tabRect = this.list[this.innerCurrent]
|
||||||
|
// 累加得到当前item到左边的距离
|
||||||
|
const offsetLeft = this.list
|
||||||
|
.slice(0, this.innerCurrent)
|
||||||
|
.reduce((total, curr) => {
|
||||||
|
return total + curr.rect.width
|
||||||
|
}, 0)
|
||||||
|
// 此处为屏幕宽度
|
||||||
|
const windowWidth = this.$uv.sys().windowWidth
|
||||||
|
// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
|
||||||
|
let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
|
||||||
|
.right) / 2 + this.tabsRect.left / 2
|
||||||
|
// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
|
||||||
|
scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
|
||||||
|
this.scrollLeft = Math.max(0, scrollLeft)
|
||||||
|
},
|
||||||
|
// 获取所有标签的尺寸
|
||||||
|
resize() {
|
||||||
|
// 如果不存在list，则不处理
|
||||||
|
if(this.list.length === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
|
||||||
|
this.tabsRect = tabsRect
|
||||||
|
this.scrollViewWidth = 0
|
||||||
|
itemRect.map((item, index) => {
|
||||||
|
// 计算scroll-view的宽度，这里
|
||||||
|
this.scrollViewWidth += item.width
|
||||||
|
// 另外计算每一个item的中心点X轴坐标
|
||||||
|
this.list[index].rect = item
|
||||||
|
})
|
||||||
|
// 获取了tabs的尺寸之后，设置滑块的位置
|
||||||
|
this.setLineLeft()
|
||||||
|
this.setScrollLeft()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取导航菜单的尺寸
|
||||||
|
getTabsRect() {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
this.queryRect('uv-tabs__wrapper__scroll-view').then(size => resolve(size))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取所有标签的尺寸
|
||||||
|
getAllItemRect() {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const promiseAllArr = this.list.map((item, index) => this.queryRect(
|
||||||
|
`uv-tabs__wrapper__nav__item-${index}`, true))
|
||||||
|
Promise.all(promiseAllArr).then(sizes => resolve(sizes))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取各个标签的尺寸
|
||||||
|
queryRect(el, item) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
// $uvGetRect为uni-ui自带的节点查询简化方法，详见文档介绍：https://www.uvui.cn/js/getRect.html
|
||||||
|
// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
|
||||||
|
return new Promise(resolve => {
|
||||||
|
this.$uvGetRect(`.${el}`).then(size => {
|
||||||
|
resolve(size)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
// nvue下，使用dom模块查询元素高度
|
||||||
|
// 返回一个promise，让调用此方法的主体能使用then回调
|
||||||
|
return new Promise(resolve => {
|
||||||
|
dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], res => {
|
||||||
|
resolve(res.size)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</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-tabs {
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
@include flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__scroll-view-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: auto hidden;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
&__scroll-view {
|
||||||
|
@include flex;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nav {
|
||||||
|
@include flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 0 11px;
|
||||||
|
@include flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&--disabled {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
font-size: 15px;
|
||||||
|
color: $uv-content-color;
|
||||||
|
|
||||||
|
&--disabled {
|
||||||
|
color: $uv-disabled-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__line {
|
||||||
|
height: 3px;
|
||||||
|
background: $uv-primary;
|
||||||
|
width: 30px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2px;
|
||||||
|
border-radius: 100px;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 300ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
{
|
||||||
|
"id": "uv-tabs",
|
||||||
|
"displayName": "uv-tabs 标签选项卡 全面兼容vue3+2、app、h5、小程序等多端",
|
||||||
|
"version": "1.0.9",
|
||||||
|
"description": "标签选项卡组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。",
|
||||||
|
"keywords": [
|
||||||
|
"选项卡",
|
||||||
|
"uvui",
|
||||||
|
"uv-ui",
|
||||||
|
"tab",
|
||||||
|
"标签"
|
||||||
|
],
|
||||||
|
"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-badge",
|
||||||
|
"uv-sticky",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
## Tabs 标签选项卡
|
||||||
|
|
||||||
|
> **组件名：uv-tabs**
|
||||||
|
|
||||||
|
标签选项卡组件，是一个`tabs`标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的`tab`会自动移动到组件的中间位置。
|
||||||
|
|
||||||
|
# <a href="https://www.uvui.cn/components/tabs.html" target="_blank">查看文档</a>
|
||||||
|
|
||||||
|
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||||
|
|
||||||
|
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||||
|
|
||||||
|
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</a>
|
||||||
|
|
||||||
|
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||||
Binary file not shown.
Reference in New Issue
Block a user