vue项目中使用vue-layer弹框插件的方法

以下是关于Vue项目中使用vue-layer弹框插件的方法的完整攻略：

1. 下载vue-layer

在Vue项目中使用vue-layer弹框插件之前，首先需要下载vue-layer。可以通过npm包管理器来下载。

npm install vue-layer --save

在安装完成后，可以通过以下方式引入和使用vue-layer弹框。

2. 引入vue-layer

在Vue项目的main.js（入口文件）中引入vue-layer：

import Vue from 'vue';
import layer from 'vue-layer';

Vue.prototype.$layer = layer(Vue);

这个代码片段中，我们首先引入了Vue对象和vue-layer。接着，使用Vue.prototype将引入的vue-layer弹框插件挂载到Vue全局环境中，并起名为 $layer。

3. 在Vue组件中使用vue-layer

下面是在Vue组件中使用vue-layer的方法，具体的代码如下：

<template>
  <div>
    <button @click="showLayer">点击显示弹框</button>
  </div>
</template>

<script>
  export default {
    methods: {
      showLayer() {
        this.$layer.alert('Hello World', {
          icon: 1,
          title: 'Vue-layer示例'
        });
      }
    }
  }
</script>

在这个示例中，我们在Vue组件中定义了一个showLayer方法，在按钮点击事件时执行这个方法。

showLayer 方法中，我们通过this.$layer.alert来显示一个弹框。

在这个弹框中，我们显示的内容是 'Hello World'，同时也可以定义标题和图标等属性。

4. 示例2：

在这个示例中，我们为Vue-layer弹框添加更多选项。

<template>
  <div>
    <button @click="showLayer">点击显示弹框</button>
  </div>
</template>

<script>
  export default {
    methods: {
      showLayer() {
        this.$layer.open({
          content: '这是一个内容',
          title: ['这是一个 h2 标题', 'background-color: #FF4351; color:#fff'],
          btn: ['按钮一', '按钮二'],
          yes: function (index, layero) {
            console.log('按钮一的回调方法');
          },
          btn2: function (index, layero) {
            console.log('按钮二的回调方法');
          },
          cancel: function(){
            console.log('取消按钮的回调方法');
          }
        });
      }
    }
  }
</script>

在这个示例中，我们使用this.$layer.open方法来打开弹框。

打开弹框时，我们同时定义了弹框的标题、图标、按钮等选项。

在点击按钮时，分别触发了yes和btn2定义的回调方法。

同时，我们也定义了取消按钮的回调方法。

这便是Vue项目中使用vue-layer弹框插件的方法的完整攻略。