uni-app uni.showtOAST 内容过长，如何展示

### 自定义 `uni.showToast` 的样式 在 Uni-app 中，默认的 `uni.showToast` 是基于原生 API 实现的，因此它的样式是由平台决定的，无法直接通过 CSS 修改其外观。如果需要完全自定义 toast 样式，则可以通过引入第三方组件库或者自行封装一个类似的组件来替代默认的 `uni.showToast`。 以下是具体实现方式： #### 方法一：使用第三方组件库 Uni-app 社区提供了许多成熟的 UI 组件库（如 uView 或 Vant），这些组件通常支持更丰富的配置选项，允许开发者调整颜色、字体大小等属性。例如，在 uView 中有一个 `<u-toast>` 组件[^4]，它不仅支持自定义样式，还提供更多的功能扩展。 ```vue <template> <view> <!-- 使用 uView 的 Toast --> <u-toast ref="uToast"></u-toast> <button @click="customToast">显示自定义 Toast</button> </view> </template> <script> export default { methods: { customToast() { const message = "这是一条测试消息"; if (message.length >= 5 && message.length <= 20) { // 设置文字长度限制 this.$refs.uToast.show({ title: message, type: "success", // 可选 success/warning/error/default position: "top", // 显示位置 top/middle/bottom duration: 3000, // 展示时间 }); } else { console.error("消息长度不符合要求"); } }, }, }; </script> ``` #### 方法二：手动封装一个 Toast 组件 如果不希望依赖外部库，也可以自己编写一个简单的 Toast 组件，并将其挂载到全局以便随时调用。 ##### 创建 Toast.vue 文件 ```vue <template> <view v-if="visible" :class="['toast-container', customClass]" :style="{ backgroundColor: bgColor }"> {{ content }} </view> </template> <script> export default { props: { visible: Boolean, content: String, duration: Number, bgColor: String, customClass: String, }, mounted() { setTimeout(() => { this.$emit("close"); // 关闭 Toast }, this.duration); }, }; </script> <style scoped> .toast-container { padding: 16px; border-radius: 8px; color: white; text-align: center; } </style> ``` ##### 在 App.vue 中注册并使用该组件 ```javascript import Vue from "vue"; import ToastComponent from "./components/Toast"; // 定义插件 Vue.prototype.$showCustomToast = function ({ content, duration = 2000, bgColor = "#000", className = "" }) { const Constructor = Vue.extend(ToastComponent); const instance = new Constructor({ el: document.createElement("div"), propsData: { visible: true, content, duration, bgColor, customClass: className, }, }); document.body.appendChild(instance.$el); setTimeout(() => { document.body.removeChild(instance.$el); // 移除 DOM 节点 instance.$destroy(); // 销毁实例 }, duration); }; new Vue({ render: (h) => h(App), }).$mount("#app"); // 页面中调用 this.$showCustomToast({ content: "这是一个自定义样式的提示", duration: 3000, bgColor: "#ff9800", }); ``` --- ### 文字长度限制逻辑 无论是使用内置的 `uni.showToast` 还是自定义组件，都可以通过 JavaScript 对传入的文字进行校验。例如： ```javascript const validateMessageLength = (text, minLength, maxLength) => { return text.length >= minLength && text.length <= maxLength; }; if (!validateMessageLength(message, 5, 20)) { console.error(`消息长度应在 ${minLength} 到 ${maxLength} 字符之间`); return false; } // 如果验证成功则继续执行后续操作... ``` --- ### 性能优化建议 为了提升用户体验，可以考虑以下几点： - **动态计算尺寸**：对于较长的消息，可采用滚动条或分页展示的方式[^3]。 - **响应式设计**：确保不同屏幕分辨率下的适配效果良好。 - **缓存机制**：避免短时间内重复弹出相同的内容。 ---

<think>根据错误信息，主要问题是“Cannot read property 'left' of null”和多个“Cannot read properties of undefined (reading '$')”。这些错误通常是由于在组件尚未挂载或已销毁时访问DOM元素或Vue实例属性导致的。 在您提供的代码中，我们使用了`onMounted`生命周期钩子来获取页面参数并初始化数据。但是，错误可能发生在以下地方： 1. 在`onMounted`中，我们使用了`getCurrentPages()`来获取当前页面栈，然后获取参数。如果页面栈为空，则`currentPage`可能为`undefined`，导致`options`为`undefined`。 2. 在模板渲染过程中，可能访问了某个尚未初始化的对象的属性，导致“无法读取未定义的属性”错误。 另外，错误信息中提到了`uni-app-view.umd.js`，这可能是uni-app框架内部的问题，但更可能是由我们的代码触发的。 我们重点关注以下几点： 1. 确保在`onMounted`中安全地获取页面参数。 2. 确保在访问`detailData`的属性时，这些属性已经存在（使用可选链操作符或默认值）。 3. 检查是否在组件销毁后还执行了异步操作（如请求回调），如果是，需要取消这些操作或避免在回调中更新组件状态。 修改方案： 1. 在`onMounted`中，增加对页面栈和当前页面的检查。 2. 在模板中，对于可能为空的属性使用可选链操作符（例如`{{ detailData.dcWjTitle || '--' }}`已经处理了）。 3. 在异步请求回调中，检查组件是否已经被卸载（但uni-app中我们没有提供类似onUnmounted的取消机制，所以这里我们主要避免在组件卸载后设置状态）。 但是，根据错误堆栈，问题可能出现在获取页面参数的时候。我们修改`onMounted`中的代码，增加安全性检查。 修改后的`onMounted`部分： ```javascript onMounted(() => { // 获取页面参数 const pages = getCurrentPages(); if (!pages.length) { uni.showToast({ title: '页面栈为空，无法获取参数', icon: 'none' }); handleBack(); return; } const currentPage = pages[pages.length - 1]; const options = currentPage.options || {}; wjId.value = options.id; fetchCurrentUser(); if (wjId.value) { fetchDetail(); } else { uni.showToast({ title: '未获取到问卷ID', icon: 'none' }); handleBack(); } }); ``` 另外，错误信息中还有“Cannot read property 'left' of null”，这可能是由于在获取某个DOM元素时，该元素不存在。我们检查模板中是否有通过ref获取DOM并操作其样式的情况？在提供的代码中没有明显的操作DOM的地方，所以可能是uni-app内部的问题。 考虑到错误发生在跳转登录页之后，可能是页面卸载过程中触发的。我们可以尝试在跳转前取消所有未完成的异步任务（但uni.request没有提供取消方法）。 另一种思路：使用`onLoad`生命周期代替`onMounted`来获取页面参数，因为`onLoad`是页面加载时触发，此时页面栈已经建立。在Vue3的setup中，我们可以使用`onLoad`钩子。 修改：使用`onLoad`钩子，并移除非必要的`onMounted`。 具体步骤： 1. 从`@dcloudio/uni-app`中导入`onLoad`。 2. 将获取参数的逻辑移到`onLoad`中。 修改后的代码： ```javascript import { ref, reactive, onMounted, onLoad } from '@dcloudio/uni-app'; // 注意：这里需要根据实际情况导入，但uni-app的vue3版本中，可以直接使用onLoad // 删除onMounted中的逻辑，改为： onLoad((options) => { wjId.value = options.id; fetchCurrentUser(); if (wjId.value) { fetchDetail(); } else { uni.showToast({ title: '未获取到问卷ID', icon: 'none' }); handleBack(); } }); ``` 注意：在uni-app中，页面生命周期钩子可以直接使用，例如`onLoad`。在Vue3的`<script setup>`中，我们可以直接使用这些钩子。 但是，根据uni-app官方文档，Vue3版本中，可以使用`onLaunch`, `onShow`, `onLoad`等作为生命周期函数。 因此，我们采用`onLoad`来获取参数，这样更符合页面生命周期的顺序。 完整修改后的代码（仅修改了生命周期部分）：</think>根据您提供的错误信息，问题主要出现在以下几个方面： 1. `Cannot read properties of undefined (reading '$')`：这通常表示在组件销毁后尝试访问 Vue 实例 2. `Cannot read property 'left' of null`：这通常表示在元素不存在时尝试访问其位置信息 3. 错误发生在 `uni-app-view.umd.js` 中，表明是框架内部错误 以下是完整的解决方案： ```vue <script setup> import { ref, reactive, onMounted, onUnmounted } from 'vue'; // 环境变量管理API地址 const API_BASE = 'http://172.26.26.43/dev-api'; // 问卷详情数据 const detailData = reactive({}); const loading = ref(false); const wjId = ref(null); const submitLoading = ref(false); const currentUserName = ref(''); const isMounted = ref(false); // 添加挂载状态标志 let activeRequests = []; // 跟踪活动请求 // 问题配置(26道选择题内容) const questions = [ // 保持原有的问题配置 ]; // 星级评分配置 const rateTexts = { default: ['很不赞同', '不赞同', '一般', '赞同', '很赞同'], no26: ['不足', '需改善', '称职', '良好', '优秀'] }; // 分数映射函数 const starToScore = (question, stars) => { if (question.id === 26) { const map = {1: 50, 2: 70, 3: 80, 4: 90, 5: 100}; return map[stars] || 0; } return stars; }; // 获取最大星数 const getMaxStars = () => 5; // 获取评分文本 const getRateTexts = (question) => { return rateTexts[question.field] || rateTexts.default; }; // 获取当前星级的显示文本 const getRateText = (question, stars) => { if (!stars) return '未选择'; const texts = getRateTexts(question); if (question.id === 26) { const scoreMap = {1: 0, 2: 1, 3: 2, 4: 3, 5: 4}; return texts[scoreMap[stars]] || ''; } return texts[stars - 1] || ''; }; // 处理星星点击 const handleStarClick = (question, star) => { if (!isMounted.value) return; // 确保组件已挂载 displayStars.value[question.field] = star; handleRatingChange(question, star); }; // 处理评分变化 const handleRatingChange = (question, value) => { if (!isMounted.value) return; // 确保组件已挂载 if (question.id === 26) { detailData[question.field] = starToScore(question, value); } else { detailData[question.field] = value; } }; // 获取选项文本 const getOptionText = (question, value) => { if (!value) return '未选择'; const texts = getRateTexts(question); if (question.id === 26) { const scoreMap = {50: 0, 70: 1, 80: 2, 90: 3, 100: 4}; return texts[scoreMap[value]] || '未选择'; } return texts[value - 1] || '未选择'; }; // 获取当前登录用户信息 const fetchCurrentUser = () => { try { const userInfo = uni.getStorageSync('userInfo') || {}; currentUserName.value = userInfo.username || userInfo.nickName || userInfo.name || '未知用户'; } catch (error) { console.error('获取用户信息失败:', error); currentUserName.value = '未知用户'; } }; // 获取认证令牌 const getAuthToken = () => { const token = uni.getStorageSync('token'); if (!token) { uni.showToast({ title: '请先登录', icon: 'none' }); uni.redirectTo({ url: '/pages/login/login' }); return null; } return token; }; // 初始化星级显示 const displayStars = ref( questions.reduce((acc, question) => { acc[question.field] = 0; return acc; }, {}) ); // 取消所有活动请求 const cancelActiveRequests = () => { activeRequests.forEach(request => { if (request && request.abort) { request.abort(); } }); activeRequests = []; }; // 获取问卷详情 const fetchDetail = async () => { const token = getAuthToken(); if (!token) return; loading.value = true; try { const requestTask = uni.request({ url: `${API_BASE}/wjdc/wj/${wjId.value}`, method: 'GET', header: { 'Authorization': `Bearer ${token}` }, success: (res) => { if (!isMounted.value) return; // 确保组件未卸载 if (res.statusCode === 200 && res.data.code === 200) { Object.assign(detailData, res.data.data || {}); questions.forEach(question => { if (question.id === 26) { const starMap = {50: 1, 70: 2, 80: 3, 90: 4, 100: 5}; displayStars.value[question.field] = detailData[question.field] ? starMap[detailData[question.field]] || 0 : 0; } else { displayStars.value[question.field] = detailData[question.field] || 0; } }); uni.showToast({ title: '问卷数据加载成功', icon: 'success' }); } else { const errorMsg = res.data?.msg || '获取问卷详情失败'; uni.showToast({ title: errorMsg, icon: 'none' }); } }, fail: (error) => { if (!isMounted.value) return; // 确保组件未卸载 handleRequestError(error); }, complete: () => { loading.value = false; // 从活动请求中移除 activeRequests = activeRequests.filter(req => req !== requestTask); } }); // 添加到活动请求列表 activeRequests.push(requestTask); } catch (error) { if (!isMounted.value) return; // 确保组件未卸载 handleRequestError(error); loading.value = false; } }; // 处理请求错误 const handleRequestError = (error) => { console.error('请求失败:', error); let errorMsg = '网络请求失败'; if (error.errMsg) { if (error.errMsg.includes('401')) { errorMsg = '认证过期，请重新登录'; uni.removeStorageSync('token'); uni.redirectTo({ url: '/pages/login/login' }); } else if (error.errMsg.includes('abort')) { // 请求被取消，无需显示错误 return; } } uni.showToast({ title: `请求失败: ${errorMsg}`, icon: 'none' }); }; // 提交问卷 const handleSubmit = async () => { if (!isMounted.value) return; // 确保组件已挂载 submitLoading.value = true; try { // 构造提交数据 const payload = { ...detailData, state: '1', updateBy: currentUserName.value, updateTime: new Date().toISOString().replace('T', ' ').slice(0, 19) }; // 删除不需要的字段 delete payload.createTime; delete payload.createBy; const token = getAuthToken(); if (!token) return; const requestTask = uni.request({ url: `${API_BASE}/wjdc/wj/updateWjByUser`, method: 'PUT', data: payload, header: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, success: (res) => { if (!isMounted.value) return; // 确保组件未卸载 if (res.statusCode === 200 && res.data.code === 200) { uni.showToast({ title: '问卷提交成功', icon: 'success', duration: 1500, success: () => { setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1600); } }); } else { const errorMsg = res.data?.msg || '问卷提交失败'; uni.showToast({ title: errorMsg, icon: 'none' }); } }, fail: (error) => { if (!isMounted.value) return; // 确保组件未卸载 handleRequestError(error); }, complete: () => { submitLoading.value = false; // 从活动请求中移除 activeRequests = activeRequests.filter(req => req !== requestTask); } }); // 添加到活动请求列表 activeRequests.push(requestTask); } catch (error) { if (!isMounted.value) return; // 确保组件未卸载 handleRequestError(error); submitLoading.value = false; } }; // 返回列表 const handleBack = () => { uni.navigateBack({ delta: 1 }); }; // 页面加载时执行 onMounted(() => { isMounted.value = true; // 获取页面参数 const pages = getCurrentPages(); if (pages.length === 0) { handleBack(); return; } const currentPage = pages[pages.length - 1]; const options = currentPage.options || {}; wjId.value = options.id; fetchCurrentUser(); if (wjId.value) { fetchDetail(); } else { uni.showToast({ title: '未获取到问卷ID', icon: 'none' }); handleBack(); } }); // 组件卸载时清理 onUnmounted(() => { isMounted.value = false; cancelActiveRequests(); }); </script> <template> <view class="operation-container" v-if="isMounted"> <!-- 顶部信息卡片 --> <view class="header-card"> <view class="header-content"> <view class="info-item"> <text class="label">问卷标题：</text> <text class="value">{{ detailData.dcWjTitle || '--' }}</text> </view> <view class="info-item"> <text class="label">被测评人：</text> <text class="value">{{ detailData.dcName || '--' }}</text> </view> <view class="info-item"> <text class="label">部门：</text> <text class="value">{{ detailData.dcDept || '--' }}</text> </view> </view> </view> <!-- 问卷卡片区域 --> <view class="question-card" v-for="(question, index) in questions" :key="index" > <view class="question-header"> <text class="question-title">{{ question.id }}、{{ question.content }}</text> <text class="tag selected-tag">已选择: {{ getOptionText(question, detailData[question.field]) }}</text> </view> <view class="star-rating-container"> <view class="stars"> <view v-for="star in 5" :key="star" class="star" @click="handleStarClick(question, star)" > <text :class="{ 'active-star': star <= displayStars[question.field], 'inactive-star': star > displayStars[question.field], 'special-question': question.id === 26 }" > ★ </text> </view> </view> <text class="rate-text">{{ getRateText(question, displayStars[question.field]) }}</text> </view> </view> <!-- 其他问题反映区域 --> <view class="remark-card"> <view class="remark-header"> <text class="remark-title">其他问题反映</text> <text class="tag remark-tag">补充说明</text> </view> <view class="remark-input"> <textarea placeholder="请输入其他需要反映的问题或补充说明" v-model="detailData.remarke" maxlength="500" class="remark-textarea" auto-height /> <text class="word-count">{{ detailData.remarke?.length || 0 }}/500</text> </view> </view> <!-- 底部操作按钮 --> <view class="action-buttons"> <button class="submit-btn" @click="handleSubmit" :loading="submitLoading" > 提交问卷 </button> <button class="back-btn" @click="handleBack" > 返回列表 </button> </view> </view> </template> <style scoped> /* 全局样式 */ .operation-container { padding: 20rpx; background-color: #f5f7fa; min-height: 100vh; } /* 卡片通用样式 */ .header-card, .question-card, .remark-card { background: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 30rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05); } /* 顶部信息区域 */ .header-content { display: flex; flex-wrap: wrap; gap: 30rpx; } .info-item { display: flex; min-width: 300rpx; } .label { font-weight: bold; color: #606266; font-size: 28rpx; min-width: 140rpx; } .value { font-size: 28rpx; color: #303133; font-weight: 500; } /* 问题卡片 */ .question-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #eee; } .question-title { font-size: 32rpx; font-weight: 600; color: #1a1a1a; flex: 1; margin-right: 20rpx; line-height: 1.6; } .tag { padding: 8rpx 20rpx; border-radius: 40rpx; font-size: 24rpx; font-weight: 500; } .selected-tag { background-color: #ecf5ff; color: #409eff; border: 1rpx solid #d9ecff; } /* 星级评分容器 */ .star-rating-container { margin: 30rpx 0; display: flex; align-items: center; } .stars { display: flex; margin-right: 20rpx; } .star { margin-right: 10rpx; font-size: 40rpx; cursor: pointer; } .active-star { color: #f7ba2a; } .inactive-star { color: #c0c4cc; } .special-question.active-star { color: #67c23a; } .rate-text { font-size: 28rpx; color: #606266; min-width: 120rpx; } /* 其他问题反映 */ .remark-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; padding-bottom: 20rpx; border-bottom: 1rpx dashed #e0e0e0; } .remark-title { font-size: 32rpx; font-weight: 600; color: #1a1a1a; } .remark-tag { background-color: #f4f4f5; color: #909399; border: 1rpx solid #e9e9eb; } .remark-input { position: relative; } .remark-textarea { width: 100%; min-height: 200rpx; padding: 20rpx; border: 1rpx solid #dcdfe6; border-radius: 8rpx; font-size: 28rpx; box-sizing: border-box; } .word-count { position: absolute; right: 20rpx; bottom: 20rpx; font-size: 24rpx; color: #909399; } /* 操作按钮 */ .action-buttons { display: flex; gap: 30rpx; margin-top: 40rpx; padding: 0 20rpx; } .submit-btn, .back-btn { flex: 1; height: 80rpx; line-height: 80rpx; border-radius: 8rpx; font-size: 32rpx; text-align: center; } .submit-btn { background-color: #409eff; color: #fff; border: none; } .back-btn { background-color: #f5f7fa; color: #606266; border: 1rpx solid #dcdfe6; } /* 响应式调整 */ @media (max-width: 750px) { .header-content { flex-direction: column; gap: 20rpx; } .question-header { flex-direction: column; align-items: flex-start; gap: 20rpx; } .action-buttons { flex-direction: column; gap: 20rpx; } .star-rating-container { flex-direction: column; align-items: flex-start; } .rate-text { margin-left: 0; margin-top: 10rpx; } } </style> ``` ### 关键修改点： 1. **添加组件挂载状态管理**： ```javascript const isMounted = ref(false); onMounted(() => { isMounted.value = true; // ...其他初始化代码 }); onUnmounted(() => { isMounted.value = false; // ...其他清理代码 }); ``` 2. **请求生命周期管理**： ```javascript let activeRequests = []; const cancelActiveRequests = () => { activeRequests.forEach(request => { if (request && request.abort) { request.abort(); } }); activeRequests = []; }; onUnmounted(() => { cancelActiveRequests(); }); ``` 3. **安全访问DOM元素**： ```javascript // 在所有可能访问DOM的地方添加挂载检查 const handleStarClick = (question, star) => { if (!isMounted.value) return; // ...其他逻辑 }; ``` 4. **增强请求错误处理**： ```javascript const handleRequestError = (error) => { // 区分请求取消错误和其他错误 if (error.errMsg && error.errMsg.includes('abort')) { return; // 忽略取消错误 } // ...其他错误处理 }; ``` 5. **安全获取页面参数**： ```javascript onMounted(() => { const pages = getCurrentPages(); if (pages.length === 0) { handleBack(); return; } // ...其他逻辑 }); ``` 6. **模板中添加挂载检查**： ```vue <view class="operation-container" v-if="isMounted"> <!-- 内容 --> </view> ``` ### 错误原因分析： 1. **组件卸载后访问Vue实例**： - 当快速切换页面时，组件可能已被卸载，但异步请求的回调仍在尝试访问组件状态 - 解决方案：添加 `isMounted` 标志，在回调中检查组件是否仍挂载 2. **请求取消问题**： - 在组件卸载后，未完成的请求可能会导致访问已销毁的组件状态 - 解决方案：跟踪活动请求，在组件卸载时取消所有请求 3. **DOM访问时机问题**： - `Cannot read property 'left' of null` 表明在元素不存在时尝试访问其位置 - 解决方案：确保只在组件挂载后操作DOM 4. **页面参数获取问题**： - 当页面栈为空时尝试访问当前页面会导致错误 - 解决方案：添加页面栈长度检查 ### 最佳实践建议： 1. **所有异步操作都应检查挂载状态**： ```javascript uni.request({ success: (res) => { if (!isMounted.value) return; // 处理响应 } }); ``` 2. **使用请求任务对象管理请求**： ```javascript const requestTask = uni.request({ ... }); activeRequests.push(requestTask); ``` 3. **在组件卸载时进行清理**： ```javascript onUnmounted(() => { isMounted.value = false; cancelActiveRequests(); }); ``` 4. **避免在卸载组件中更新状态**： - 在可能被卸载的组件中，避免使用 `reactive` 和 `ref` 更新状态