iframe嵌入
//allowTransparency 设置或获取对象是否可为透明
<iframe
:src="iframeUrl"
v-if="iframeUrl"
width="100%"
class="iframe"
frameborder="0"
ref="iframe"
id="iframe"
sandbox="allow-same-origin allow-scripts allow-modals"
allowtransparency="yes"
></iframe>
sandbox属性是在iframe元素中定义的一种安全机制，用于限制嵌入的内容在浏览器中执行时的行为。它是一个可选属性，可以通过在iframe标签中添加sandbox属性来开启。
sandbox属性可以接受多个值，它们之间用空格分隔。以下是sandbox属性可能的值和它们的含义：
-
allow-forms：允许iframe中的内容提交表单；
-
allow-scripts：允许在iframe中执行脚本；
-
allow-same-origin：允许iframe中的内容与父页面具有相同的源；
-
allow-top-navigation：允许iframe中的内容通过顶层窗口导航；
-
allow-modals：允许iframe中的内容弹出模态对话框；
-
allow-popups：允许iframe中的内容弹出新窗口或新标签页；
-
allow-pointer-lock：允许iframe中的内容使用鼠标指针锁定功能；
-
allow-orientation-lock：允许iframe中的内容锁定屏幕方向；
设置滚动条样式
::v-deep{
/* 自定义整个滚动条 */
::-webkit-scrollbar {
width: 8px; /* 设置滚动条的宽度 */
}
/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
background: #FFFFFF; /* 设置轨道的背景颜色 */
}
/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
background: #C8CACC; /* 设置滑块的背景颜色 */
border-radius: 6px;
}
/* 当滑块悬停或活动时自定义滚动条的滑块 */
::-webkit-scrollbar-thumb:hover {
background: #555; /* 设置滑块在悬停状态下的背景颜色 */
}
}
虚线过密的处理办法
//横虚线
height: 1px;
background-image: linear-gradient(to right, rgba(87, 171, 255, 0.5) 0%,rgba(87, 171, 255, 0.5) 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;
//坚虚线
width: 1px;
height: 40px;
background-image: linear-gradient(
to bottom,
#d7d9db 0%,
#d7d9db 80%,
transparent 50%
);
background-repeat: repeat-y;
background-size: 1px 10px;
设置小于12px字体
//设置10px
.font-size-10px{
font-size:20px;
zoom:0.5;
}
需要注意，firefox不支持zoom属性，不过firefox对字体的大小是没有限制的，根据浏览器类型切换下样式就行。
position:sticky;
1.position:sticky简价 设置了该元素并不会脱离文档流，当页面发生滚动时，元素要移出区域时，定位会变成fixed,根据设置的left、top的值进行定位，像是fixed的效果
2、必须注意的点 设置了position:sticky的元素的效果完全受制于父级元素。
此外，还遵循以下条件
- 父级元素不能有任何overflow:visible以外的overflow设置。即使是scroll或者auto也不行。
- 父元素的高度不能低于sticky元素的高度
- 同一父容器中的sticky元素，如果定位置相等，则会发生重叠，
- sticky元素如果不属于相同父元素，但是他們的父元素正好紧密相连，则会挤开原来的元素，形成依次占位的效果。
- 必须制定top,left,bottom,right四个中的至少一个，否则其行为与相对定位相同，并且top和bottom同时设置时，top的优先级高；left和right同时设置时，left的优先级高。
————————————————
参考原文链接：blog.csdn.net/JiangLittle…
弹框时禁止底层页面滚动
//禁止页面滚动
document.body.style.position='fixed';
//开启页面滚动
document.body.style.position='static'
弹框时保持当前位置并禁止底层页面滚动
//禁止页面滚动，保持当前位置
document.body.style.overflowY='hidden';
//开启页面滚动
document.body.style.overflowY='';
--or--
document.body.style.overflowY='visible';
css样式控制页面禁用浏览器自带的复制功能
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
input占位符（placeholder)字体颜色
input::placeholder {
color: #b9bbbd;
}
ios position:fixed 底部导航栏上滑抖动
在index.html文件的meta上加'viewport-fit=cover'
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no,viewport-fit=cover">
＜meta＞标签 viewport 详解
什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”（viewport)中，通常这个虚拟的“窗口”（viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中
css 适配IOS某些机型底部
在ios系统中，为了实现简单的底部适配，苹果设计了一个安全区域的css属性值，哪里需要就加在哪里
步骤一： 设置网页在可视窗口的布局方式 新增viewport-fit属性，使得页面内容完全覆盖整个窗口（只有设置viewport-fit=cover,才能使用env()).
<meta name="viewport" content="width=device-width, viewport-fit=cover ">
步骤二：
constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
注：constant() 跟 env() 需要同时存在，而且顺序不能换。
比如：
//bottom 为0，列表上拉加载时一般设置为0
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
//底部有内容等情况就自定义值
.footer{
height:calc(10px（自定义） + constant(safe-area-inset-bottom));
height:calc(10px（自定义） + env(safe-area-inset-bottom));
}
场景扩展： 条件满足底部按钮高亮
---------html 部分---------
<footer class="sure-sign-box">
<div :class="vshowAgree ? 'sure-sign' : 'no-sign'">下一步</div>
</footer>
---------css 部分-------------
.sure-sign-box {
position: fixed;
z-index: 337;
bottom: 0;
width: 100%;
text-align: center;
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
background: white;
padding-top: 7px;
.sure-sign,
.no-sign {
background: linear-gradient(90deg, #ff7c72 0%, #f23d30 100%);
line-height: 36px;
color: #fff;
font-size: 16px;
width: 90%;
border-radius: 20px;
margin: 0 auto 7px;
}
.no-sign {
background-color: #ffb7b3;
color: #ffffff;
}
}
calc() (css计算函数)
calc() 此css函数允许在声明css属性时执行一些计算；支持 + - * /
注：乘数、除数中至少有一个是number类型，示例如下
<div:style="`margin-top: calc(46px + ${top} + .2rem)`"></div>
min-height: calc(100% + 1px);
width: calc(100% - 10px);
min-height: calc(100vh - 2.8rem);
margin-top: calc(46px + 0.5rem);
width: calc(100% / 6);
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}
object-fit(图片变形处理)
object-fit:cover保持原有尺寸比例。但部分内容可能被剪切。（常用img小图展示大图片时）
object-fit:contain保持原有尺寸比例，内容将被缩放
object-fit:fill默认，不保证原有的比例，内容拉伸填充整个内容窗口
object-fit:none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。
object-fit:scale-down保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
object-fit:inherit： 从该元素的父元素继承属性。
css超出显示 ... 或者 展开收起
必须指定一个宽度
1.单行
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //默认不换行
2.多行
overflow:hidden; //超出文本隐藏
display:-webkit-box;
-webkit-line-clamp:2; //超出多少行
-webkit-box-orient:vertical;
3.强制换行
word-break
word-break: break-all; 可以强制对长单词或 URL 地址进行换行。
扩展场景一：加入展开收起文字或者按钮，如下图所示：
----html 部分-----
<ul class="list-content-right">
<li class="item-info-box" @click="showMore()">
<div :class="['content-value', vshowBtn ? 'hide' : '']">
<span class="value-left">项目现状：</span>
<span class="value-right more-text1"
>项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状项目现状</span
>
</div>
<van-image
v-show="vshowBtn"
:class="[vshowBtn ? 'absolute' : '']"
src="images/expand_icon.png"
width="0.28rem"
height="0.28rem"
/>
</li>
</ul>
----------js 部分 -------------
<script>
export default {
data() {
return {
vshowBtn: "false",
};
},
methods: {
showMore() {
this.vshowBtn = !this.vshowBtn;
},
},
};
</script>
----css 部分---------
.list-content-right {
padding: 0 0.5rem 0 0.2rem;
flex: 1;
.item-info-box {
width: 100%;
margin-top: 0.35rem;
position: relative;
.van-image {
position: absolute;
right: 0;
bottom: 0.04rem;
&.absolute {
top: unset;
bottom: 0;
transform: rotateX(180deg);
}
}
}
.content-value {
text-align: justify; //文字向两侧对齐
display: block;
width: 96%;
line-height: 0.32rem;
&.hide {
overflow: hidden;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */
-webkit-line-clamp: 3;
}
.value-left {
color: #999999;
font-weight: 400;
font-size: 0.25rem;
}
.value-right {
color: #333333;
font-weight: 400;
font-size: 0.25rem;
}
}
}
扩展场景二：数据大于三组的时候才展开收起按钮，小于三不做处理
-------html 部分--------
<div class="table-main-box" :style="styleHeight">
<!-- 展开按钮 数组大于3显示展开按钮-->
<div class="more-info-sign" @click="Addmore" v-show="vshowAdd && Array.length > 3">
<img class="add-more" src="images/add-more.png" alt="" />
</div>
<!-- 收起按钮 -->
<div class="put-away-box" v-show="!vshowAdd" @click="putAway">
<img class="add-more add-rotate" src="images/add-more.png" alt="" />
</div>
<!-- 数据样式 -->
<ul>
<li>
.....
</ul>
</div>
-------js 部分--------
export default {
data() {
return {
styleHeight: { height: "auto" },
vshowAdd: true,
Array: [],
};
},
methods: {
getData() {
......
//通过接口获取数据大于三组的时候才展开收起
if (this.Array.length > 3) {
this.styleHeight.height = "9.6rem";
}
},
//展开
Addmore() {
this.vshowAdd = false;
this.styleHeight.height = "auto";
},
//收起
putAway() {
this.vshowAdd = true;
this.styleHeight.height = "9.6rem";
},
},
};
</script>
