root
/
agri-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

加清除框

master
lld 2025-12-28 23:45:43 +08:00
parent 7372ec452e
commit 2380a85a40
1 changed files with 124 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
pages/demo/index.vue
View File

@ -6,48 +6,63 @@
<form @submit="handleConnect"> <form @submit="handleConnect">
<view class="form-item"> <view class="form-item">
<label>服务器地址：</label> <label>服务器地址：</label>
<input <view class="input-wrapper">
v-model="mqttConfig.broker" <input
type="text" v-model="mqttConfig.broker"
placeholder="如：ws://test.mosquitto.org:8080/mqtt" type="text"
class="form-input" placeholder="如：ws://test.mosquitto.org:8080/mqtt"
/> class="form-input"
/>
<text class="clear-icon" @click="clearInput('broker')" v-if="mqttConfig.broker">×</text>
</view>
</view> </view>
<view class="form-item" v-if="false"> <view class="form-item" v-if="false">
<label>客户端ID：</label> <label>客户端ID：</label>
<input <view class="input-wrapper">
v-model="mqttConfig.clientId" <input
type="text" v-model="mqttConfig.clientId"
placeholder="自动生成或自定义" type="text"
class="form-input" placeholder="自动生成或自定义"
/> class="form-input"
/>
<text class="clear-icon" @click="clearInput('clientId')" v-if="mqttConfig.clientId">×</text>
</view>
</view> </view>
<view class="form-item"> <view class="form-item">
<label>用户名：</label> <label>用户名：</label>
<input <view class="input-wrapper">
v-model="mqttConfig.username" <input
type="text" v-model="mqttConfig.username"
placeholder="可选" type="text"
class="form-input" placeholder="可选"
/> class="form-input"
/>
<text class="clear-icon" @click="clearInput('username')" v-if="mqttConfig.username">×</text>
</view>
</view> </view>
<view class="form-item"> <view class="form-item">
<label>密码：</label> <label>密码：</label>
<input <view class="input-wrapper">
v-model="mqttConfig.password" <input
type="password" v-model="mqttConfig.password"
placeholder="可选" type="password"
class="form-input" placeholder="可选"
/> class="form-input"
/>
<text class="clear-icon" @click="clearInput('password')" v-if="mqttConfig.password">×</text>
</view>
</view> </view>
<view class="form-item" v-if="false"> <view class="form-item" v-if="false">
<label>连接超时：</label> <label>连接超时：</label>
<input <view class="input-wrapper">
v-model.number="mqttConfig.timeout" <input
type="number" v-model.number="mqttConfig.timeout"
placeholder="默认30秒" type="number"
class="form-input" placeholder="默认30秒"
/> class="form-input"
/>
<text class="clear-icon" @click="clearInput('timeout')" v-if="mqttConfig.timeout">×</text>
</view>
</view> </view>
<view class="btn-group"> <view class="btn-group">
@ -74,12 +89,15 @@
<view class="section-title">主题订阅</view> <view class="section-title">主题订阅</view>
<view class="form-item"> <view class="form-item">
<label>订阅主题：</label> <label>订阅主题：</label>
<input <view class="input-wrapper">
v-model="subscribeTopic" <input
type="text" v-model="subscribeTopic"
placeholder="如：test/topic" type="text"
class="form-input" placeholder="如：test/topic"
/> class="form-input"
/>
<text class="clear-icon" @click="subscribeTopic = ''" v-if="subscribeTopic">×</text>
</view>
</view> </view>
<button <button
type="primary" type="primary"
@ -108,7 +126,6 @@
</view> </view>
</view> </view>
<!-- 消息日志区域 --> <!-- 消息日志区域 -->
<view class="log-section"> <view class="log-section">
<view class="section-title">消息日志</view> <view class="section-title">消息日志</view>
@ -131,26 +148,31 @@
</scroll-view> </scroll-view>
</view> </view>
<!-- 发布消息区域 --> <!-- 发布消息区域 -->
<view class="publish-section" v-if="isConnected"> <view class="publish-section" v-if="isConnected">
<view class="section-title">发布消息</view> <view class="section-title">发布消息</view>
<view class="form-item"> <view class="form-item">
<label>发布主题：</label> <label>发布主题：</label>
<input <view class="input-wrapper">
v-model="publishTopic" <input
type="text" v-model="publishTopic"
placeholder="如：test/topic" type="text"
class="form-input" placeholder="如：test/topic"
/> class="form-input"
/>
<text class="clear-icon" @click="publishTopic = ''" v-if="publishTopic">×</text>
</view>
</view> </view>
<view class="form-item"> <view class="form-item">
<label>消息内容：</label> <label>消息内容：</label>
<textarea <view class="textarea-wrapper">
v-model="publishMessage" <textarea
placeholder="输入要发布的消息内容" v-model="publishMessage"
class="form-textarea" placeholder="输入要发布的消息内容"
></textarea> class="form-textarea"
></textarea>
<text class="clear-icon textarea-clear" @click="publishMessage = ''" v-if="publishMessage">×</text>
</view>
</view> </view>
<button <button
type="primary" type="primary"
@ -207,6 +229,15 @@ export default {
} }
}, },
methods: { methods: {
// 清除配置项输入框内容
clearInput(field) {
if (field === 'timeout') {
this.mqttConfig[field] = ''
} else {
this.$set(this.mqttConfig, field, '')
}
},
// 添加日志 // 添加日志
addLog(type, topic, message) { addLog(type, topic, message) {
const time = new Date().toLocaleTimeString() const time = new Date().toLocaleTimeString()
@ -322,7 +353,7 @@ export default {
this.client.subscribe(this.subscribeTopic, (error) => { this.client.subscribe(this.subscribeTopic, (error) => {
if (error) { if (error) {
this.addLog('system', '', '订阅失败：' + error.message) this.addLog('system', this.subscribeTopic, '订阅失败：' + error.message)
uni.showToast({ uni.showToast({
title: '订阅失败', title: '订阅失败',
icon: 'none' icon: 'none'
@ -433,20 +464,61 @@ export default {
margin-bottom: 5px; margin-bottom: 5px;
} }
/* 输入框容器 - 包含清除按钮 */
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.form-input { .form-input {
flex: 1;
height: 40px; height: 40px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
padding: 0 10px; padding: 0 30px 0 10px; /* 右侧留出清除按钮空间 */
font-size: 14px; font-size: 14px;
} }
/* 文本域容器 */
.textarea-wrapper {
position: relative;
}
.form-textarea { .form-textarea {
width: 100%;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px 30px 10px 10px; /* 右侧留出清除按钮空间 */
font-size: 14px; font-size: 14px;
min-height: 100px; min-height: 100px;
box-sizing: border-box;
}
/* 清除按钮样式 */
.clear-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 18px;
color: #999;
cursor: pointer;
z-index: 10;
}
/* 文本域清除按钮位置调整 */
.textarea-clear {
top: 10px;
transform: none;
}
.clear-icon:hover {
color: #f00;
} }
.btn-group { .btn-group {