add(login):完善登录逻辑
This commit is contained in:
@@ -4,13 +4,19 @@
|
||||
<div class="field-wrap">
|
||||
<i class="icon" :data-feather="props.iconName" ref="iconElement"></i>
|
||||
|
||||
<input :type="props.type" v-model="inputValue" :placeholder="props.placeholder" />
|
||||
<input :type="props.type" v-model="inputValue" :placeholder="props.placeholder" v-bind="attrs"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 使用 Options API 块设置配置选项
|
||||
export default {
|
||||
// 阻止父组件透传的属性（如 @click, style, data-*）默认应用到根元素 <div> 上
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
import { ref, defineProps, onMounted, watch, computed } from 'vue';
|
||||
import { ref, defineProps, onMounted, watch, computed, useAttrs } from 'vue';
|
||||
import feather from 'feather-icons';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -36,7 +42,7 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const attrs = useAttrs()
|
||||
const inputValue = computed({
|
||||
get(){
|
||||
return props.modelValue;
|
||||
@@ -128,7 +134,6 @@ label {
|
||||
}
|
||||
|
||||
.field-wrap input {
|
||||
width: 100%;
|
||||
padding: 12px 12px 12px 40px;
|
||||
background: #f1f5f9; /* 浅灰底色 */
|
||||
border: 2px solid transparent;
|
||||
|
||||
@@ -2,14 +2,21 @@
|
||||
<div id="btn">
|
||||
<button
|
||||
class="submit-btn"
|
||||
:disabled="props.disabled"
|
||||
v-bind="attrs"
|
||||
:disabled="props.disabled || props.loading" v-bind="attrs"
|
||||
:class="[
|
||||
`variant-${props.variant}`, // 动态绑定样式类
|
||||
{ 'is-loading': props.loading } // 加载状态类
|
||||
`variant-${props.variant}`,
|
||||
{ 'is-loading': props.loading }
|
||||
]"
|
||||
>
|
||||
<slot></slot>
|
||||
<span v-if="props.loading" class="spinner-icon"></span>
|
||||
|
||||
<span :class="{ 'is-hidden': props.loading }">
|
||||
<slot></slot>
|
||||
|
||||
</span>
|
||||
<div class="iconBox" v-show="!props.loading"><slot name="icon"></slot></div>
|
||||
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -24,7 +31,6 @@ export default {
|
||||
|
||||
<script setup>
|
||||
import { defineProps, useAttrs, onMounted } from 'vue';
|
||||
import feather from 'feather-icons'
|
||||
|
||||
const props = defineProps({
|
||||
// 按钮样式变体：primary, secondary, danger, text
|
||||
@@ -127,4 +133,77 @@ const attrs = useAttrs()
|
||||
background: transparent;
|
||||
color: #4338ca;
|
||||
}
|
||||
/* 按钮基础样式 (假设你已有一些基础样式) */
|
||||
.submit-btn {
|
||||
position: relative; /* 确保 spinner-icon 可以相对于按钮定位 */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* =======================================
|
||||
1. 加载状态：is-loading
|
||||
======================================= */
|
||||
.submit-btn.is-loading {
|
||||
/* 视觉反馈：半透明、改变颜色或禁用 */
|
||||
opacity: 0.8;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none; /* 确保点击穿透 */
|
||||
}
|
||||
|
||||
/* =======================================
|
||||
2. 旋转图标样式：spinner-icon
|
||||
======================================= */
|
||||
.submit-btn .spinner-icon {
|
||||
display: inline-block;
|
||||
width: 1em; /* 旋转图标的宽度 */
|
||||
height: 1em; /* 旋转图标的高度 */
|
||||
border: 2px solid currentColor; /* 边框颜色继承自按钮文本颜色 */
|
||||
border-top-color: transparent; /* 顶部透明，形成旋转的缺口 */
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite; /* 应用旋转动画 */
|
||||
margin-right: 0.5em; /* 在图标和文本之间添加间距 */
|
||||
}
|
||||
|
||||
.iconBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 在加载状态且有文本时，清除右边距 */
|
||||
.submit-btn.is-loading .spinner-icon {
|
||||
/* 如果按钮内容被隐藏了，这个 margin 应该根据你的布局决定是否清除 */
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* =======================================
|
||||
3. 文本隐藏样式
|
||||
======================================= */
|
||||
.is-hidden {
|
||||
/* 隐藏文本，但不移除它，保持布局稳定 */
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* =======================================
|
||||
4. 旋转动画定义
|
||||
======================================= */
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<script setup>
|
||||
import { useMessage } from './useAlert';
|
||||
|
||||
// 获取全局状态和移除方法
|
||||
const { messages, remove } = useMessage();
|
||||
|
||||
// 图标配置
|
||||
const icons = {
|
||||
success: `<svg class="w-5 h-5" fill="none" stroke="#10B981" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
|
||||
error: `<svg class="w-5 h-5" fill="none" stroke="#EF4444" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
|
||||
warning: `<svg class="w-5 h-5" fill="none" stroke="#F59E0B" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>`,
|
||||
info: `<svg class="w-5 h-5" fill="none" stroke="#3B82F6" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="msg-container">
|
||||
<TransitionGroup name="msg-fade">
|
||||
<div
|
||||
v-for="item in messages"
|
||||
:key="item.id"
|
||||
class="msg-card"
|
||||
@click="remove(item.id)"
|
||||
>
|
||||
<div class="msg-icon" v-html="icons[item.type]"></div>
|
||||
<span class="msg-text">{{ item.content }}</span>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.msg-container {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
pointer-events: none; /* 重要：让鼠标能点击背后的页面 */
|
||||
}
|
||||
|
||||
.msg-card {
|
||||
pointer-events: auto; /* 恢复卡片可点击 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 18px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 50px;
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0, 0, 0, 0.08),
|
||||
0 0 0 1px rgba(0,0,0,0.02);
|
||||
min-width: 200px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.msg-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* 深度选择器控制 SVG 大小 */
|
||||
.msg-icon :deep(svg) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.msg-text {
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 动画部分 */
|
||||
.msg-fade-enter-active,
|
||||
.msg-fade-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 更有弹性的贝塞尔曲线 */
|
||||
}
|
||||
|
||||
.msg-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.9);
|
||||
}
|
||||
|
||||
.msg-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 1. 定义全局共享的状态 (单例模式)
|
||||
const messages = ref([]);
|
||||
let idCounter = 0;
|
||||
|
||||
export function useMessage() {
|
||||
|
||||
// 移除弹窗
|
||||
const remove = (id) => {
|
||||
const index = messages.value.findIndex(item => item.id === id);
|
||||
if (index !== -1) {
|
||||
messages.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加弹窗
|
||||
// type: 'success' | 'error' | 'warning' | 'info'
|
||||
const show = (content, type = 'info', duration = 3000) => {
|
||||
const id = idCounter++;
|
||||
const message = { id, content, type };
|
||||
|
||||
messages.value.push(message);
|
||||
|
||||
// 自动销毁
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
remove(id);
|
||||
}, duration);
|
||||
}
|
||||
};
|
||||
|
||||
// 快捷方法
|
||||
const success = (content) => show(content, 'success');
|
||||
const error = (content) => show(content, 'error');
|
||||
const warning = (content) => show(content, 'warning');
|
||||
const info = (content) => show(content, 'info');
|
||||
|
||||
return {
|
||||
messages, // 导出给组件渲染用
|
||||
show,
|
||||
remove,
|
||||
success,
|
||||
error,
|
||||
warning,
|
||||
info
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user