井井客

搜索

【VUE】做个dialog组件最简实例

最近整理了下我在github上面“vuePro-demo”项目的代码,因为有些代码很旧了,所以优化了很多,其中dialog就是其中之一,然后我又撸了一份最简单的示例,代码不多,很容易学习。

【VUE】做个dialog组件最简实例

虽然说的是组件,但其实是挂在全局方法下面的,在任意页面中可以通过this.$dialog方法来使用。

首先在存放组件src/components文件夹下建一个dialog文件夹,里面放两个文件:index.js以及index.vue。其中vue就跟我们平常的组件一样,里面接受两个参数,一个是消息文字,一个是否显示组件的布尔值。而JS文件则有种承上启下的作用,一方面,它将前面说的组件正确的挂载到页面,一方面抛出方法,将方法接受到的参数传递到组件中。

看一下index.js文件代码:

// 引入VUE
import Vue from 'vue';
// 引入dialog组件
import dialog from './index.vue'

// 构造子类
const Dialog = Vue.extend(dialog);

// 创建实例
let instance = new Dialog({
  el: document.createElement('div')
});

// 创建方法
const DialogEl = function(option){
  // 将参数传给msg
  instance.msg = option;
  
  // 显示组件
  instance.visible = true;
  
  // 插入页面
  document.body.appendChild(instance.$el);
}

// 抛出方法
export default DialogEl;

再看一下index.vue这个dialog组件中的内容:

<template>
  <transition name="scale">
    <div class="dialogBg" v-if="visible">
      <div class="dialog">{{msg}}</div>
    </div>
  </transition>
</template>
<script>
  export default {
  	// 接受msg与visible两个参数,并设置默认值
    props: {
      'msg': {
        type: String,
        default: '未知错误'
      },
      'visible': {
        type: Boolean,
        default: false
      }
    },
    // 观察visible的值变化
    watch: {
      'visible': function (value) {
      	// 当值变化时且由假变为真时,倒计时1.5秒时重新设为假
        if (value === true) {
          setTimeout(() => {
            this.visible = false;
          }, 1500)
        }
      }
    }
  }
</script>

其实除了注释好像也说不出啥来了,index.vue中,主要就是从index.js中接受到的两个msg,visible参数,它们在dialog环境中可以通过this访问到。同时,将visible默认值设为假是有必要的,当第一次调起这个组件时,在JS中将这个值设为真,组件上面v-if='visible'使得组件显示,在后面的不断调用中其实就是visible真假的切换以及msg消息文字的传递。

当然光写成这样是用不了的,一开始我们说的全局使用this.$dialog方法调用。$dialog只是在全局上面的名字,你也可以起名XXX~

我们需要在main.js中,先引入这个index.js文件,并挂到全局。

// 引入dialog组件
import dialog from './components/dialog/index.js';

// 挂载到全局
Vue.prototype.$dialog = dialog;

这样就可以了,在任意地方调用this.$dialog('弹出错误消息'),就可以正确使用了。

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:【VUE】做个dialog组件最简实例
本文链接:/c/28312.html

上一篇:mermaid帮你更轻松实现SVG流程图绘制
下一篇:let作用域的使用,学到了

文章分类

相关阅读

随便看看