遇到的知识点

前端小白～

已于 2023-03-24 10:15:50 修改

阅读量227

点赞数

分类专栏： Vue 文章标签： vue.js 前端 Powered by 金山文档

于 2023-03-01 21:27:11 首次发布

本文链接：https://blog.csdn.net/2201_75791852/article/details/129288319

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

正则：输入框只能输入数字

1）使用原生的写法，不使用elmeent-ui里面的number属性，特殊字符依然可以输入

<el-input v-model="input" oninput="value = value.replace(/[^\d]/g, '')"> </el-input>

2）使用element-ui，使用input参数，回调参数

<el-input @input="$event => value = value.replace(/[^\d]/g,'')"></el-input>

user-select:none

使页面文字不被选中，不能复制粘贴

display:inline-block行内块元素

：：v-deep

css的样式穿透（/deep/深度选择器）

对于组件库会遇到样式无法修改的问题，是因为组件库自带的默认样式scoped的问题。Scoped为每个组件实例生成一个唯一标识符，简称组件的简称组件实例标识，记作InstanceID。scoped属性是一个布尔属性。如果使用该属性，则样式仅仅应用到style元素的父元素及其子元素。在vue中引入了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash（如：data-v-19fca230））表示唯一性的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。

因为scoped的造成组件之间的样式覆盖，可以利用样式穿透特殊方式，穿透原有的默认样式，实现效果

样式穿透方式两种： /deep/与::v-deep

（1）样式穿透语法：

a. 外层容器/deep/组件{ }

b.外层容器::v-deep组件{ }

两种都可以对样式进行修改，如果第一种无效可以用第二种

/* 从A组件深层穿透到B*/
.A /deep/ .B {border-color: #fff !important;
}
/* 从C组件深层穿透到button*/
.C ::v-deep button {height: 25px;
}
/* 深层穿透到switch*/
::v-deep .ant-switch ::after {height: 21px;width: 21px;
}

（2）修改组件样式步骤：

先F12键查看element-ui的类名

在<style lang="scss" scoped></style>页面内对样式进行修改

（3）两者的区别

文本自动换行

（1） word-break: break-all; // 文本自动换行样式

语法：word-break:normal/break-all/keep-all

如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了

（2）word-wrap:break-word

语法：word-wrap:normal/break-word

例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的

强制自动换行

（1）语法:text-overflow:clip|ellipsis

默认值:clip;

适用于:所有元素

clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。

ellipsis:当对象内文本一处时显示省略标记(...)。

当然这还是不够的，需要加点调料才能出现效果:

那就是配合

overflow:hidden

white-space:overflow;

（2）一行省略怎么变成三行出现省略。

处理办法:

将white-space去除，并且加上:

display:-webkit-box;

-webkit-line-clamp: 3/*第几行裁剪*/

-webkit-box-orient:vertical;

其中：

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

text-overflow: ellipsis; ，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

（3）IE兼容

插件网站:http://dotdotdot.frebsite.nl/

滚动条用法

overflow：auto；如果内容过长，则浏览器会显示滚动条，以便查看其余内容

content多种用法

在操作过程遇到了content，网上搜索了，看到知乎上 echeverra对content的研究，了解到css中的content有如此多的用法

（1）第一种：清除浮动

<!--css-->
 .left {float: left}
 .right {float: right}
 .clear:after {
     content: '';
     clear: both;
     display: block;
 }
 
 <!--html-->
 <div class="container clear">
     <div class="left">左</div>
     <div class="right">右</div>
 </div>

父元素.container中两个子元素.left和.right浮动后会脱离文档流，无法撑起容器，造成.container高度为0。使用伪元素:after清除浮动，三个属性缺一不可：

content: '';通过:after添加一个内容为空的伪元素。

clear: both;伪元素:after两侧浮动清除。

dispaly: block;设置块元素，因为clear只对块元素有效。

（2）小三角的气泡窗口

 <!--css-->
 .box {
     width: 200px;
     height: 100px;
     border-radius: 5px;
     background: #fff;
     position: relative;
 }
 .box:after {
     content: '';
     position: absolute;
     bottom: -20px;
     right: 20px;
     width: 0;
     height: 0;
     border-top: 10px solid #fff;
     border-bottom: 10px solid transparent;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
 }
 
 <!--html-->
 <div class="box"></div>

效果

（3）第三种：字体图标

浏览器自带的特殊字符，此外还有其他的字符

 <!--css-->
 .music:before {
     content: '\266C';
     color: red;
 }
 
 <!--html-->
 <span class="music">晴天-周杰伦</span>

效果

（4）无内容提示

<!--css-->
 <!--:empty为空时匹配-->
 div:empty:after {
     content: '暂无数据';
     color: red;
 }
 
 <!--html-->
 <div>有内容数据</div>
 <div></div>

效果

（5）面包屑菜单

 <!--css-->
 ul li {
     display: inline-block;
     font-weight: bold;
 }
 
 ul li:not(:last-child):after {
     content: '\276D';
     margin: 5px;
 }
 
 <!--html-->
 <ul>
     <li>首页</li>
     <li>商品</li>
     <li>详情</li>
 </ul>

效果

（6）加载中...动画

 <!--css-->
 .loading:after {
     content: ".";
     animation: loading 2s ease infinite;
 }
 
 @keyframes loading {
     33% {
         content: "..";
     }
     66% {
         content: "...";
     }
 }
 
 <!--html-->
 <p class="loading">加载中 </p>

效果

animation动画值含义：

loading：animation-name，规定需要绑定到选择器的 keyframe 名称为loading。

2s：animation-duration，规定完成动画所花费的时间2秒。

ease：animation-timing-function，规定动画的速度曲线，先慢中快后慢。

infinite：animation-iteration，规定动画应该播放的次数为无限次。

通过animation动画完成33%、66%时与content内容配合，实现动态“加载中...”的效果。

（7）第七种：插入图片

<!--css-->
.loading:before {
    content: url("../static/img/loading.gif");
    vertical-align: middle;
}

<!--html-->
<div class="loading"> 加载中... </div>

效果

除了插入字体图标，content还可以使用url()方法插入图片，和background属性类似可以使用url指定一个图片路径，不同的是content属性无法控制图片大小，使用条件有限。

（8）attr属性内容生成

<!--css-->
.web:after {
    content: "（"attr(href)"）"
}

<!--html-->
<a class="web" href="https://echeverra.cn">echevera</a>

效果

content值也可以是attr()方法，用来获取指定属性的值，可插入到指定的位置。

（9）第九种：半边特效

<!--css-->
span{
    font-family: sans-serif;
    font-size: 30px;
    font-weight: bold;
    position: relative;
    color: green;
}
span:before{
    content: attr(text);
    color: orange;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
}

<!--html-->
<span text="echeverra">echeverra</span>
<span text="博">博</span>
<span text="客">客</span>

效果

半边特效是通过attr()方法获取text属性值，属性值与其内容相同，巧妙的设置绝对定位，只显示一半并覆盖了原文本内容，实现文字半边特效，是不是还挺炫酷的。需要注意的是有些font-family字体会有文字无法重合的问题。

（10）第十种：文字引号

<!--css-->
span {
    quotes: '“' '”';
}
span:before {
    content: open-quote;
}
span:after {
    content: close-quote;
}

<!--html-->
<p>鲁迅说过：<span>真正的勇士,敢于直面惨淡的人生,敢于正视淋漓的鲜血。</span></p>

效果

利用元素的quotes属性指定双引号，使用content的open-quote属性值设置开口引号，close-quote属性值设置闭合引号，当然quotes也可以指定其他符号。

（11）添加章节数

<!--css-->
ul{
    counter-reset: section;
}
li{
    list-style-type: none;
    counter-increment: section;
}
li:before{
    content: counters(section, '-') '.';
}

<!--html-->
<ul>
    <li>章节一</li>
    <li>章节二
        <ul>
            <li>章节二一</li>
            <li>章节二二</li>
            <li>章节二三</li>
        </ul>
    </li>
    <li>章节三</li>
    <li>章节四</li>
    <li>章节五
        <ul>
            <li>章节五一</li>
            <li>章节五二</li>
        </ul>
    </li>
    <li>章节六</li>
</ul>

效果

这里用到了counter计数器方法，涉及到counter-reset、counter-increment、counter()和counters()几个属性。

counter-reset用来指定计数器名称，例子中命名为section，同时可以指定计数器开始计数的数值，如指定开始计数数值为1：counter-reset: section 1;，不指定默认为0。

counter-increment用来指定计数器每次递增的值，如指定计数器递增值为2：counter-increment: section 2;，默认值为1，counter-increment只要指定了counter-reset，对应的计数器的值就会变化。

counter(name, style)用来输出计数器的值。其中name为计数器名称，style可选参数，默认为阿拉伯数字，也可指定list-style-type支持的值，如罗马数字lower-roman。

counters(name, strings, style)用来处理嵌套计数器，同样是输出计数器的值，和counter()不同的是多了一个strings参数，表示子序号的连接字符串。例如1.1的string就是'.'，1-1就是'-'。

（12）计算checkbox选中数

<!--css-->
form {
    counter-reset: count 0;
}

input[type="checkbox"]:checked {
    counter-increment: count 1;
}

.result:after {
    content: counter(count);
}

<!--html-->
<form>
    <input type="checkbox" id="javaScript">
    <label for="javaScript">javaScript</label>
    <input type="checkbox" id="PHP">
    <label for="PHP">PHP</label>
    <input type="checkbox" id="Python">
    <label for="Python">Python</label>

    <div class="result">已选：</div>
</form>

效果