更新：登录功能
This commit is contained in:
66
uni_modules/wot-design-uni/components/wd-tooltip/index.scss
Normal file
66
uni_modules/wot-design-uni/components/wd-tooltip/index.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
@import "./../common/abstracts/_mixin.scss";
|
||||
@import "./../common/abstracts/variable.scss";
|
||||
|
||||
.wot-theme-dark {
|
||||
|
||||
@include b(tooltip) {
|
||||
|
||||
@include e(pos) {
|
||||
background: $-dark-background4;
|
||||
color: $-tooltip-color;
|
||||
}
|
||||
|
||||
@include triangleArrow($-tooltip-arrow-size, $-dark-background4);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include b(tooltip) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@include edeep(pos) {
|
||||
position: absolute;
|
||||
min-width: 138px;
|
||||
min-height: 36px;
|
||||
font-size: $-tooltip-fs;
|
||||
backdrop-filter: blur($-tooltip-blur);
|
||||
background-clip: padding-box;
|
||||
border-radius: $-tooltip-radius;
|
||||
background: $-tooltip-bg;
|
||||
color: $-tooltip-color;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
z-index: $-tooltip-z-index;
|
||||
}
|
||||
|
||||
|
||||
@include e(hidden) {
|
||||
left: -100vw;
|
||||
bottom: -100vh;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@include e(container) {
|
||||
line-height: $-tooltip-line-height;
|
||||
font-size: $-tooltip-fs;
|
||||
}
|
||||
|
||||
@include e(inner) {
|
||||
padding: $-tooltip-padding;
|
||||
white-space: nowrap;
|
||||
line-height: $-tooltip-line-height;
|
||||
}
|
||||
|
||||
@include edeep(close-icon) {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -10px;
|
||||
transform: scale(0.5);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@include triangleArrow($-tooltip-arrow-size, $-tooltip-bg);
|
||||
}
|
||||
107
uni_modules/wot-design-uni/components/wd-tooltip/types.ts
Normal file
107
uni_modules/wot-design-uni/components/wd-tooltip/types.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
|
||||
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
|
||||
|
||||
export type PlacementType =
|
||||
| 'top'
|
||||
| 'top-start'
|
||||
| 'top-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
| 'left'
|
||||
| 'left-start'
|
||||
| 'left-end'
|
||||
| 'right'
|
||||
| 'right-start'
|
||||
| 'right-end'
|
||||
|
||||
export const tooltipProps = {
|
||||
...baseProps,
|
||||
|
||||
/**
|
||||
* 自定义箭头内容
|
||||
* 类型：string
|
||||
*/
|
||||
customArrow: makeStringProp(''),
|
||||
|
||||
/**
|
||||
* 自定义弹出内容
|
||||
* 类型：string
|
||||
*/
|
||||
customPop: makeStringProp(''),
|
||||
|
||||
/**
|
||||
* 是否显示Tooltip箭头
|
||||
* 类型：boolean
|
||||
* 默认值：true
|
||||
*/
|
||||
visibleArrow: makeBooleanProp(true),
|
||||
|
||||
/**
|
||||
* 显示的内容，也可以通过`slot#content`传入
|
||||
* 类型：string | Array<Record<string, any>>
|
||||
* 默认值：无（根据传入值而定）
|
||||
*/
|
||||
content: {
|
||||
type: [String, Array] as PropType<string | Array<Record<string, any>>>
|
||||
},
|
||||
|
||||
/**
|
||||
* Tooltip的出现位置
|
||||
* 类型：string
|
||||
* 可选值：top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
|
||||
* 默认值：'bottom'
|
||||
*/
|
||||
placement: makeStringProp<PlacementType>('bottom'),
|
||||
|
||||
/**
|
||||
* 出现位置的偏移量
|
||||
* 类型：number
|
||||
* 默认值：0
|
||||
*/
|
||||
// offset: makeNumberProp(0),
|
||||
offset: {
|
||||
// 需要支持数字、数组、对象类型
|
||||
type: [Number, Array, Object] as PropType<number | Array<number> | Record<'x' | 'y', number>>,
|
||||
default: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* 是否使用slot来传入content内容
|
||||
* 类型：boolean
|
||||
* 默认值：false
|
||||
*/
|
||||
useContentSlot: makeBooleanProp(false),
|
||||
|
||||
/**
|
||||
* Tooltip是否可用
|
||||
* 类型：boolean
|
||||
* 默认值：false
|
||||
*/
|
||||
disabled: makeBooleanProp(false),
|
||||
|
||||
/**
|
||||
* 是否显示Tooltip内部的关闭按钮
|
||||
* 类型：boolean
|
||||
* 默认值：false
|
||||
*/
|
||||
showClose: makeBooleanProp(false),
|
||||
|
||||
/**
|
||||
* Tooltip的状态是否可见，通过v-model绑定
|
||||
* 类型：boolean
|
||||
* 默认值：false
|
||||
*/
|
||||
modelValue: makeBooleanProp(false)
|
||||
}
|
||||
|
||||
export type TooltipProps = ExtractPropTypes<typeof tooltipProps>
|
||||
|
||||
export type TooltipExpose = {
|
||||
// 打开tooltip
|
||||
open: () => void
|
||||
// 关闭tooltip
|
||||
close: () => void
|
||||
}
|
||||
|
||||
export type TooltipInstance = ComponentPublicInstance<TooltipProps, TooltipExpose>
|
||||
141
uni_modules/wot-design-uni/components/wd-tooltip/wd-tooltip.vue
Normal file
141
uni_modules/wot-design-uni/components/wd-tooltip/wd-tooltip.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<view :class="`wd-tooltip ${customClass}`" :style="customStyle" id="tooltip" @click.stop="popover.noop">
|
||||
<!-- 用于为渲染获取宽高的元素 -->
|
||||
<view class="wd-tooltip__pos wd-tooltip__hidden" id="pos">
|
||||
<view class="wd-tooltip__container custom-pop">
|
||||
<view v-if="!useContentSlot" class="wd-tooltip__inner">{{ content }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<wd-transition custom-class="wd-tooltip__pos" :custom-style="popover.popStyle.value" :show="showTooltip" name="fade" :duration="200">
|
||||
<view class="wd-tooltip__container custom-pop">
|
||||
<view v-if="visibleArrow" :class="`wd-tooltip__arrow ${popover.arrowClass.value} ${customArrow}`" :style="popover.arrowStyle.value"></view>
|
||||
<!-- 普通模式 -->
|
||||
<view v-if="!useContentSlot" class="wd-tooltip__inner">{{ content }}</view>
|
||||
<!-- 用户自定义样式 -->
|
||||
<slot name="content" v-else />
|
||||
</view>
|
||||
<wd-icon v-if="showClose" name="close" custom-class="wd-tooltip__close-icon" @click="toggle"></wd-icon>
|
||||
</wd-transition>
|
||||
<view @click="toggle" class="wd-tooltip__target" id="target">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'wd-tooltip',
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import wdIcon from '../wd-icon/wd-icon.vue'
|
||||
import wdTransition from '../wd-transition/wd-transition.vue'
|
||||
import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { usePopover } from '../composables/usePopover'
|
||||
import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
|
||||
import { type Queue, queueKey } from '../composables/useQueue'
|
||||
import { tooltipProps, type TooltipExpose } from './types'
|
||||
|
||||
const props = defineProps(tooltipProps)
|
||||
const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
|
||||
|
||||
const popover = usePopover(props.visibleArrow)
|
||||
const queue = inject<Queue | null>(queueKey, null)
|
||||
const selector: string = 'tooltip'
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
const showTooltip = ref<boolean>(false) // 控制tooltip显隐
|
||||
|
||||
watch(
|
||||
() => props.content,
|
||||
(newVal) => {
|
||||
if (newVal === null || newVal === undefined) {
|
||||
// eslint-disable-next-line prettier/prettier
|
||||
console.error('[wot-design] warning(wd-tooltip): content can\'t be null or undefined')
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.placement,
|
||||
() => {
|
||||
popover.init(props.placement, props.visibleArrow, selector)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
showTooltip.value = newValue
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => showTooltip.value,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
popover.control(props.placement, props.offset)
|
||||
if (queue && queue.closeOther) {
|
||||
queue.closeOther(proxy)
|
||||
} else {
|
||||
closeOther(proxy)
|
||||
}
|
||||
}
|
||||
popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
|
||||
emit('change', { show: newValue })
|
||||
emit(`${newValue ? 'open' : 'close'}`)
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
popover.init(props.placement, props.visibleArrow, selector)
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (queue && queue.pushToQueue) {
|
||||
queue.pushToQueue(proxy)
|
||||
} else {
|
||||
pushToQueue(proxy)
|
||||
}
|
||||
popover.showStyle.value = props.modelValue ? 'opacity: 1;' : 'opacity: 0;'
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (queue && queue.removeFromQueue) {
|
||||
queue.removeFromQueue(proxy)
|
||||
} else {
|
||||
removeFromQueue(proxy)
|
||||
}
|
||||
})
|
||||
|
||||
function toggle() {
|
||||
if (props.disabled) return
|
||||
updateModelValue(!showTooltip.value)
|
||||
}
|
||||
|
||||
function open() {
|
||||
updateModelValue(true)
|
||||
}
|
||||
|
||||
function close() {
|
||||
updateModelValue(false)
|
||||
}
|
||||
|
||||
function updateModelValue(value: boolean) {
|
||||
showTooltip.value = value
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
defineExpose<TooltipExpose>({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user