使用Api的形式封装Vue组件(一)

编写一个右下角弹出提示的vue插件,以api的形式调用。

从构建出基础代码,计算出显示的位置;添加自动消失;消失后删除dom,vm对象;生成多个,删除某个,重新计算位置;鼠标聚焦不关闭,移出重新开始自动消失。

一步一步完善,优化功能。

在文件夹notification下新增一个notification.vue文件 编写基础代码

<template>
  <transition name="fade">
    <div class="notification">
      <span class="container">{{content}}</span>
      <a class="btn" @click.stop.prevent="handleClose">{{btn}}</a>
    </div>
  </transition>
</template>
<script>
  export default {
    name: 'notification',
    props: {
      content: {
        type: String,
        require: true
      },
      btn: {
        type: String,
        default: '关闭'
      }
    },
    methods: {
      handleClose (e) {
        this.$emit('close')
      }
    }
  }
</script>

在同级目录下新建index.js

import Notification from './notification.vue'
export default (Vue) => {
  Vue.component(Notification.name, Notification)
}

在vue入口文件的index.js增加

import Notification from './components/notification'
Vue.use(Notification)
之后在页面的vue文件中增加
<notification content="test notification"></notification>
至此 组件初步搭建完成



阅读更多
文章标签: vue 组件
个人分类: vue
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭