<template>
|
<view class="container">
|
<text class="title">uView按钮测试</text>
|
|
<!-- 测试按钮 -->
|
<view class="button-group">
|
<u-button @click="testClick" type="primary" :throttle-time="0">测试点击</u-button>
|
<u-button @click="openSetting" type="info" :throttle-time="0">打开设置</u-button>
|
<u-button @click="toggleLanguage" type="success" :throttle-time="0">切换语言</u-button>
|
</view>
|
|
<!-- 显示状态 -->
|
<view class="status">
|
<text>点击次数: {{ clickCount }}</text>
|
<text>当前语言: {{ currentLang }}</text>
|
<text>设置弹窗状态: {{ showSetting ? '打开' : '关闭' }}</text>
|
</view>
|
|
<!-- 设置弹窗 -->
|
<u-popup v-model="showSetting" mode="center" border-radius="10">
|
<view class="setting-popup">
|
<text class="popup-title">设置</text>
|
<u-form>
|
<u-form-item label="设备名称">
|
<u-input v-model="deviceName" />
|
</u-form-item>
|
</u-form>
|
<view class="setting-buttons">
|
<u-button @click="saveSetting" type="success" :throttle-time="0">确定</u-button>
|
<u-button @click="showSetting = false" type="default" :throttle-time="0">取消</u-button>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
clickCount: 0,
|
currentLang: '中文',
|
showSetting: false,
|
deviceName: '测试设备'
|
}
|
},
|
methods: {
|
testClick() {
|
this.clickCount++;
|
console.log('按钮被点击了', this.clickCount, '次');
|
uni.showToast({
|
title: '按钮点击成功！',
|
icon: 'success'
|
});
|
},
|
openSetting() {
|
console.log('打开设置按钮被点击');
|
this.showSetting = true;
|
},
|
toggleLanguage() {
|
console.log('切换语言按钮被点击');
|
this.currentLang = this.currentLang === '中文' ? 'English' : '中文';
|
uni.showToast({
|
title: '语言切换成功',
|
icon: 'success'
|
});
|
},
|
saveSetting() {
|
console.log('保存设置按钮被点击:', this.deviceName);
|
this.showSetting = false;
|
uni.showToast({
|
title: '设置保存成功',
|
icon: 'success'
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.container {
|
padding: 40rpx;
|
text-align: center;
|
}
|
|
.title {
|
font-size: 36rpx;
|
font-weight: bold;
|
margin-bottom: 40rpx;
|
color: #333;
|
}
|
|
.button-group {
|
display: flex;
|
flex-direction: column;
|
gap: 20rpx;
|
margin-bottom: 40rpx;
|
}
|
|
.status {
|
display: flex;
|
flex-direction: column;
|
gap: 10rpx;
|
text-align: left;
|
padding: 20rpx;
|
background: #f5f5f5;
|
border-radius: 10rpx;
|
}
|
|
.setting-popup {
|
background: #fff;
|
padding: 40rpx;
|
border-radius: 10rpx;
|
min-width: 500rpx;
|
}
|
|
.popup-title {
|
display: block;
|
font-size: 32rpx;
|
font-weight: bold;
|
text-align: center;
|
margin-bottom: 30rpx;
|
color: #333;
|
}
|
|
.setting-buttons {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 30rpx;
|
gap: 20rpx;
|
}
|
</style>
|
