vue transition 在子组件中失效的解决

2024-11-30 13:20:03

错误代码：

子组件：

<template>
 <div v-show="showMine">
  <div class="mask" @click.self="onMask"></div>
  <transition name="slide-fade">
   <div class="my_group" v-if="showMine">我的</div>
  </transition>
 </div>
</template>

<script>
export default {
 name: "mine",
 props: ["showMine"],
 data() {
  return {};
 },
 methods: {
  onMask() {
   this.$emit("onMask");
  }
 }
};
</script>

<style lang="less" scoped>
.mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background-color: rgba(0, 0, 0, 0.1);
 z-index: 10;
}
.my_group {
 width: 60%;
 top: 0;
 bottom: 0;
 height: 100%;
 background-color: #fff;
 position: fixed;
 z-index: 11;
}
.slide-fade-enter-active,
.slide-fade-leave-active {
 transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
 transform: translateX(-100%);
 transition: all 0.3s ease;
}
</style>

父组件：

<template>
 <div class="headers">
  <div class="nav">
   <div class="mine" @click="onMine">
    <i class="cubeic-person"></i>
   </div>
   <div class="city">
    深圳市
    <i class="cubeic-pulldown"></i>
   </div>
   <div class="info">
    <i class="cubeic-message"></i>
   </div>
  </div>
  <app-mine :showMine="showMine" @onMask="onMask" />
 </div>
</template>

<script>
import appMine from "../Mine";
export default {
 name: "headers",
 components: {
  "app-mine": appMine
 },
 data() {
  return {
   showMine: false
  };
 },
 methods: {
  onMine() {
   this.showMine = true;
  },
  onMask() {
   this.showMine = false;
  }
 }
};
</script>

<style lang="less" scoped>
.nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
 height: 1.066667rem;
 padding: 0 0.266667rem;
 box-sizing: border-box;
 font-size: 0.48rem;

 .city {
  font-size: 0.373333rem;
  color: #7e7e7e;
 }
}
.mine,
.info,
.city {
 height: 100%;
 line-height: 1.066667rem;
}
</style>

效果：

修改代码只要把子组件中的的showMine放在mask元素中就可以

效果:

以上这篇vue transition 在子组件中失效的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

关于vue状态过渡transition不起作用的原因解决

总所周知,vue中的transition标签可以方便得进行动画过渡,使用的方法也很简单. <transition name="你要的名字"> 过渡的元素... </transition> 这里需要主要一点的是:过渡的元素只能是以下之一: 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件组件根节点常用的过渡名称有fade等你可以这样用 <transition name="fade"> 过渡的元素...
Vue 过渡（动画）transition组件案例详解

Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g
解决vue 引入子组件报错的问题

错误信息: Do not use built-in or reserved HTML elements as component id: header 源码: <script> import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export de
解决vue组件中click事件失效的问题

最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&
Vue中的transition封装组件的实现方法

vue版本信息:2.5.2 问题起源于使用Vue做网站时涉及到的一个小部件显示动画,阅读了Vue的文档后结合网上各位的经验,花了点时间研究了下. 最终的效果如上图所示,当鼠标移入灰色方块时弹出层会至上而下显示出来,类似于拉链式窗帘(?). 实例实现上图所示的效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
解决vue 中 echart 在子组件中只显示一次的问题

问题描述一次项目开发过程中,需要做一些图表,用的是百度开源的 echarts. vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用. 实际开发中,数据肯定都是异步获取的.所以我们在 mounted 生命周期中获取数据.对vue生命周期不熟悉的,可以去看一下我之前写一篇文章vue2.0项目实战(4)生命周期和钩子函数详解由于父组件请求的数据并不是一成不变的,会根据不同的条件请求不同的数据,此时需要图表进行更新. 代码示例在父组件中 // Main.vu
vue内置组件transition简单原理图文详解(小结)

基本概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 简单用法用 v-if/v-show 控制显示隐藏,使用transition 组件控制其变化过程一个页面子组件 router-view 的消失隐藏,使用transi
vue transition 在子组件中失效的解决

错误代码: 子组件: <template> <div v-show="showMine"> <div class="mask" @click.self="onMask"></div> <transition name="slide-fade"> <div class="my_group" v-if="showMine"&g
vue slot 在子组件中显示父组件传递的模板

父组件使用没有指定slot属性,默认为default 在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body&
vue activated在子组件中的使用详情

页面:base: <template> <div class="tab-container"> <h1 style="text-align: center"> 申请{{ form.category }}{{ form.companyType }}入驻 </h1> <div class="form-panel" style="margin-left: 20px;text-align:
vue父组件中获取子组件中的数据(实例讲解)

如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo
Vue子组件向父组件通信与父组件调用子组件中的方法

子组件向父组件通信子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息父组件调用子组件
Vue父组件如何获取子组件中的变量

在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题. 之前有说过通过ref来让父组件操作子组件,并且传值,那么我们今天来详细看看. 案例一:点击父组件的按钮,操作子组件显示注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用. 介绍:这里通过给子组件绑定ref属性,引号命名自定义,然后父组件通过 this.$refs.名字就可以操作子组件的元素,以
vue如何通过props方式在子组件中获取相应的对象

目录方法一所以就可以直接拿取方法二有时候会获取不到,可以用一个定时器来获取方法三深拷贝方法四利用watch监听这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就简单的记录一下,希望下次不会再犯同样的错误. 子组件定义props,父组件传入数据,子组件在js中获取的时候使用,如果是在html里面,可以直接把变量渲染上去. 我就直接从代码上面来进行 js代码: //子组件中,定义传入的变量的类型等 props: { data: { type: Array, r
解决vue同一slot在组件中渲染多次的问题

Q:今天写公共组件的时候碰到一个奇葩的情况,slot内部需要再次调用slot,这就会导致同一slot在组件中渲染多次引发的bug A:把把父组件需要传入的dom结构作为props属性传递给slotRender,保证出来的dom结构不相同(尽管它们都是同一vnode渲染出来的) 定义一个渲染slot的组件子公共组件调用父公共组件调用以上这篇解决vue同一slot在组件中渲染多次的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
Vue 实现对quill-editor组件中的工具栏添加title

前言:quill-editor组件中的工具栏都是英文,而且最难受的时没有title提示,要怎样给他添加title,并且是中文的title提示呢? 一.创建一个quill-title.js文件 ①.在其中插入以下代码 const titleConfig = { 'ql-bold':'加粗', 'ql-color':'颜色', 'ql-font':'字体', 'ql-code':'插入代码', 'ql-italic':'斜体', 'ql-link':'添加链接', 'ql-background':'

vue transition 在子组件中失效的解决

相关推荐

随机推荐