国内做音乐网站,网站栏目关键词,seo快速排名软件首页,微信公众号运营方案目录 1.使用弹性布局来实现元素水平垂直居中
2. 实现vant组件样式穿透 3.通过请求返回的数据动态设置类名 4.设置元素溢出隐藏为省略号
5. z-index的使用 6.利用弹性布局实现横向滚动
7.盒子内的两个元素无法实现底部对齐 8.如何设置文本显示两行#xff0c;且在第二行结…目录 1.使用弹性布局来实现元素水平垂直居中
2. 实现vant组件样式穿透 3.通过请求返回的数据动态设置类名 4.设置元素溢出隐藏为省略号
5. z-index的使用 6.利用弹性布局实现横向滚动
7.盒子内的两个元素无法实现底部对齐 8.如何设置文本显示两行且在第二行结尾处实现溢出隐藏的省略号 9.如何实现按下回车触发对应的事件
10.如何解决跨域的问题
11.接口返回数据是数组和对象的区别 1.使用弹性布局来实现元素水平垂直居中 display: flex;justify-content: center;align-items: center;
2. 实现vant组件样式穿透
通常我们组件的标签名就是默认的样式名可以拿来进行组件穿透或者在控制台进行检查然后复制类名进行样式穿透如果设置样式穿透不起效的话可以尝试在外层再包裹父元素的样式穿透。
::v-deep(.van-sidebar-item) {height: 1.3333rem;width: 2.2933rem;color: #333;font-size: 0.3467rem;
} 3.通过请求返回的数据动态设置类名
我们可以通过判断请求返回数据的某一项是否等于某个值来设置类名。 div :class{Receivediv: true,isvip: item.receive_type 4,isuse: item.is_use 1}/div 4.设置元素溢出隐藏为省略号 overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
5. z-index的使用
z-index需要搭配定位使用通常搭配相对定位使用。
.bardiv {position: relative;z-index: 3000;
} 6.利用弹性布局实现横向滚动
.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.如何设置文本显示两行且在第二行结尾处实现溢出隐藏的省略号 .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.如何实现按下回车触发对应的事件
div keydown.entersearcheventone/div!-- 当需要阻止冒泡时可以直接在时间名后加.stop --
div keydown.enter.stopsearcheventtwo/div10.如何解决跨域的问题
在vite.config.js页面中配置跨域代码。
server: {//这是一个对象用于配置服务器的选项。proxy: {// 这是服务器代理的配置项用于指定代理规则。// /api表示服务器要监听的前端请求接口路径监听的是路径开头不包含域名和端口。整体意思是代理服务器监听接口路径是否以/api开头的是就走这个代理服务器解决跨域。不是以/api开头就不走代理服务器// 浏览器发请求如果灭有携带域名默认浏览器会把当前服务器域名加上当前域名是http://localhost::5173/api: {//这是一个路径匹配规则表示所有以/hgapi开头的请求都将被代理到目标服务器。target: https://v5.crmeb.net/,//目标域名代理服务器localhost::5173换成target域名服务器之间的请求时不存在跨域的。 这是目标服务器的地址所有匹配到的请求将被转发到这个地址。changeOrigin: true,//允许切换域名 这个选项指定是否改变请求头中的Origin字段为目标服务器的地址。这通常用于解决跨域请求时的一些问题允许请求头中的Origin与目标服务器的地址不一致。}},}
11.接口返回数据是数组和对象的区别
1当接口返回数据是数组时可以用v-for进行遍历当返回数据是对象时也可以进行遍历注意当遍历对象时就不可以写index了需要遍历key然后用来绑定key。
2当返回数据是对象在页面使用时直接打点调用对应属性即可不需要再遍历使用item来进行操作会报错。
