更新：登录功能
This commit is contained in:
159
uni_modules/wot-design-uni/components/wd-swiper-nav/index.scss
Normal file
159
uni_modules/wot-design-uni/components/wd-swiper-nav/index.scss
Normal file
@@ -0,0 +1,159 @@
|
||||
@import '../common/abstracts/variable';
|
||||
@import '../common/abstracts/mixin';
|
||||
|
||||
@include b(swiper-nav) {
|
||||
|
||||
@include e(btn) {
|
||||
@include m(prev, next) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: $-swiper-nav-btn-size;
|
||||
height: $-swiper-nav-btn-size;
|
||||
border-radius: 50%;
|
||||
background: $-swiper-nav-btn-bg-color;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-color: $-swiper-nav-btn-color;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(prev) {
|
||||
left: 30rpx;
|
||||
|
||||
&::after {
|
||||
margin-left: 4rpx;
|
||||
border-width: 2rpx 0 0 2rpx;
|
||||
transform: translate(-50%, -50%) rotateZ(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@include m(next) {
|
||||
right: 30rpx;
|
||||
|
||||
&::after {
|
||||
margin-left: -4rpx;
|
||||
border-width: 2rpx 2rpx 0 0;
|
||||
transform: translate(-50%, -50%) rotateZ(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(dots, dots-bar) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@include m(fraction) {
|
||||
padding: 0 16rpx;
|
||||
height: $-swiper-nav-fraction-height;
|
||||
line-height: $-swiper-nav-fraction-height;
|
||||
border-radius: calc($-swiper-nav-fraction-height / 2);
|
||||
background: $-swiper-nav-fraction-bg-color;
|
||||
color: $-swiper-nav-fraction-color;
|
||||
font-size: $-swiper-nav-fraction-font-size;
|
||||
}
|
||||
|
||||
|
||||
@include e(item) {
|
||||
@include m(dots, dots-bar) {
|
||||
width: $-swiper-nav-dot-size;
|
||||
height: $-swiper-nav-dot-size;
|
||||
background: $-swiper-nav-dot-color;
|
||||
border-radius: 50%;
|
||||
margin: 0 10rpx;
|
||||
transition: all 0.4s ease-in;
|
||||
|
||||
@include when(vertical) {
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
@include when(active) {
|
||||
background-color: $-swiper-nav-dot-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(dots-bar) {
|
||||
|
||||
@include when(vertical) {
|
||||
@include when(active) {
|
||||
width: $-swiper-nav-dot-size;
|
||||
height: $-swiper-nav-dots-bar-active-width;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(active) {
|
||||
width: $-swiper-nav-dots-bar-active-width;
|
||||
border-radius: calc($-swiper-nav-dot-size / 2);
|
||||
background-color: $-swiper-nav-dot-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@include m(left) {
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@include m(right) {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@include m(top-left) {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 24rpx;
|
||||
}
|
||||
|
||||
@include m(top) {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 24rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@include m(top-right) {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
right: 24rpx;
|
||||
}
|
||||
|
||||
@include m(bottom-left) {
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
bottom: 24rpx;
|
||||
}
|
||||
|
||||
@include m(bottom) {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 24rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@include m(bottom-right) {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
bottom: 24rpx;
|
||||
}
|
||||
|
||||
@include m(vertical) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
42
uni_modules/wot-design-uni/components/wd-swiper-nav/types.ts
Normal file
42
uni_modules/wot-design-uni/components/wd-swiper-nav/types.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
|
||||
import type { DirectionType, IndicatorPositionType } from '../wd-swiper/types'
|
||||
|
||||
/**
|
||||
* 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
|
||||
*/
|
||||
export type SwiperIndicatorType = 'dots' | 'dots-bar' | 'fraction'
|
||||
|
||||
export const swiperNavprops = {
|
||||
...baseProps,
|
||||
/**
|
||||
* 当前轮播在哪一项（下标）
|
||||
*/
|
||||
current: makeNumberProp(0),
|
||||
/**
|
||||
* 轮播滑动方向，包括横向滑动和纵向滑动两个方向
|
||||
*/
|
||||
direction: makeStringProp<DirectionType>('horizontal'),
|
||||
/**
|
||||
* 小于这个数字不会显示导航器
|
||||
*/
|
||||
minShowNum: makeNumberProp(2),
|
||||
/**
|
||||
* 指示器位置
|
||||
*/
|
||||
indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
|
||||
/**
|
||||
* 是否显示两侧的控制按钮
|
||||
*/
|
||||
showControls: makeBooleanProp(false),
|
||||
/**
|
||||
* 总共的项数
|
||||
*/
|
||||
total: makeNumberProp(0),
|
||||
/**
|
||||
* 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
|
||||
*/
|
||||
type: makeStringProp<SwiperIndicatorType>('dots')
|
||||
}
|
||||
|
||||
export type SwiperNavProps = ExtractPropTypes<typeof swiperNavprops>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<view v-if="showControls" class="wd-swiper-nav__btn">
|
||||
<view class="wd-swiper-nav__btn--prev" @click="handleNav('prev')" />
|
||||
<view class="wd-swiper-nav__btn--next" @click="handleNav('next')" />
|
||||
</view>
|
||||
<view
|
||||
v-if="total >= minShowNum"
|
||||
:style="customStyle"
|
||||
:class="`wd-swiper-nav wd-swiper-nav--${direction} wd-swiper-nav--${type} wd-swiper-nav--${indicatorPosition} ${customClass}`"
|
||||
>
|
||||
<block v-if="type === 'dots' || type === 'dots-bar'">
|
||||
<view
|
||||
v-for="(_, index) in total"
|
||||
:key="index"
|
||||
:class="`wd-swiper-nav__item--${type} ${current === index ? 'is-active' : ''} is-${direction}`"
|
||||
></view>
|
||||
</block>
|
||||
<block v-if="type === 'fraction'">{{ current + 1 }}/{{ total }}</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { swiperNavprops } from './types'
|
||||
|
||||
defineProps(swiperNavprops)
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
function handleNav(dir: 'prev' | 'next') {
|
||||
const source: string = 'nav'
|
||||
emit('change', { dir, source })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user