实习05-技术

本节：总结一下自己最近写的一些功能。

1.点击文字，下划线会自动出现。原理：点击父级元素，子级元素会显示。

子级元素先设置隐藏，父级别元素，再设置显示

 

  .父级元素 :hover .子级元素{

        display: block;

    }//触摸A联动显示B，最好是父级元素包含子级元素的关系。

.yuansu :hover {

color: #f79806;

        font-weight: bold;

        transform: translate3d(0, -6px, 0px);

        animation-duration: 0.5s;

//可以直接改变元素的颜色，移动位置

}

2.给图片加一层灰色的蒙版

 三层布局:

第一层：父级：放背景图片，position：relative 父级定位。

第二层：蒙版  (独立的div，1.设置宽高 2.背景色 3.透明度 4.子级定位 5.页面顺序)，要被父级 div包裹。position：absolute。

第三层：在蒙版div的下面。创建要置顶的内容（1.子级 2.页面顺序）。

3.vue写点击事件，触摸就显示，不触摸就隐藏

 div：点击方法 @mouseleave="mouseLeaveOne"           @mouseover="mouseOverOne"

 方法一：使用show 和hide函数

方法二：把div设置成变量控制。

1.div要定class，并且 v-if 绑定变量。

 <div class="actives" v-if="actives"></div>

 2.data定义一个变量，赋值布尔类型。 

3.直接变量相反，就可以点击出现和点击隐藏自动切换。（@click="navBtn"）

 this.nav1 = !this.nav1;

 

 4_1、触摸点击之后，1.文字和图标同时变色  2.且切换的页面之后，也不变色。

(如果想要，不完成1，触摸23没效果，就直接不设置点击事件，不改变样式，然后点击完1，然后才在方法里调用跳到2的页面就可以了)

1. div：点击之后，切换样式，定义了一个类为tabselted，当tabselted 为里面判断的变量值为true的时候，就执行tabselted 的样式；而tabidx是点击之后就改变的值。

2.定义变量

 

3.方法，tabselted为真的时候，就执行

 

 4.样式发生变化

一张图概括：

4_2.一样在上一张图里，前端正则表达式判断手机号是否正确。

首先，1.点击之后，传参

 2.方法接收参数然后正则表达式判断

 // 结算单位按钮
                nextYuyuePanduan(mianji, name, phone1) {
                    if (mianji == '' || mianji == undefined || mianji == null) {
                        alert("请输入面积");
                        return false;

                    } else if (name == '' || name == undefined || name == null) {

                        alert("请输入姓名");
                        return false;
                    } else if (phone1 == '' || phone1 == undefined || phone1 == null) {

                        alert("请输入手机号码");
                        return false;
                    }
                
                    // 手机号码 正则表达式
                    const reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/
                    // 固定电话 正则表达式
                    const telReg = /^0\d{2,3}-?\d{7,8}$/
                    // indexOf() 查找某个字符串首次出现的位置，返回下标，找不到返回-1
                    // 1 开头的号码进入手机号码验证 否则就进入电话号码验证

                    if (phone1.indexOf('1') == 0) {
                        if (!reg.test(phone1)) {
                            alert('请输入11位手机或10-12位固定号码，且为数字')
                            return;
                        }
                    } else {
                        if (!telReg.test(phone1)) {
                            alert('请输入11位手机或10-12位固定号码，且为数字')
                            return;
                        }
                    }
                    // 这是跳到第2页面的
                    this.nextYuyue(mianji);
                },


  nextYuyue(mianji) {
                    this.gujijiawei = false;
                    this.yuyuefuwu1 = true;
                    this.yuyuechengong1 = false;
                    this.tabIdx = 1;
                    this.price = 100 * mianji;
                    console.log(mianji);
                },

 4_3.多选和单选要怎么传值，这里使用的是element的组件

单选：在el-radi0-group绑定一个空字符串，用来放循环点击的中值

//单选代码
<div style="display: flex;margin-top: 14px;">
                                        <el-radio-group v-model="take_house" text-color="#f79806">
                                            <el-radio label="已收楼">已收楼</el-radio>
                                            <el-radio label="一个月内"> 一个月内</el-radio>
                                            <el-radio label="三个月内">三个月内 </el-radio>
                                            <el-radio label="三个月后">三个月后 </el-radio>
                                        </el-radio-group>

                                    </div>

多选：在el-checkbox-group这绑定一个空数组，值则在laberl循环出来

  <div class="" style="display: flex">
                                        <!-- 这个是 指ta 获取到的数据 model-->
                                        <el-checkbox-group v-model="product">
                                            <el-checkbox class="myRedCheckBox" v-for="(value, key) in productList"
                                                :key="key" :label="value">{{value}}</el-checkbox>
                                        </el-checkbox-group>
                                    </div>

 多选是设置一个空数组，同时值也是循环出来的数组 

接口代码传值的方式。 

5.jsonp数据转换成data数据。

   lunbotuList = JSON.parse(JSON.stringify(res.data));

6.背景图片不重复，设置背景图片大小

background-size: 1428px 769px;
 background-repeat: no-repeat;

7.overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/ 
display: flex;

8.写正则表达式的时候，怎么写都判断不了，执行不了正则的判断，看起来逻辑都没有原因，最后，我发现是因为变量名冲突了， 正则表达式判断的那个变量名， 和其他方法的变量名是一致的，所以导致有问题，我把那个变量名改变了，就成功了。（看了很久，逻辑方法都没有问题的时候，可能就变量的问题，包括id也是整个页面只能有一个，不然控制的时候，也可能有问题）