七.特殊窗口（警告提示）

前言

下拉菜单组件应该由两部分组成：
- 选中项的文本
- 待选菜单（默认隐藏）
它的主要功能包括：
- 鼠标经过下拉菜单组件，显示待选菜单
- 鼠标滑出下拉菜单组件，隐藏待选菜单
- 鼠标点击待选菜单中的条目，选中项文本更新，组件派发 change 事件

1.目录结构

├── alert
│   ├── alert.vue
│   └── index.js

实现这样一种组件并不难，只需要简单的几行 div 和 css

vue

<template>
  <div>
    <Alert v-if="show">这是一条提示信息</Alert>
    <button @click="show = true">显示</button>
  </div>
</template>
<script>
import Alert from "../component/alert.vue"

export default {
  components: { Alert },
  data() {
    return {
      show: false,
    }
  },
}
</script>

这样的用法，有以下缺点：

每个使用的地方，都得注册组件
需要预先将放置在模板中
需要额外的 data 来控制 Alert 的显示状态
Alert 的位置，是在当前组件位置，并非在 body 下，有可能会被其他组件遮挡

总之对使用者来说是很不友好的，那怎样怎样才能优雅地实现这样一个组件呢

1.先把组件写好

methods: {
  handleShow () {
    this.$Alert({
      content: '这是一条提示信息',
      duration: 3
    })
  }
}

this.$Alert 可以在任何位置调用，无需单独引入。该方法接受两个参数：

content:提示内容
duration:持续时间，单位秒，默认 1.5 秒，到时间自动消失。

我们从最简单的入手，不考虑其他，先写一个基本的 Alert 组件

vue

<!-- alert.vue -->
<template>
  <div class="alert">
    <div class="alert-main" v-for="item in notices" :key="item.name">
      <div class="alert-content">{{ item.content }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      notices: [],
    }
  },
}
</script>
<style>
.alert {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
}
.alert-content {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
}
</style>

Alert 组件不同于常规的组件使用方式，它最终是通过 JS 来调用的，因此组件不用预留 props 和 events 接口。

接下来，只要给数组notices增加数据，这个提示组件就能显示内容了，我们先假设，最终会通过 JS 调用 Alert 的一个方法add,并将content和duration传入进来：

vue

<script>
let seed = 0
function getUuid() {
  return "alert_" + seed++
}
export default {
  data() {
    return {
      notices: [],
    }
  },
  methods: {
    add(notice) {
      const name = getUuid()
      let _notice = Object.assign(
        {
          name: name,
        },
        notice
      )
      this.notices.push(_notice)

      // 定时移除
      const duration = notice.duration
      setTimeout(() => {
        this.remove(name)
      }, duration * 1000)
    },
  },
  remove(name) {
    const notices = this.notices
    for (let i = 0; i < notices.length; i++) {
      this.notices.split(i, 1)
      break
    }
  },
}
</script>

在add方法中，给每一个传进来的提示数据，加了一个不重复的name字段来标识，并通过setTimeout创建了一个计时器，当到达指定的duration持续时间后，调用remove方法，将对应的name的那条提示信息找到，并从数组中移除。

由这个思路，Alert 组件就可以无限扩展只要在 add 方法中传递更多的参数，就能支持更复杂的组件，比如是否显示手动关闭按钮，确定/取消按钮，甚至传入一个 Render 函数都可以。

2.实例化封装

可以使用 Vue.extend 或 new Vue，然后用 $mount 挂载到 body 节点下

在 src/components/alert 目录下新建 notification.js 文件：

// notification.js
import Alert from "./alert.vue"
import Vue from "vue"

Alert.newInstance = (properties) => {
  const props = properties || {}

  const Instance = new Vue({
    data: props,
    render(h) {
      return h(Alert, {
        props: props,
      })
    },
  })

  const component = Instance.$mount()
  document.body.appendChild(component.$el)

  const alert = Instance.$children[0]

  return {
    add(noticeProps) {
      alert.add(noticeProps)
    },
    remove(name) {
      alert.remove(name)
    },
  }
}

export default Alert

notification.js 并不是最终的文件，它只是对 alert.vue 添加了一个方法 newInstance。虽然 alert.vue 包含了 template、script、style 三个标签，并不是一个 JS 对象，那怎么能够给它扩展一个方法 newInstance 呢？事实上，alert.vue 会被 Webpack 的 vue-loader 编译，把 template 编译为 Render 函数，最终就会成为一个 JS 对象，自然可以对它进行扩展。

Alert 组件没有任何 props，这里在 Render Alert 组件时，还是给它加了 props，当然，这里的 props 是空对象 {}，而且即使传了内容，也不起作用。这样做的目的还是为了扩展性，如果要在 Alert 上添加 props 来支持更多特性，是要在这里传入的。不过话说回来，因为能拿到 Alert 实例，用 data 或 props 都是可以的。

3.入口

最后要做的，就是调用 notification.js 创建实例，并通过 add 把数据传递过去，这是组件开发的最后一步，也是最终的入口。在 src/component/alert 下创建文件 alert.js：

// alert.js
import Notification from "./notification.js"

let messageInstance

function getMessageInstance() {
  messageInstance = messageInstance || Notification.newInstance()
  return messageInstance
}

function notice({ duration = 1.5, content = "" }) {
  let instance = getMessageInstance()

  instance.add({
    content: content,
    duration: duration,
  })
}

export default {
  info(options) {
    return notice(options)
  },
}

getMessageInstance 函数用来获取实例，它不会重复创建，如果 messageInstance 已经存在，就直接返回了，只在第一次调用 Notification 的 newInstance 时来创建实例。

alert.js 对外提供了一个方法 info，如果需要各种显示效果，比如成功的、失败的、警告的，可以在 info 下面提供更多的方法，比如 success、fail、warning 等，并传递不同参数让 Alert.vue 知道显示哪种状态的图标。本例因为只有一个 info，事实上也可以省略掉，直接导出一个默认的函数，这样在调用时，就不用 this.$Alert.info() 了，直接 this.$Alert()。

最后把 alert.js 作为插件注册到 Vue 里就行，在入口文件 src/main.js中，通过 prototype 给 Vue 添加一个实例方法：

// src/main.js
import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import Alert from "../src/components/alert/alert.js"

Vue.config.productionTip = false

Vue.prototype.$Alert = Alert

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app")

这样在项目任何地方，都可以通过 this.$Alert 来调用 Alert 组件了，我们创建一个 alert 的路由，并在 src/views 下创建页面 alert.vue：

vue

<!-- src/views/alert.vue -->
<template>
  <div>
    <button @click="handleOpen1">打开提示 1</button>
    <button @click="handleOpen2">打开提示 2</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleOpen1() {
      this.$Alert.info({
        content: "我是提示信息 1",
      })
    },
    handleOpen2() {
      this.$Alert.info({
        content: "我是提示信息 2",
        duration: 3,
      })
    },
  },
}
</script>

以下几点是同类组件中值得注意的：

Alert.vue 的最外层是有一个 .alert 节点的，它会在第一次调用 $Alert 时，在 body 下创建，因为不在 <router-view> 内，它不受路由的影响，也就是说一经创建，除非刷新页面，这个节点是不会消失的，所以在 alert.vue 的设计中，并没有主动销毁这个组件，而是维护了一个子节点数组 notices。
.alert 节点是 position: fixed 固定的，因此要合理设计它的 z-index，否则可能被其它节点遮挡。
notification.js 和 alert.vue 是可以复用的，如果还要开发其它同类的组件，比如二次确认组件 $Confirm, 只需要再写一个入口 confirm.js，并将 alert.vue 进一步封装，将 notices 数组的循环体写为一个新的组件，通过配置来决定是渲染 Alert 还是 Confirm，这在可维护性上是友好的。
在 notification.js 的 new Vue 时，使用了 Render 函数来渲染 alert.vue，这是因为使用 template 在 runtime 的 Vue.js 版本下是会报错的。
本例的 content 只能是字符串，如果要显示自定义的内容，除了用 v-html 指令，也能用 Functional Render（之后章节会介绍）。

总结

通过对前端组件的分析，需要重点关注组件中易变性对组件封装的影响，它会对组件的可复用性、可扩展性产生很大影响

七.特殊窗口（警告提示） ​

1.目录结构 ​

1.先把组件写好 ​

2.实例化封装 ​

3.入口 ​

七.特殊窗口（警告提示）

1.目录结构

1.先把组件写好

2.实例化封装

3.入口