05-27 12:55 武汉科技大学产品经理

关注

前端-日常笔记（个人使用）

调整组件库的样式

对于element-UI还有ant-design-vue里面的组件除了api修改样式之外还可以根据源码修改组件样式。

但是难度比较大，一般要在github里面找到源码然后读懂源码修改样式。

样式-动态绑定class、style

<div @click.stop="toggleSubMenu(index)" :class="{'menu-item': true, 'selected': selectedIndex === index}">
	{{ item.name }}
</div>

这段代码里面：:class="{'menu-item': true, 'selected': selectedIndex === index}"表示

menu-item属性一直生效，selected样式当selectedIndex = index的时候生效。

@click.stop阻止父组件的事件发生

打开菜单是click.stop的经典应用。

原理：在父子标签中如果同时存在点击事件首先会只执行子组件中的事件然后执行父组件的事件。

应用场景：在点击input输入框的时候展示菜单，点击其他部分则关闭菜单。那么在点击菜单部分的时候也算在input框外部，但是此时不能关闭菜单所以要防止关闭菜单。注意只对父组件起作用不对其他祖先组件起作用

代码实例：

                <div class="schMsg" @click="toggleMenu" @click.stop>
                    <div class="dropdown-input">
                        <span>|</span>
                        <input type="text" v-model="addInfoForm.classfy" placeholder="点击选择研究方向" readonly />
                        <img src="./assets/next.png" alt="Image" @click="nextStep" style="cursor: pointer;">
                    </div>
                    <div v-if="menuVisible" class="dropdown-menu">
                        <ul>
                            <li v-for="(item, index) in tmpoptions" :key="index">
                                <div @click.stop="toggleSubMenu(index)"
                                    :class="{ 'menu-item': true, 'selected': selectedIndex === index }">
                                    {{ item.name }}
                                </div>
                                <!-- 二级菜单 -->
                                <ul v-if="item.subMenuVisible" class="sub-menu">
                                    <li v-for="(subItem, subIndex) in item.children" :key="subIndex"
                                        class="sub-menu-item" @click="selectSubItem(index, item, subItem)">
                                        <span>
                                            {{ subItem }}
                                        </span>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

父级点击函数：toggleMenu（打开菜单）

子集点击函数：toggleSubMenu，点击组织toggleMenu发生并且执行toggleSubMenu函数。

监听事件

举例：

首先事件定义为全局监听点击事件，函数是：

mounted() {  document.addEventListener('mousedown', this.handleClickOutside); }


beforeDestroy() {  document.removeEventListener('mousedown', this.handleClickOutside); }


handleClickOutside(event) {  if (!this.$el.contains(event.target)) {    this.menuVisible = false;  } }

这个函数就是，全局监听，当点击事件放生的时候执行函数handleClickOutside

Vue生命周期

生命周期函数也叫钩子函数：

beforeCreate() created()

beforeMount() mounted()

beforeUpdate() updated()

activated() deactivated()

beforeDestroy() destroyed()

（1）beforeCreate()

vue实例创建前的状态，数据没有，虚拟DOM没有真实DOM没有
应用：可以在这里加loading事件

（2）created() 常用

vue实例创建完毕状态，数据有，虚拟DOM没有真实DOM没有
应用：请求后端数据，拿到数据。
不过，大伙也会在mounted请求后端数据，我的理解是：如果需要结合请求数据，操作DOM节点，会在这里请求数据，在created请求后端数据会存在数据没有加载出来，需要进行异步加载。

（3）beforeMount()

数据有，虚拟DOM有，真实DOM没有

（4）mounted() 常用

数据有，虚拟DOM有，真实DOM有
应用：发送ajax请求，请求后端数据。节点操作

（5）beforeUpdate()

在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
在工作中，这个钩子函数我没怎么运用过。

（6） updated()

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情
况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
在工作中，这个钩子函数我没怎么运用过。

（7）activated()

一定要配合keep-alive（缓存作用）来使用，活动时触发

（8）deactivated()

一定要配合keep-alive（缓存作用）来使用，非活动时触发。
应用：activated和deactivated配合使用，切换页面，记录历史浏览位置，增强用户体验效果。实现步骤，后续会更新发布，再添加链接。

（9） beforeDestroy

销毁前状态

（10）destroyed

执行destroy()后，不会改变已生成的DOM节点，但后续就不再受vue控制了
应用：清除定时器、延迟器、取消ajax请求等

postion布局样式 -父相对子绝对

在flex布局的时候，不能越级进行定位

例如

<div class='futher1'>
	<div>
		<div class='son'>
		<div/>
	<div/>
<div/>

在futher1div块下，只会对儿子标签进行修饰，不会对孙子标签进行修饰。

note：想到三层定位了，可以父亲相对定位。儿子相对定位，但是通过margin等来调整样式。在孙子标签内绝对定位。

组件样式-两个类

                    <div @click="prevStep" class="image-container">
                        <img src="./assets/arrow.png" alt="返回" class="image">
                        <img src="./assets/arrowhover.png" alt="返回" class="image hover-image">
                    </div>

这个代码中class="image hover-image"表示，这个img组件有两个类。同时拥有样式1：image和样式2：hover-image

    .hover-image {
        opacity: 0;
    }


    .image-container:hover .hover-image {
        opacity: 1;
        //表示透明度，此时为完全不透明
    }


    .image-container:hover .image:not(.hover-image) {
        opacity: 0;
    }

在这个样式中

.image-container:hover .hover-image表示：在image-container类所在的标签下，如果鼠标悬停，那么类hover-image对应的标签的样式

.image-container:hover .image:not(.hover-image)表示：在image-contianer中悬停，类名是image但不是hover-image的标签的样式

transition: opacity 0.3s ease; 是一个 CSS 属性，它用于定义当元素的 opacity 属性发生变化时，过渡效果的持续时间和缓动函数。具体解释如下：