70 lines
1.7 KiB
JavaScript
Executable File
70 lines
1.7 KiB
JavaScript
Executable File
/**
|
||
* Claymorphism 组件库导出
|
||
*
|
||
* 使用方式（在 pages.json 中配置 easycom）：
|
||
* {
|
||
* "easycom": {
|
||
* "autoscan": true,
|
||
* "custom": {
|
||
* "^Clay(A.*)": "@/components/Clay$1.vue"
|
||
* }
|
||
* }
|
||
* }
|
||
*
|
||
* 或手动导入：
|
||
* import ClayCard from '@/components/ClayCard.vue'
|
||
* import ClayButton from '@/components/ClayButton.vue'
|
||
* import ClayInput from '@/components/ClayInput.vue'
|
||
*/
|
||
|
||
export { default as ClayCard } from './ClayCard.vue'
|
||
export { default as ClayButton } from './ClayButton.vue'
|
||
export { default as ClayInput } from './ClayInput.vue'
|
||
|
||
/* ============================================
|
||
Claymorphism 设计系统说明
|
||
|
||
🎨 核心特点：
|
||
1. 双阴影效果（外部 + 内部）创造立体浮感
|
||
2. 柔和的渐变背景
|
||
3. 圆润的边角设计
|
||
4. 有机感的按压动画
|
||
|
||
📦 组件列表：
|
||
- ClayCard: 粘土风格卡片
|
||
- ClayButton: 粘土风格按钮
|
||
- ClayInput: 粘土风格输入框
|
||
|
||
🎯 使用示例：
|
||
|
||
<!-- 卡片 -->
|
||
<ClayCard size="lg" variant="primary" @tap="handleTap">
|
||
<text>卡片内容</text>
|
||
</ClayCard>
|
||
|
||
<!-- 按钮 -->
|
||
<ClayButton
|
||
text="确认"
|
||
variant="primary"
|
||
size="lg"
|
||
:loading="isLoading"
|
||
@tap="handleConfirm"
|
||
/>
|
||
|
||
<!-- 输入框 -->
|
||
<ClayInput
|
||
v-model="inputValue"
|
||
placeholder="请输入内容"
|
||
prefixIcon="🔍"
|
||
:clearable="true"
|
||
@confirm="handleSearch"
|
||
/>
|
||
|
||
🎨 样式变量（uni.scss）：
|
||
- $clay-shadow-sm/md/lg/xl: 阴影层级
|
||
- $clay-bg-light: #FAFAFA
|
||
- $clay-bg-white: #FFFFFF
|
||
- $clay-border: rgba(255, 255, 255, 0.8)
|
||
|
||
============================================ */
|