Vue2.x学习笔记

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

前言 -->警告提示组件

  • 警告提示组件由两部分组成：

    • 内容提示
    • 到达持续时间，自动消失

  • 它的主要功能包括：

    • 可以在组件中使用
    • 可以直接通过 this 调用，此时被挂载到 body 下

# 1.目录结构

├── alert
│   ├── alert.vue
│   └── index.js
1
2
3

# 2.组件封装

  • 源代码 1

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

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 都是可以的。

import Alert from "./src/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)
        },
    }
}
Alert.install = function (Vue) {
    Vue.component(Alert.name, Alert)
}
export default Alert
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  • 源代码 2
<template>
  <div class="alert">
    <div class="alert-main" v-if="!notices.length">
      <div class="alert-content"><slot></slot></div>
    </div>
    <div v-else class="alert-main" v-for="item in notices" :key="item.name">
      <div class="alert-content">{{ item.notice }}</div>
    </div>
  </div>
</template>

<script>
let seed = 0;
function getUuid() {
  return "alert_" + seed++;
}
export default {
  name: "VueAlert",
  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>

<style lang="less">
.alert {
  position: fixed;
  width: 100%;
  top: 36px;
  left: 0;
  z-index: 1000;
  text-align: center;
  pointer-events: none;
}
.alert-content {
  display: inline-block;
  padding: 8px 16px;
  background: lightblue;
  border:1px solid blue ;
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

# 3.使用案例

刷新
全屏/自适应

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

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

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

# 4.改进

最后要做的，就是调用 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)
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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")
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这样在项目任何地方，都可以通过 this.$Alert 来调用 Alert 组件了，我们创建一个 alert 的路由，并在 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

  1. Alert.vue 的最外层是有一个 .alert 节点的，它会在第一次调用 $Alert 时，在 body 下创建，因为不在 router-view 内，它不受路由的影响，也就是说一经创建，除非刷新页面，这个节点是不会消失的，所以在 alert.vue 的设计中，并没有主动销毁这个组件，而是维护了一个子节点数组 notices。

  2. .alert 节点是 position: fixed 固定的，因此要合理设计它的 z-index，否则可能被其它节点遮挡。

  3. notification.js 和 alert.vue 是可以复用的，如果还要开发其它同类的组件，比如二次确认组件 $Confirm, 只需要再写一个入口 confirm.js，并将 alert.vue 进一步封装，将 notices 数组的循环体写为一个新的组件，通过配置来决定是渲染 Alert 还是 Confirm，这在可维护性上是友好的。

  4. 在 notification.js 的 new Vue 时，使用了 Render 函数来渲染 alert.vue，这是因为使用 template 在 runtime 的 Vue.js 版本下是会报错的。

  5. 本例的 content 只能是字符串，如果要显示自定义的内容，除了用 v-html 指令，也能用 Functional Render（之后章节会介绍）。

总结

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

← 组件发布 →