Vue音乐--搜索页面12_清空按钮弹窗页面

最新推荐文章于 2024-07-22 14:57:33 发布

「已注销」

最新推荐文章于 2024-07-22 14:57:33 发布

阅读量445

点赞数

分类专栏： vue 移动端音乐项目文章标签： vue 公共组件弹窗页面

本文链接：https://blog.youkuaiyun.com/kingAn123/article/details/83015917

版权

移动端音乐项目同时被 2 个专栏收录

21 篇文章

订阅专栏

vue

11 篇文章

订阅专栏

本文介绍了如何在Vue项目中创建一个弹窗页面，用于清空搜索历史。通过点击垃圾桶图标显示弹窗，使用公共组件实现弹窗的样式布局和动画效果。此外，还详细阐述了公共组件的事件派发，确保外部可以控制弹窗的显示与关闭，以及在用户确认清空操作后触发相应的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

十二、弹窗页面

要点：
- 弹窗样式布局
- 公共组件，外部可控性

（一）、点击垃圾桶show弹窗页面

为了不在没必要的地方渲染，不想以前那样用v-show标识来打开，而是在弹窗页面的组件中设置内置方法
↓searchHistory.vue

<!--弹窗组件-->
    <confirm 
      ref="confirm" 
      confirmBtnText="清空" 
      text="是否清空所有搜索历史"
    ></confirm>

showConfirm(){
      this.$refs.confirm.show()
    },

comfirm.vue
公共内置方法操作v-show

//公共内置方法操作v-show
show() {
        this.showFlag = true
      },

（二）、弹窗页面样式布局

comfirm.vue

  <transition name="confirm-fade">
    <div class="confirm" v-show="showFlag" @click.stop>
      <div class="confirm-wrapper">
        <div class="confirm-content">
          <p>{{text}}</p>
          <div class="confirm-content_operate">
            <div class="operate-btn left">{{cancelBtnText}}</div>
            <div class="operate-btn">{{confirmBtnText}}</div>
          </div>
        </div>
      </div>
    </div>
  </transition>

/*组件整页背景*/
  .confirm{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 998;
    background-color: rgba(7,17,27,0.5);
  }
/*弹窗的定位*/
  .confirm-wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
  }

（三）、弹窗页面动画样式

/*整页动画样式*/
  .confirm-fade-enter-active{
    animation: confirm-fadein 0.3s;
  }
  @keyframes confirm-fadein{
    0%{
      opacity: 0
    }
    100%{
      opacity: 1
    }
  }
/*选择框动画样式*/
  .confirm-fade-enter-active .confirm-content{
     animation: confirm-zoom 0.3s;
  }
  @keyframes confirm-zoom{
    0%{
      transform: scale(0)
    }
    50%{
      transform: scale(1.1)
    }
    100%{
      transform: scale(1)
    }
  }

（四）、公共组件接收

props: {
	//标题文字
      text: {
        type: String,
        default: ''
      },
      //第二个按钮文字
      confirmBtnText: {
        type: String,
        default: '确定'
      },
      //第一个按钮文字
      cancelBtnText: {
        type: String,
        default: '取消'
      }

（五）公共组件，事件派发

点击了按钮就把弹窗页面关掉show，并传出去给父组件操作

cancel() {
        this.hide()	
        this.$emit('cancel')  //可能需要调用来统计取消了多少次，这里我们不用
      },
      confirm() {
        this.hide()
        this.$emit('confirm')
      }