更新问答 检测 没有选项直接下一个问题 <template> <div class="warp"> <div class="wtdimg"> <img :src="problemObject.wd_tp" alt=""> <img :src="problemObject.wd_kf_dt" alt=""> </div> <div v-for="(value, sectionKey) in problemObject" :key="sectionKey"> <div v-for="(index, problemKey) in value" :key="problemKey"> <div v-if="index.problemStatus" class="problem"> <CusTomer :kf_tx="problemObject.wd_kf_tx" :wd_mc="problemObject.wd_mc" :question=index.problem :btn_display=index.btnStatus :choices=index.options :zaaxclick="index.btnclick" @choiceSelected="handleChoiceSelected(problemKey, $event)" /> <user :problem=index.user_reply :display="index.displayStatus" /> <!-- 检测没有选项的问答，自动显示下一个 --> <div v-if="index.options && index.options.length === 0 && index.problemStatus" style="display: none;"> {{ handleNoOptionsProblem(problemKey) }} </div> </div> </div> </div> <!-- 不符合 --> <div v-if="problemObject.end && problemObject.end.problemStatus"> <CusTomer :kf_tx="problemObject.wd_kf_tx" :question=problemObject.end.problem /> </div> <div style="height: 300px;"></div> </div> </template>methods 新加方法 // 新增方法：处理没有选项的问答自动显示下一个 handleNoOptionsProblem(problemKey) { // 检查是否已经处理过这个问答 if (this.problemObject.problems[problemKey]._noOptionsHandled) { return; } // 标记为已处理 this.problemObject.problems[problemKey]._noOptionsHandled = true; const keys = Object.keys(this.problemObject.problems); const currentIndex = keys.indexOf(problemKey); if (currentIndex + 1 < keys.length) { setTimeout(() => { this.problemObject.problems[keys[currentIndex + 1]].problemStatus = true; }, 1500); } // 视窗滚动到文档的最底部 window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' // 平滑滚动 }); },

vite配置打包自动把输出和debugger 去掉 // vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ build: { minify: 'terser', terserOptions: { compress: { drop_console: true, drop_debugger: true, }, }, }, plugins: [vue()], }) 注意Vite v3 开始 不需要管 如果报错 因为版本太低要安装npm i -D tersernpm run build | cat

禁止打开调试模式 mounted() { // 每100毫秒检查一次是否处于调试模式 setInterval(() => { if (this.isDebugMode()) { debugger; } }, 100); }, methods: { // 判断是否处于调试模式 isDebugMode() { // 可以根据具体需求定义判断条件 // 例如：检查URL参数、全局变量或其他调试标志 return process.env.NODE_ENV !== 'production'; // 示例：非生产环境视为调试模式 } }

仿微信弹框-html-css 仿微信弹框-html-css

vue3+vite+ts项目搭建之后，vscode文件夹下红色波浪线问题 搭建完vue3+vite+ts项目之后，用vscode打开项目，发现 .vue 文件和 main.ts 文件夹下都有红色破浪线（如下图所示）。几番周折终于解决了这个问题。解决.ts文件报错报错原因：ts不识别.vue后缀的文件。解决方式：创建脚手架的时候，项目的根目录下会生成一个env.d.ts文件，修改文件里面的代码，在文件里面增加下面的代码：declare module "*.vue" { import { DefineComponent } from "vue" const component: DefineComponent<{}, {}, any> export default component }解决vue文件波浪线提示报错原因：vscode插件 Vetur 不支持最新写法解决方式：卸载 并 安装 Volar 插件