带有CSS过渡的Vue弹出窗口– Vue-over-body

带有CSS过渡的Vue弹出窗口– Vue-over-body
插件名称 vue-over-body
发布时间 2020年6月3日
插件作者 marcodpt

通过Vue-over-Body项目,您可以创建具有CSS过渡的模式,侧边栏,通知,弹出窗口。

安装和下载:

# NPM
$ npm install vue-over-body --save

使用:

  import Vue from 'vue'
  import overBody from 'vue-over-body'

  new Vue({
    components: {
      'vue-over-body': overBody
    },
    data: function () {
      return {
        open: 1
      }
    }
  }).$mount('#app')
  <vue-over-body :dim="false" :open="open" before="before" after="after" :transition="0.3">
    <div>
      <button @click="open = 0">×</button>
      <p>A little alert message!</p> 
      <p>For the users of your app!</p> 
    </div>
  </vue-over-body>
  .before {
    top: 50px;
    right: -300px;
    width: 300px;
    background-color:yellow;
    position:absolute;
  }

  .after {
    right: 50px;
  }

Props:

  • open
    • 类型: Number
    • 默认值:0
    • 描述:0表示隐藏,其他数字表示组件的z索引
  • before
    • 类型: String
    • 默认值:“”
    • 描述:css类已添加到插槽父级,始终处于活动状态
  • after
    • 类型: String
    • 默认值:“”
    • 说明:css类已添加到插槽父级,转换后处于活动状态
  • transition
    • 类型: Number
    • 默认值:0.3
    • 描述:过渡时间(以秒为单位)
  • dim
    • 类型: Boolean
    • 默认值:true
    • 描述:使背景变暗吗?
  • dialogStyle
    • 类型: Object
    • 默认值:{}
    • 描述:应用于对话框容器的样式