更新：登录功能
This commit is contained in:
93
uni_modules/wot-design-uni/components/wd-navbar/index.scss
Normal file
93
uni_modules/wot-design-uni/components/wd-navbar/index.scss
Normal file
@@ -0,0 +1,93 @@
|
||||
@import "./../common/abstracts/_mixin.scss";
|
||||
@import "./../common/abstracts/variable.scss";
|
||||
|
||||
.wot-theme-dark {
|
||||
@include b(navbar) {
|
||||
background-color: $-dark-background;
|
||||
|
||||
@include e(title) {
|
||||
color: $-dark-color;
|
||||
}
|
||||
|
||||
@include e(text) {
|
||||
color: $-dark-color;
|
||||
}
|
||||
|
||||
:deep(.wd-navbar__arrow) {
|
||||
color: $-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include b(navbar) {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
height: $-navbar-height;
|
||||
line-height: $-navbar-height;
|
||||
background-color: $-navbar-background;
|
||||
box-sizing: content-box;
|
||||
|
||||
@include e(content) {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
max-width: 60%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
color: $-navbar-color;
|
||||
font-weight: $-navbar-title-font-weight;
|
||||
font-size: $-navbar-title-font-size;
|
||||
@include lineEllipsis();
|
||||
}
|
||||
|
||||
@include e(text) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $-navbar-desc-font-color;
|
||||
}
|
||||
|
||||
@include e(left, right, capsule) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-size: $-navbar-desc-font-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
|
||||
@include when(disabled) {
|
||||
opacity: $-navbar-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(left, capsule) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@include e(right) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@include edeep(arrow) {
|
||||
font-size: $-navbar-arrow-size;
|
||||
color: $-navbar-color;
|
||||
}
|
||||
|
||||
|
||||
@include when(border) {
|
||||
@include halfPixelBorder('bottom');
|
||||
}
|
||||
|
||||
@include when(fixed) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 500;
|
||||
}
|
||||
}
|
||||
52
uni_modules/wot-design-uni/components/wd-navbar/types.ts
Normal file
52
uni_modules/wot-design-uni/components/wd-navbar/types.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
|
||||
|
||||
export const navbarProps = {
|
||||
...baseProps,
|
||||
/**
|
||||
* 标题文字
|
||||
*/
|
||||
title: String,
|
||||
/**
|
||||
* 左侧文案
|
||||
*/
|
||||
leftText: String,
|
||||
/**
|
||||
* 右侧文案
|
||||
*/
|
||||
rightText: String,
|
||||
/**
|
||||
* 是否显示左侧箭头
|
||||
*/
|
||||
leftArrow: makeBooleanProp(false),
|
||||
/**
|
||||
* 是否显示下边框
|
||||
*/
|
||||
bordered: makeBooleanProp(true),
|
||||
/**
|
||||
* 是否固定到顶部
|
||||
*/
|
||||
fixed: makeBooleanProp(false),
|
||||
/**
|
||||
* 固定在顶部时，是否在标签位置生成一个等高的占位元素
|
||||
*/
|
||||
placeholder: makeBooleanProp(false),
|
||||
/**
|
||||
* 导航栏 z-index
|
||||
*/
|
||||
zIndex: makeNumberProp(500),
|
||||
/**
|
||||
* 是否开启顶部安全区适配
|
||||
*/
|
||||
safeAreaInsetTop: makeBooleanProp(false),
|
||||
/**
|
||||
* 是否禁用左侧按钮，禁用时透明度降低，且无法点击
|
||||
*/
|
||||
leftDisabled: makeBooleanProp(false),
|
||||
/**
|
||||
* 是否禁用右侧按钮，禁用时透明度降低，且无法点击
|
||||
*/
|
||||
rightDisabled: makeBooleanProp(false)
|
||||
}
|
||||
|
||||
export type NavbarProps = ExtractPropTypes<typeof navbarProps>
|
||||
111
uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue
Normal file
111
uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view :style="{ height: addUnit(height) }">
|
||||
<view :class="`wd-navbar ${customClass} ${fixed ? 'is-fixed' : ''} ${bordered ? 'is-border' : ''}`" :style="rootStyle">
|
||||
<view class="wd-navbar__content">
|
||||
<view class="wd-navbar__capsule" v-if="$slots.capsule">
|
||||
<slot name="capsule" />
|
||||
</view>
|
||||
|
||||
<view :class="`wd-navbar__left ${leftDisabled ? 'is-disabled' : ''}`" @click="handleClickLeft" v-else-if="!$slots.left">
|
||||
<wd-icon v-if="leftArrow" name="arrow-left" custom-class="wd-navbar__arrow" />
|
||||
<view v-if="leftText" class="wd-navbar__text">{{ leftText }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else :class="`wd-navbar__left ${leftDisabled ? 'is-disabled' : ''}`" @click="handleClickLeft">
|
||||
<slot name="left" />
|
||||
</view>
|
||||
|
||||
<view class="wd-navbar__title">
|
||||
<slot name="title" />
|
||||
<block v-if="!$slots.title && title">{{ title }}</block>
|
||||
</view>
|
||||
<view :class="`wd-navbar__right ${rightDisabled ? 'is-disabled' : ''}`" @click="handleClickRight" v-if="$slots.right || rightText">
|
||||
<slot name="right" />
|
||||
|
||||
<view v-if="!$slots.right && rightText" class="wd-navbar__text" hover-class="wd-navbar__text--hover" :hover-stay-time="70">
|
||||
{{ rightText }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'wd-navbar',
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import wdIcon from '../wd-icon/wd-icon.vue'
|
||||
import { type CSSProperties, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
|
||||
import { getRect, addUnit, isDef, objToStyle } from '../common/util'
|
||||
import { navbarProps } from './types'
|
||||
|
||||
const props = defineProps(navbarProps)
|
||||
const emit = defineEmits(['click-left', 'click-right'])
|
||||
|
||||
const height = ref<number | ''>('') // 占位高度
|
||||
|
||||
const { statusBarHeight } = uni.getSystemInfoSync()
|
||||
|
||||
watch(
|
||||
[() => props.fixed, () => props.placeholder],
|
||||
() => {
|
||||
setPlaceholderHeight()
|
||||
},
|
||||
{ deep: true, immediate: false }
|
||||
)
|
||||
|
||||
const rootStyle = computed(() => {
|
||||
const style: CSSProperties = {}
|
||||
if (props.fixed && isDef(props.zIndex)) {
|
||||
style['z-index'] = props.zIndex
|
||||
}
|
||||
if (props.safeAreaInsetTop) {
|
||||
style['padding-top'] = addUnit(statusBarHeight || 0)
|
||||
}
|
||||
return `${objToStyle(style)}${props.customStyle}`
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (props.fixed && props.placeholder) {
|
||||
nextTick(() => {
|
||||
setPlaceholderHeight()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
function handleClickLeft() {
|
||||
if (!props.leftDisabled) {
|
||||
emit('click-left')
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickRight() {
|
||||
if (!props.rightDisabled) {
|
||||
emit('click-right')
|
||||
}
|
||||
}
|
||||
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
function setPlaceholderHeight() {
|
||||
if (!props.fixed || !props.placeholder) {
|
||||
return
|
||||
}
|
||||
|
||||
getRect('.wd-navbar', false, proxy).then((res) => {
|
||||
height.value = res.height as number
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user