Vue 2.x

Vue 3.x

一个 Vue 3 UI 框架 | Element Plus (gitee.io)

alert 和 this.$alert

// alert（'这是 js 自带的提示框'）
    alert('这是js自带的提示框')
    //this.$alert 这是ElementUI提供的提示框 可以带回调函数
    this.$alert('这是ElementUI提供的提示框',{
      confirmButtonText:'确定',
      callback:action => {
        this.$message('点击了确定')
      }
    })

alert

this.$alert

点击完后有回调函数

confirm 和 this.$confirm

//这是 js 自带的确认框，不需要Vue+ElementUI 环境也能使用
    confirm('是否删除')
    this.$confirm需要Vue+ElementUI 环境才能使用
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });
    });

confirm

this.$confirm

prompt 和 this.$prompt

//prompt 不需要 Vue+ElementUI 环境也能使用 返回值是输入的内容
     prompt('请输入邮箱')

    this.$prompt('请输入邮箱', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
      inputErrorMessage: '邮箱格式不正确'
    }).then(({ value }) => {
      this.$message({
        type: 'success',
        message: '你的邮箱是: ' + value
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '取消输入'
      });
    });

prompt

this.$prompt

this.$notify

this.$notify({
      title:'通知',
      message:'我是一条通知'
    })

原生js自带	Vue+ElementUI

外部引用

notify

在普通文件中引用

Vue里面

<script>
import n from '@/notify'
export default {
  mounted() {
    n.a()
  }
}
</script>

外部的js文件

// 在js 文件中使用ElementUI 组件，需要先导入
// 那么为什么在Vue 文件中不需要导入呢？因为 Vue 全局注册过了
import { Message } from 'element-ui'

const n={
    a:function (){
        Message({
            type:'success',
            message:'message'
        })
    }
}
export default n