更新：登录功能
This commit is contained in:
85
uni_modules/wot-design-uni/components/wd-curtain/index.scss
Normal file
85
uni_modules/wot-design-uni/components/wd-curtain/index.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
@import "./../common/abstracts/_mixin.scss";
|
||||
@import "./../common/abstracts/variable.scss";
|
||||
|
||||
@include b(curtain-wrapper){
|
||||
:deep(.wd-curtain){
|
||||
display: inline-block;
|
||||
border-radius: $-curtain-content-radius;
|
||||
overflow-y: visible !important;
|
||||
background: transparent;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include b(curtain) {
|
||||
|
||||
@include e(content) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
border-radius: $-curtain-content-radius;
|
||||
}
|
||||
@include e(content-link) {
|
||||
display: block;
|
||||
border-radius: $-curtain-content-radius;
|
||||
}
|
||||
@include e(content-img) {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: $-curtain-content-radius;
|
||||
}
|
||||
@include edeep(content-close) {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: $-curtain-content-close-color;
|
||||
font-size: $-curtain-content-close-fs;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
&.top {
|
||||
margin: 0 0 0 -18px;
|
||||
top: -62px;
|
||||
right: unset;
|
||||
left: 50%;
|
||||
bottom: unset;
|
||||
}
|
||||
&.top-left {
|
||||
margin: 0;
|
||||
top: -62px;
|
||||
right: unset;
|
||||
left: -6px;
|
||||
bottom: unset;
|
||||
}
|
||||
&.top-right {
|
||||
margin: 0;
|
||||
top: -62px;
|
||||
right: -6px;
|
||||
left: unset;
|
||||
bottom: unset;
|
||||
}
|
||||
&.bottom {
|
||||
margin: 0 0 0 -18px;
|
||||
top: unset;
|
||||
right: unset;
|
||||
left: 50%;
|
||||
bottom: -62px;
|
||||
}
|
||||
&.bottom-left {
|
||||
margin: 0;
|
||||
top: unset;
|
||||
right: unset;
|
||||
left: -6px;
|
||||
bottom: -62px;
|
||||
}
|
||||
&.bottom-right {
|
||||
margin: 0;
|
||||
top: unset;
|
||||
right: -6px;
|
||||
left: unset;
|
||||
bottom: -62px;
|
||||
}
|
||||
}
|
||||
}
|
||||
82
uni_modules/wot-design-uni/components/wd-curtain/types.ts
Normal file
82
uni_modules/wot-design-uni/components/wd-curtain/types.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2025-01-25 23:46:29
|
||||
* @LastEditTime: 2025-09-09 10:00:00
|
||||
* @LastEditors: rusheng
|
||||
* @Description:
|
||||
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-curtain/types.ts
|
||||
* 记得注释
|
||||
*/
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
|
||||
|
||||
export type ClosePosition = 'inset' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
|
||||
|
||||
export const curtainProps = {
|
||||
...baseProps,
|
||||
/**
|
||||
* 绑定值，展示/关闭幕帘
|
||||
* @deprecated 请使用 modelValue
|
||||
*/
|
||||
value: makeBooleanProp(false),
|
||||
/**
|
||||
* 绑定值，展示/关闭幕帘
|
||||
*/
|
||||
modelValue: makeBooleanProp(false),
|
||||
/**
|
||||
* 关闭按钮位置，可选值：inset / top / bottom / top-left / top-right / bottom-left / bottom-right
|
||||
*/
|
||||
closePosition: makeStringProp<ClosePosition>('inset'),
|
||||
/**
|
||||
* 幕帘图片地址，必须使用网络地址
|
||||
*/
|
||||
src: String,
|
||||
/**
|
||||
* 幕帘图片点击链接
|
||||
*/
|
||||
to: String,
|
||||
/**
|
||||
* 幕帘图片宽度
|
||||
*/
|
||||
width: Number,
|
||||
/**
|
||||
* 点击遮罩是否关闭
|
||||
*/
|
||||
closeOnClickModal: makeBooleanProp(false),
|
||||
/**
|
||||
* 是否当关闭时将弹出层隐藏（display: none)
|
||||
*/
|
||||
hideWhenClose: makeBooleanProp(true),
|
||||
/**
|
||||
* 设置层级
|
||||
* 类型：number
|
||||
* 默认值：10
|
||||
*/
|
||||
zIndex: makeNumberProp(10),
|
||||
/**
|
||||
* 自定义关闭按钮的类名
|
||||
* 类型：string
|
||||
* 默认值：''
|
||||
*/
|
||||
customCloseClass: makeStringProp(''),
|
||||
/**
|
||||
* 自定义关闭按钮的样式
|
||||
* 类型：string
|
||||
* 默认值：''
|
||||
*/
|
||||
customCloseStyle: makeStringProp(''),
|
||||
/**
|
||||
* 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
|
||||
*/
|
||||
rootPortal: makeBooleanProp(false),
|
||||
/**
|
||||
* 开启长按图片显示识别小程序码菜单，仅在微信小程序平台有效
|
||||
*/
|
||||
showMenuByLongpress: makeBooleanProp(false),
|
||||
/**
|
||||
* 点击图片是否关闭幕帘，默认为 true
|
||||
*/
|
||||
closeOnClick: makeBooleanProp(true)
|
||||
}
|
||||
|
||||
export type CurtainProps = ExtractPropTypes<typeof curtainProps>
|
||||
172
uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue
Normal file
172
uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<view class="wd-curtain-wrapper">
|
||||
<wd-popup
|
||||
v-model="modelValue"
|
||||
transition="zoom-in"
|
||||
position="center"
|
||||
:close-on-click-modal="closeOnClickModal"
|
||||
:hide-when-close="hideWhenClose"
|
||||
:z-index="zIndex"
|
||||
:root-portal="rootPortal"
|
||||
@before-enter="beforeenter"
|
||||
@enter="enter"
|
||||
@after-enter="afterenter"
|
||||
@before-leave="beforeleave"
|
||||
@leave="leave"
|
||||
@after-leave="afterleave"
|
||||
@close="close"
|
||||
@click-modal="clickModal"
|
||||
:custom-class="`wd-curtain ${customClass}`"
|
||||
:custom-style="customStyle"
|
||||
>
|
||||
<view class="wd-curtain__content">
|
||||
<image
|
||||
:src="src"
|
||||
class="wd-curtain__content-img"
|
||||
:style="imgStyle"
|
||||
:show-menu-by-longpress="showMenuByLongpress"
|
||||
@click="clickImage"
|
||||
@error="imgErr"
|
||||
@load="imgLoad"
|
||||
></image>
|
||||
<slot name="close">
|
||||
<wd-icon
|
||||
name="close-outline"
|
||||
:custom-class="`wd-curtain__content-close ${closePosition} ${customCloseClass}`"
|
||||
:custom-style="customCloseStyle"
|
||||
@click="close"
|
||||
/>
|
||||
</slot>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'wd-curtain',
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import wdIcon from '../wd-icon/wd-icon.vue'
|
||||
import wdPopup from '../wd-popup/wd-popup.vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { curtainProps } from './types'
|
||||
|
||||
const props = defineProps(curtainProps)
|
||||
const emit = defineEmits([
|
||||
'beforeenter',
|
||||
'enter',
|
||||
'afterenter',
|
||||
'beforeleave',
|
||||
'leave',
|
||||
'afterleave',
|
||||
'close',
|
||||
'closed',
|
||||
'click-modal',
|
||||
'load',
|
||||
'error',
|
||||
'click',
|
||||
'update:modelValue'
|
||||
])
|
||||
|
||||
const modelValue = ref(props.modelValue || props.value)
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
modelValue.value = newVal
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(newVal) => {
|
||||
modelValue.value = newVal
|
||||
}
|
||||
)
|
||||
|
||||
watch(modelValue, (newVal) => {
|
||||
emit('update:modelValue', newVal)
|
||||
if (!newVal) {
|
||||
emit('close')
|
||||
}
|
||||
})
|
||||
|
||||
const imgSucc = ref<boolean>(true)
|
||||
const imgScale = ref<number>(1)
|
||||
|
||||
const imgStyle = computed(() => {
|
||||
let style = ''
|
||||
if (props.width) {
|
||||
style += `width: ${props.width}px ;`
|
||||
style += `height: ${props.width / imgScale.value}px`
|
||||
}
|
||||
return style
|
||||
})
|
||||
|
||||
function beforeenter() {
|
||||
emit('beforeenter')
|
||||
}
|
||||
|
||||
function enter() {
|
||||
emit('enter')
|
||||
}
|
||||
function afterenter() {
|
||||
emit('afterenter')
|
||||
}
|
||||
|
||||
function beforeleave() {
|
||||
emit('beforeleave')
|
||||
}
|
||||
|
||||
function leave() {
|
||||
emit('leave')
|
||||
}
|
||||
|
||||
function afterleave() {
|
||||
emit('afterleave')
|
||||
emit('closed')
|
||||
}
|
||||
|
||||
function close() {
|
||||
modelValue.value = false
|
||||
}
|
||||
|
||||
function clickModal() {
|
||||
emit('click-modal')
|
||||
}
|
||||
|
||||
function imgLoad(event: any) {
|
||||
const { height, width } = event.detail
|
||||
imgScale.value = width / height
|
||||
imgSucc.value = true
|
||||
emit('load')
|
||||
}
|
||||
function imgErr() {
|
||||
imgSucc.value = false
|
||||
emit('error')
|
||||
}
|
||||
|
||||
function clickImage() {
|
||||
if (props.to) {
|
||||
uni.navigateTo({
|
||||
url: props.to
|
||||
})
|
||||
}
|
||||
emit('click')
|
||||
if (props.closeOnClick) {
|
||||
close()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user