joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:修改 button 和 word-card 样式

Browse Source
This commit is contained in:
R524809
2025-09-28 17:31:10 +08:00
parent 6acc5d676c
commit b892b5625a
17 changed files with 610 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/buttonTest/buttonTest.json
+10
View File
@@ -0,0 +1,10 @@
{
"navigationBarTitleText": "按钮组件测试",
"navigationBarBackgroundColor": "#FFD719",
"backgroundColor": "#F6F6F6",
"usingComponents": {
"toy-button": "../../ui/button/button",
"van-icon": "@vant/weapp/icon/index",
"word-card": "../../components/word-card/word-card"
}
}
miniprogram/pages/buttonTest/buttonTest.less
+34
View File
@@ -0,0 +1,34 @@
page {
background-color: #F6F6F6;
}
.button-test-container {
padding: 40rpx;
}
.test-section {
margin-bottom: 60rpx;
}
.section-title {
display: block;
font-size: 32rpx;
font-weight: 600;
color: #141414;
margin-bottom: 24rpx;
}
.button-group {
display: flex;
flex-direction: column;
gap: 24rpx;
align-items: flex-start;
}
.word-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32rpx;
width: 100%;
max-width: 600rpx;
}
miniprogram/pages/buttonTest/buttonTest.ts
+28
View File
@@ -0,0 +1,28 @@
Page({
data: {},
onButtonClick(e: WechatMiniprogram.TouchEvent) {
console.log('按钮点击:', e);
wx.showToast({
title: '按钮被点击了',
icon: 'success',
duration: 1000
});
},
onWordColorTap(e: any) {
console.log('点击了颜色:', e);
wx.showToast({
title: '点击了颜色',
icon: 'none',
});
},
onWordDelete(e: any) {
console.log('删除文字:', e);
wx.showToast({
title: '删除文字',
icon: 'none',
});
}
});
miniprogram/pages/buttonTest/buttonTest.wxml
+160
View File
@@ -0,0 +1,160 @@
<view class="button-test-container">
<view class="test-section">
<text class="section-title">主要按钮 (Primary)</text>
<view class="button-group">
<toy-button type="primary" bind:click="onButtonClick"
>主要按钮</toy-button
>
<toy-button type="primary" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="primary" loading bind:click="onButtonClick"
>加载中</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">次要按钮 (Secondary)</text>
<view class="button-group">
<toy-button type="secondary" bind:click="onButtonClick"
>次要按钮</toy-button
>
<toy-button type="secondary" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="secondary" loading bind:click="onButtonClick"
>加载中</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">绿色按钮 (Green)</text>
<view class="button-group">
<toy-button type="green" bind:click="onButtonClick"
>绿色按钮</toy-button
>
<toy-button type="green" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="green" loading bind:click="onButtonClick"
>加载中</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">白色按钮 (White)</text>
<view class="button-group">
<toy-button type="white" bind:click="onButtonClick"
>白色按钮</toy-button
>
<toy-button type="white" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="white" plain bind:click="onButtonClick"
>透明模式</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">扁平化按钮 (Flat)</text>
<view class="button-group">
<toy-button type="primary" flat bind:click="onButtonClick"
>扁平主要</toy-button
>
<toy-button type="secondary" flat bind:click="onButtonClick"
>扁平次要</toy-button
>
<toy-button type="white" flat bind:click="onButtonClick"
>扁平白色</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">带图标按钮</text>
<view class="button-group">
<toy-button type="primary" icon="add" bind:click="onButtonClick"
>添加</toy-button
>
<toy-button
type="secondary"
icon="delete"
bind:click="onButtonClick"
>删除</toy-button
>
<toy-button type="white" icon="edit" bind:click="onButtonClick"
>编辑</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">不同尺寸</text>
<view class="button-group">
<toy-button
type="primary"
width="200rpx"
bind:click="onButtonClick">
小按钮
</toy-button>
<toy-button
type="secondary"
width="300rpx"
bind:click="onButtonClick"
>中按钮</toy-button
>
<toy-button type="white" width="400rpx" bind:click="onButtonClick">
大按钮
</toy-button>
</view>
</view>
</view>
<view class="test-section">
<text class="section-title">点击动效测试</text>
<view class="button-group">
<toy-button type="primary" bind:click="onButtonClick"
>点击我测试动效</toy-button
>
<toy-button type="secondary" bind:click="onButtonClick"
>抖动效果</toy-button
>
<toy-button type="white" bind:click="onButtonClick"
>缩放动画</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">Word Card 测试</text>
<view class="word-cards-grid">
<word-card
word="王"
color="#FFD719"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
<word-card
word="手"
color="#93D333"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
<word-card
word="哭"
color="#FF6B9D"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
<word-card
word="少"
color="#4ECDC4"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
</view>
</view>