一、Vue样式冲突问题
团队开发Vue项目的时候出现了样式冲突问题,主要原因就是没有模块化style,会造成自己开发的页面被被人毁掉或打乱别人开的页面的样式
二、组建的样式更改
运用组件的时候会出现组件样式不是自己想要的样式,比如:不要下边框线的tab栏切换,鼠标移入效果等,解决方案就是在style外面再写一个style,在里面对组件的样式进行更改
三、ID是number类型会出现精度缺失问题
如果后端接口数据的ID是number类型会出现精度缺失问题,会造成无法拿到数据进行页面渲染,解决方案就是将ID循环出来再用BigInt对ID格式进行转换
四、接口数据里面是数组包对象再包数组
数组要用到循环,对象用到打点,如果数组包对象再包数组就要用到双重循环
五、对象打点渲染时数据渲染成功但是会报错
当对象打点渲染时,数据渲染成功但是会报错时,通常可以通过使用 v-if 进行条件判断来解决这个问题。这样可以确保只有在数据存在时才进行渲染,从而避免因为不存在的数据而导致报错。
六、通过ID获取整条数据进行路由跳转传参问题
当遇到点击跳转传参渲染整个页面时,可以先找到跳转的ID,再通过ID整条数据,然后进行页面跳转渲染
代码:
//ID跳转页面
<template>
<div class="text-white text-center leading-10 study_button"
style="width: 100px; height: 40px; background-color: #17ac82; border-radius: 5px; cursor: pointer;"
@click="handleToInfo(item.id)"> //点击事件里加上跳转页面的ID,将ID通过点击事件传到被跳转的页面
开始学习
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
// 获取路由跳转传参
const router = useRouter();
const handleToInfo = (id: number): void => {
router.push(`/grow/growRouterInfo?id=${id}`); //通过 router.push() 将页面路由切换到 /grow/growRouterInfo 并且将id作为参数传递给目标页面
}
</script>
//被跳转页面
<template>
<span v-if="List.careerPlanning">预计学习{{ List.careerPlanning.expectedlearningtime }}月</span>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
const id = ref(null) //创建一个响应式变量 id 来存储从路由中获取的ID参数。
const route = useRoute() //使用 useRoute 钩子来获取当前路由信息,包括查询参数。
console.log(route);
id.value = route.query.id //将当前页面的路由查询参数中的ID赋值给 id 变量。
console.log('当前路由参数:', id.value);
const List = ref({}); // 设置一个ref来接收后端数据(将获取到的数据赋值给 List 这个ref对象,以便在模板中进行渲染)
const URL = `/api/admin/open/v1/api/path/info?id=${id.value}`; // 替换为你要请求的API URL
Get(URL)
.then(data => {
if (data) {
console.log('ID获取到的数据:', data.data);
// 在这里可以对获取到的数据进行进一步处理
List.value = data.data // 将获取到的数据赋值给 careerPlanningList
} else {
console.log('未能成功获取数据');
}
});
</script>
七、react项目中富文本的使用
安装命令:
npm install react-quill
在package.json文件里查看是否安装上( “react-quill”: “^2.0.0”,)
7.1添加富文本功能
// 富文本
const [value, setValue] = useState("");
const handleChange = (content) => {
setValue(content);
};
const modules = {
toolbar: [
[{ "code-block": "code-block" }, { header: 1, title: "Header 1" }], //添加代码块
[{ header: 2, title: "Header 2" }], //标题,包括标题1和标题2
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ size: ["10px"] }], //设置文字大小,默认大小为10px
["bold", "italic", "underline", "strike", "clean"], //文字样式,加粗、斜体、下划线、删除线
["formula"], //插入公式
["blockquote", "align"], //引用和对齐
[{ list: "ordered" }, { list: "bullet" }], //有序列表和无序列表
["direction", { background: [] }, { color: [] }], //文本方向、背景、颜色
[{ font: ["宋体"] }], //字体设置
["link", "image", "video"], //插入链接、图片、视频
],
};