You've already forked template-MP
新增：全量优化
This commit is contained in:
yuantao
74
components/common/Card.vue
Normal file
74
components/common/Card.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<view class="card" :class="{ 'card--shadow': shadow, 'card--border': border }">
|
||||
<view class="card__header" v-if="title || $slots.header">
|
||||
<slot name="header">
|
||||
<view class="card__title">{{ title }}</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view class="card__body">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="card__footer" v-if="$slots.footer">
|
||||
<slot name="footer"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 定义props
|
||||
defineProps({
|
||||
// 卡片标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示阴影
|
||||
shadow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
// 阴影样式
|
||||
&--shadow {
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// 边框样式
|
||||
&--border {
|
||||
border: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: 24rpx 32rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
195
components/common/CustomButton.vue
Normal file
195
components/common/CustomButton.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view
|
||||
class="custom-button"
|
||||
:class="[`custom-button--${type}`, `custom-button--${size}`, { 'custom-button--disabled': disabled, 'custom-button--loading': loading }]"
|
||||
@click="handleClick"
|
||||
>
|
||||
<view class="custom-button__loading" v-if="loading">
|
||||
<u-loading-icon mode="circle" size="20" color="#fff" />
|
||||
</view>
|
||||
<view class="custom-button__content">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
// 按钮类型
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary', // primary, secondary, danger, ghost
|
||||
validator: (value) => ['primary', 'secondary', 'danger', 'ghost'].includes(value)
|
||||
},
|
||||
// 按钮大小
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium', // small, medium, large
|
||||
validator: (value) => ['small', 'medium', 'large'].includes(value)
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否加载中
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 防抖时间（毫秒）
|
||||
debounce: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
// 定义emits
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
// 防抖定时器
|
||||
const debounceTimer = ref(null)
|
||||
|
||||
/**
|
||||
* 处理点击事件
|
||||
* @param {Event} e 点击事件对象
|
||||
*/
|
||||
function handleClick(e) {
|
||||
// 如果禁用或加载中，不处理点击
|
||||
if (props.disabled || props.loading) {
|
||||
return
|
||||
}
|
||||
|
||||
// 如果设置了防抖
|
||||
if (props.debounce > 0) {
|
||||
if (debounceTimer.value) {
|
||||
clearTimeout(debounceTimer.value)
|
||||
}
|
||||
|
||||
debounceTimer.value = setTimeout(() => {
|
||||
emit('click', e)
|
||||
debounceTimer.value = null
|
||||
}, props.debounce)
|
||||
} else {
|
||||
emit('click', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 组件卸载前清除定时器
|
||||
onBeforeUnmount(() => {
|
||||
if (debounceTimer.value) {
|
||||
clearTimeout(debounceTimer.value)
|
||||
debounceTimer.value = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
user-select: none;
|
||||
border: 1rpx solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// 主要按钮
|
||||
&--primary {
|
||||
color: #fff;
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
|
||||
&:not(.custom-button--disabled):active {
|
||||
background-color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
// 次要按钮
|
||||
&--secondary {
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #d9d9d9;
|
||||
|
||||
&:not(.custom-button--disabled):active {
|
||||
background-color: #e6e6e6;
|
||||
border-color: #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
||||
// 危险按钮
|
||||
&--danger {
|
||||
color: #fff;
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
|
||||
&:not(.custom-button--disabled):active {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
}
|
||||
|
||||
// 幽灵按钮
|
||||
&--ghost {
|
||||
color: #1890ff;
|
||||
background-color: transparent;
|
||||
border-color: #1890ff;
|
||||
|
||||
&:not(.custom-button--disabled):active {
|
||||
color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用状态
|
||||
&--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
&--loading {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// 小尺寸
|
||||
&--small {
|
||||
height: 56rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
// 中等尺寸
|
||||
&--medium {
|
||||
height: 72rpx;
|
||||
padding: 0 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
// 大尺寸
|
||||
&--large {
|
||||
height: 88rpx;
|
||||
padding: 0 40rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
141
components/common/FormInput.vue
Normal file
141
components/common/FormInput.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<view class="form-input">
|
||||
<view class="form-input__label" v-if="label">
|
||||
{{ label }}
|
||||
<text class="form-input__required" v-if="required">*</text>
|
||||
</view>
|
||||
<view class="form-input__wrapper">
|
||||
<input
|
||||
class="form-input__field"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:value="modelValue"
|
||||
:disabled="disabled"
|
||||
:maxlength="maxlength"
|
||||
@input="handleInput"
|
||||
@blur="handleBlur"
|
||||
@focus="handleFocus"
|
||||
/>
|
||||
<view class="form-input__suffix" v-if="$slots.suffix">
|
||||
<slot name="suffix"></slot>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-input__error" v-if="error">{{ error }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
// 输入框的值
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 标签
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 占位符
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 输入框类型
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
// 是否必填
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 最大长度
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: 140
|
||||
},
|
||||
// 错误信息
|
||||
error: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 定义emits
|
||||
const emit = defineEmits(['update:modelValue', 'blur', 'focus'])
|
||||
|
||||
/**
|
||||
* 处理输入事件
|
||||
* @param {Event} e 输入事件对象
|
||||
*/
|
||||
function handleInput(e) {
|
||||
emit('update:modelValue', e.detail.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理失去焦点事件
|
||||
* @param {Event} e 失去焦点事件对象
|
||||
*/
|
||||
function handleBlur(e) {
|
||||
emit('blur', e.detail.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理获得焦点事件
|
||||
* @param {Event} e 获得焦点事件对象
|
||||
*/
|
||||
function handleFocus(e) {
|
||||
emit('focus', e.detail.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-input {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&__label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
&__required {
|
||||
color: #ff4d4f;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1rpx solid #d9d9d9;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 24rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&__field {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__suffix {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
&__error {
|
||||
font-size: 24rpx;
|
||||
color: #ff4d4f;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user