web学习笔记(六十七)项目总结

目录

1.使用弹性布局来实现元素水平垂直居中

[2. 实现vant组件样式穿透](#2. 实现vant组件样式穿透)

3.通过请求返回的数据动态设置类名

4.设置元素溢出隐藏为省略号

[5. z-index的使用](#5. z-index的使用)

6.利用弹性布局实现横向滚动

7.盒子内的两个元素无法实现底部对齐

8.如何设置文本显示两行,且在第二行结尾处实现溢出隐藏的省略号

9.如何实现按下回车触发对应的事件

10.如何解决跨域的问题

11.接口返回数据是数组和对象的区别

12.如何实现点击商品跳转到对应的页面


1.使用弹性布局来实现元素水平垂直居中

css 复制代码
 display: flex;
  justify-content: center;
  align-items: center;

2. 实现vant组件样式穿透

通常我们组件的标签名就是默认的样式名,可以拿来进行组件穿透,或者在控制台进行检查,然后复制类名进行样式穿透,如果设置样式穿透不起效的话可以尝试在外层再包裹父元素的样式穿透。

css 复制代码
::v-deep(.van-sidebar-item) {
  height: 1.3333rem;
  width: 2.2933rem;
  color: #333;
  font-size: 0.3467rem;
}

3.通过请求返回的数据动态设置类名

我们可以通过判断请求返回数据的某一项是否等于某个值来设置类名。

html 复制代码
      <div :class="{
                  Receivediv: true,
                  isvip: item.receive_type == 4,
                  isuse: item.is_use == 1
                }"></div>

4.设置元素溢出隐藏为省略号

javascript 复制代码
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

5. z-index的使用

z-index需要搭配定位使用,通常搭配相对定位使用。

javascript 复制代码
.bardiv {
  position: relative;
  z-index: 3000;
}

6.利用弹性布局实现横向滚动

css 复制代码
.couposdiv {
  width: 9.4667rem;
  height: 1.6267rem;
  display: flex;
  flex-wrap: nowrap;//不换行
  overflow-x: scroll;//x方向滚动
}

7.盒子内的两个元素无法实现底部对齐

在排版时如果个别元素总是无法到达理想的位置,此时可以使用transform: translateX(-0.2rem) translateY(0.2667rem);进行微调。

8.如何设置文本显示两行,且在第二行结尾处实现溢出隐藏的省略号

css 复制代码
   .textdiv {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-wrap: break-word;
      word-break: break-all;
      white-space: normal;
      overflow: hidden;
      font-size: 14px;
      color: #282828;
    }

9.如何实现按下回车触发对应的事件

javascript 复制代码
<div  @keydown.enter="searcheventone"></div>
  <!-- 当需要阻止冒泡时可以直接在时间名后加.stop -->
<div  @keydown.enter.stop="searcheventtwo"></div>

10.如何解决跨域的问题

在vite.config.js页面中配置跨域代码。

javascript 复制代码
server: {//这是一个对象,用于配置服务器的选项。
        proxy: {// 这是服务器代理的配置项,用于指定代理规则。
        //   /api表示服务器要监听的前端请求接口路径,监听的是路径开头,不包含域名和端口。整体意思是:代理服务器监听接口路径是否以/api开头的,是就走这个代理服务器,解决跨域。不是以/api开头就不走代理服务器
            // 浏览器发请求,如果没有携带域名,默认浏览器会把当前服务器域名加上,当前域名是http://localhost::5173
          "/api": {//这是一个路径匹配规则,表示所有以"/api"开头的请求都将被代理到目标服务器。
            target: "https://v5.crmeb.net/",//目标域名:代理服务器localhost::5173换成target域名,服务器之间的请求时不存在跨域的。   这是目标服务器的地址,所有匹配到的请求将被转发到这个地址。
            changeOrigin: true,//允许切换域名   这个选项指定是否改变请求头中的"Origin"字段为目标服务器的地址。这通常用于解决跨域请求时的一些问题,允许请求头中的Origin与目标服务器的地址不一致。
            }
        },
      }

11.接口返回数据是数组和对象的区别

(1)当接口返回数据是数组时可以用v-for进行遍历,当返回数据是对象时也可以进行遍历,注意当遍历对象时就不可以写index了,需要遍历key,然后用来绑定key。

(2)当返回数据是对象在页面使用时直接打点调用对应属性即可,不需要再遍历使用item来进行操作(会报错)。

12.如何实现点击商品跳转到对应的页面

这个地方要用到路由传参,有两种方式,可以去复习一下笔记六十四,这里我们用到的是路由传参query。首先在首页给商品设置点击事件

javascript 复制代码
import { useRouter } from 'vue-router'
// useRouter 跳转页面 useRoute传参
const router = useRouter() //获取路由对象。调用方法跳转
const getDetail = (id) => {
  router.push(`/derail?id=${id}`)
}

然后在商品详情页通过query来获取对应的id,通过id再去发请求。

javascript 复制代码
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.id)
相关推荐
机器视觉知识推荐、就业指导11 分钟前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
lmryBC4917 分钟前
golang接口-interface
java·前端·golang
吴梓穆23 分钟前
UE5学习笔记 FPS游戏制作37 蓝图函数库 自己定义公共方法
笔记·学习·ue5
慕斯策划一场流浪23 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
吴梓穆30 分钟前
UE5学习笔记 FPS游戏制作41 世界模式显示UI
笔记·学习·ue5
虾球xz35 分钟前
游戏引擎学习第200天
学习·游戏引擎
LaoZhangAI1 小时前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
cypking1 小时前
解决 axios get请求瞎转义问题
vue.js
向阳2561 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程