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

feat:添加按钮点击效果

Browse Source
This commit is contained in:
joey
2025-06-12 17:08:32 +08:00
parent 3291a727b2
commit 02df74f35f
12 changed files with 83 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
eslint.config.js
+6 -1
View File
@@ -5,7 +5,12 @@ import pluginJs from '@eslint/js';
import pluginPrettier from 'eslint-plugin-prettier';
export default tseslint.config(
{ ignores: ['dist'] },
{
ignores: ['dist'],
ignorePatterns: [
"**/*.wxs" // 忽略所有 wxs 文件
]
},
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
miniprogram/components/color-picker/color-picker.less
+2 -2
View File
@@ -16,14 +16,14 @@
font-size: 32rpx;
color: #141414;
font-weight: bold;
margin-bottom: 30rpx;
// margin-bottom: 30rpx;
}
.color-options-title {
width: 100%;
height: 1rpx;
position: relative;
padding: 20rpx 0;
padding: 30rpx 0;
.color-options-title-text {
position: absolute;
miniprogram/components/color-picker/color-picker.ts
+6 -3
View File
@@ -19,7 +19,7 @@ Component({
* 组件的初始数据
*/
data: {
WATER_COLORS: WATER_COLORS,
extended24Colors: WATER_COLORS.extended24,
},
lifetimes: {
attached() {},
@@ -34,11 +34,14 @@ Component({
onSelectColor(e: WechatMiniprogram.TouchEvent) {
const { color } = e.currentTarget.dataset;
console.log('Selected color:', color);
this.setData({
currentColor: color,
});
this.triggerEvent('onSelectColor', { color });
},
onChange(e: WechatMiniprogram.TouchEvent) {
const { currentColor } = this.data;
this.triggerEvent('onChange', { color: currentColor });
},
},
});
miniprogram/components/color-picker/color-picker.wxml
+4 -4
View File
@@ -4,7 +4,7 @@
custom-class="color-picker-popup">
<view class="color-picker-container">
<text class="color-picker-title">选择颜色</text>
<view class="color-options-title">
<!-- <view class="color-options-title">
<text class="color-options-title-text">基础12色</text>
<view class="color-options-title-line"></view>
</view>
@@ -20,9 +20,9 @@
<view class="color-options-title">
<text class="color-options-title-text">扩展24色</text>
<view class="color-options-title-line"></view>
</view>
</view> -->
<view class="color-options">
<block wx:for="{{WATER_COLORS.extended24}}" wx:key="index">
<block wx:for="{{extended24Colors}}" wx:key="index">
<view
class="color-option {{item.hex === currentColor ? 'selected' : ''}}"
style="background-color: {{item.hex}};"
@@ -32,7 +32,7 @@
</view>
<view class="btn-area">
<!-- <view class="btn-yellow">确认选择</view> -->
<toy-button type="primary" bind:click="" width="400rpx">
<toy-button type="primary" bind:click="onChange" width="400rpx">
确认选择
</toy-button>
</view>
miniprogram/constants/index.ts
+1 -1
View File
@@ -39,7 +39,7 @@ export const WATER_COLORS = {
{ name: '棕色', hex: '#A52A2A' },
{ name: '深棕色', hex: '#8B4513' },
{ name: '灰色', hex: '#808080' },
{ name: '白色', hex: '#FFFFFF' },
{ name: '银灰色', hex: '#C0C0C0' },
{ name: '米色', hex: '#F5F5DC' },
{ name: '黑色', hex: '#000000' },
],
miniprogram/pages/index/index.less
+1
View File
@@ -68,6 +68,7 @@ page {
background-color: #fff;
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
padding-top: 24rpx;
box-sizing: border-box;
}
miniprogram/pages/index/index.ts
+11 -6
View File
@@ -13,7 +13,6 @@ Page({
showColorPopup: false,
currentKey: 0,
currentColor: '',
WATER_COLORS: WATER_COLORS,
},
onReady() {
@@ -68,27 +67,24 @@ Page({
tapCard(e: WechatMiniprogram.TouchEvent) {
const { url } = e.currentTarget.dataset;
console.log('navigateTo url:', url);
wx.navigateTo({ url });
},
onConfirmInput(e: WechatMiniprogram.Input) {
const { value } = e.detail;
const characters = value.split('');
const shuffledColors = [...WATER_COLORS.basic12].sort(
const shuffledColors = [...WATER_COLORS.extended24].sort(
() => Math.random() - 0.5,
);
const updatedCardList = characters.map((char, index) => ({
color: shuffledColors[index % shuffledColors.length].hex,
word: char,
}));
console.log('updatedCardList', updatedCardList);
this.drawCanvas(updatedCardList);
},
deleteWordCard(e: WechatMiniprogram.CustomEvent) {
const { key, word } = e.detail;
console.log('deleteWordCard key:', key, 'word:', word);
const { cardList } = this.data;
const updatedCardList = cardList.filter((_, index) => index !== key);
@@ -131,7 +127,6 @@ Page({
onColorTap(e: WechatMiniprogram.CustomEvent) {
const { key, word, color } = e.detail;
console.log('onColorTap key:', key, 'word:', word, 'color:', color);
this.setData({
showColorPopup: true,
currentKey: key,
@@ -146,4 +141,14 @@ Page({
currentColor: '',
});
},
onChangeColor(e: WechatMiniprogram.CustomEvent) {
const { color } = e.detail;
const { currentKey, cardList } = this.data;
cardList[currentKey].color = color;
this.setData({
showColorPopup: false,
cardList,
});
},
});
miniprogram/pages/index/index.wxml
+10 -1
View File
@@ -41,7 +41,8 @@
<color-picker
show="{{showColorPopup}}"
currentColor="{{currentColor}}"
bind:onClose="onCloseColorPopup" />
bind:onClose="onCloseColorPopup"
bind:onChange="onChangeColor" />
</view>
<view class="btn-area">
<toy-button
@@ -53,4 +54,12 @@
icon-class-prefix="toy-icon">
下载打印
</toy-button>
<!-- <toy-button
type="green"
width="680rpx"
disabled="{{cardList.length <= 0}}"
icon="download"
icon-class-prefix="toy-icon">
下载打印
</toy-button> -->
</view>
miniprogram/service/textDrawService.ts
-1
View File
@@ -19,7 +19,6 @@ function calculateCircleCenters(
const requiredSpace = 2 * radius * circleCount;
const spaceBetween =
(availableWidth - requiredSpace) / (circleCount - 1);
console.log('spaceBetween---:', spaceBetween);
if (spaceBetween > maxSpacing) {
// 超过最大间距时，固定间距并居中对齐
miniprogram/ui/button/button.less
+11
View File
@@ -22,6 +22,11 @@
background: rgba(255, 215, 25, 0.5);
box-shadow: 0px 10rpx 4rpx rgba(219, 185, 23, 0.5);
}
&.active {
transform: translateY(10rpx);
box-shadow: 0 0 0 rgba(219, 185, 23, 0.5); /* 阴影效果 */
}
}
&--green {
@@ -32,10 +37,16 @@
background: rgba(147, 211, 51, 0.5);
box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 0.5);
}
&.active {
transform: translateY(10rpx);
box-shadow: 0 0 0 rgba(121, 185, 21, 0.5); /* 阴影效果 */
}
}
.loading-class,
&__icon {
margin-right: 24rpx;
}
}
miniprogram/ui/button/button.wxml
+8 -1
View File
@@ -1,7 +1,12 @@
<wxs src="../wxs/base.wxs" module="Utils" />
<wxs module="wxs" src="./button.wxs"></wxs>
<!-- <view class="keyboard" bind:touchstart="{{wxs.keypadTouchStart}}" bind:touchend="{{wxs.keypadTouchEnd}}"> -->
<button
data-id="test-toy-button-id"
class="toy-button toy-button--{{type}} {{ disabled ? 'toy-button--disabled' : '' }} {{Utils.classNames({disabled: disabled, loading: loading })}}"
data-disabled="{{disabled}}"
data-loading="{{loading}}"
style="{{style}};{{width ? 'width:' + width + ';' : ''}};{{height ? 'height:' + height + ';' : ''}}"
session-from="{{ sessionFrom }}"
send-message-title="{{ sendMessageTitle }}"
@@ -10,7 +15,9 @@
show-message-card="{{ showMessageCard }}"
app-parameter="{{ appParameter }}"
aria-label="{{ ariaLabel }}"
bindtap="{{ disabled || loading ? '' : 'onClick' }}"
bind:touchstart="{{wxs.touchStart}}"
bind:touchend="{{wxs.touchEnd}}"
bind:tap="{{ disabled || loading ? '' : 'onClick'}}"
bindgetuserinfo="onGetUserInfo"
bindcontact="onContact"
bindgetphonenumber="onGetPhoneNumber"
miniprogram/ui/button/button.wxs
+23
View File
@@ -0,0 +1,23 @@
module.exports = {
touchStart: function (event, ownerInstance) {
var instance = event.instance;
var dataSet = instance.getDataset();
var disabled = dataSet.disabled;
var loading = dataSet.loading;
if (instance && !disabled && !loading) {
instance.addClass('active')
}
},
touchEnd: function (event, ownerInstance) {
var instance = event.instance
var dataSet = instance.getDataset();
var disabled = dataSet.disabled;
var loading = dataSet.loading;
if (instance && !disabled && !loading) {
instance.removeClass('active')
}
},
};