Vue组件化|通用组件开发——Notification通知组件

最新推荐文章于 2024-08-09 08:08:31 发布

尼古·拉斯

最新推荐文章于 2024-08-09 08:08:31 发布

阅读量1w

点赞数 5

文章标签：组件化 Vue

本文链接：https://blog.csdn.net/gbwine/article/details/96020683

版权

本文详细介绍了如何将Vue组件化应用于开发一个通用的Notification通知组件，包括组件的基础编写、如何将其扩展为插件并在全局范围内使用。通过API调用方式，使得组件能够动态显示和关闭，实现更便捷的交互体验。此外，还涵盖了添加自动关闭功能以及处理扩展运算符的相关配置。

摘要由CSDN通过智能技术生成

1. 基础组件编写

1.1 组件目录结构

1.2 组件文件代码

<template>
  <transition name="fade">
    <div class="notification" :style="style">
      <span class="content">{
  {content}}</span>
      <a class="btn" @click="handleClose">{
  {btn}}</a>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Notification',
  props: {
    content: {
      type: String,
      required: true
    },
    btn: {
      type: String,
      default: '关闭'
    }
  },
  computed: {
    style () {
      return {}
    }
  },
  methods: {
    handleClose (e) {
      e.preventDefault()
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
.notification
  display flex
  background-color #303030
  color rgba(255, 255, 255, 1)
  align-items center
  padding 20px
  position fixed
  min-width 280px
  box-shadow 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.8)
  flex-wrap wrap
  transition all .3s
  .content
    padding 0
  .btn
    color #ff4081
    padding-left 24px
    margin-left auto
    cursor pointer
</style>

1.3 组件使用的过渡效果样式代码

html, body{
  margin: 0
  padding: 0
  width: 100%
  height: 100%
}

body{
  background-image: url(../images/beijing.jpg)
  background-size: cover
  background-position: center
  font: 14px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
  color: #4d4d4d
  -webkit-font-smoothing: antialiased // 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服
  font-weight: 300
}

.fade-enter-active, .fade-leave-active{
  transition: opacity .5s  
}
.fade-enter, .fade-leave-to{
  opacity: 0  
}

1.4 如果我们直接使用这个编写好的组件，只能是我们在编写一个Vue组件的时候引用这个Notification的组件把它写在模版里面，把它去显示出来，我们这里作为一个全局通用型组件，而且我们可以把它发布到第三方去使用的组件，所以我们这里会为其提供一个类似于Vue插件的使用方法。