返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目中使用this.$confirm解析
  • 263
分享到

vue项目中使用this.$confirm解析

2024-04-02 19:04:59 263人浏览 独家记忆
摘要

目录Vue使用this.$confirmvue TypeError: this.$confirm is not a function错误解决方案vue使用this.$confirm

vue使用this.$confirm

首先在element-ui中的el-table下的el-table-column中引入插槽(相当于占位符)

 <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
 handleDelete(index, item) {
      this.$confirm("你确定要删除吗,请三思,后果自负", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("确定了,要删除");
        })
        .catch(() => {
          console.log("放弃了");
        });
    },

此时,需要在main.js中注册组件

import {MessageBox} from 'element-ui';

//Vue.use(MessageBox);//与其他引用不同的是,这里“不能”加Vue.use(MessageBox),不然会出现问题,达不到想要的效果
Vue.prototype.$confirm = MessageBox.confirm;

vue TypeError: this.$confirm is not a function

错误

在使用element ui,采用局部引入时候,报错TypeError: this.$confirm is not a function。

因为没有在vue的实例上挂载confirm和message导致的报错

解决方案

修改element.js文件:

1.引入messageBox 插件

import {MessageBox} from ‘element-ui'

2.在vue 的原型对象上挂载confirm

Vue.prototype.$confirm = MessageBox.confirm

如下图所示:

以后就可以放心的在vue中的任何文件使用this.confirm或者this.confirm或者this.message了。比如:你想用MessageBox中的confirm方法,现在可以这样用:

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dialogVisible: false
      }
    },
    methods: {
      handleClose (done) {
        const _this = this
        _this.$confirm('确认关闭?')
          .then(_ => {
            done()
          })
          .catch(_ => {
          })
      }
    }
  }
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue项目中使用this.$confirm解析

本文链接: https://lsjlt.com/news/168290.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue项目中使用this.$confirm解析
    目录vue使用this.$confirmvue TypeError: this.$confirm is not a function错误解决方案vue使用this.$confirm ...
    99+
    2024-04-02
  • vue项目中的this.$get,this.$post等$的用法案例详解
    vue官网上有这么一句话 vue.js的插件应该暴露一个install方法。这个方法的第一个参数是vue构造器,第二个参数是一个可选的选项对象: 注意要首先安装axios 即 np...
    99+
    2022-12-10
    vue 中的this.$get this.$post等$的用法 vue 中this.$get this.$post
  • vue项目中js文件使用vue的this实例说明
    目录vue中其他.js文件使用this实例main.js中导出vuerequest.js中导入main.js并使用vue模板使用this问题vue中其他.js文件使用this实例 在...
    99+
    2022-12-08
    vue项目js文件 vue的this js文件使用vue的this
  • vue+el使用this.$confirm,不能阻断代码往下执行的解决
    目录vue+el使用this.$confirm不能阻断代码往下执行具体解决后记使用this.$confirm换行显示提示信息这里我需要显示两行信息解释vue+el使用this.$co...
    99+
    2024-04-02
  • 详解vue项目中使用vuedraggable
    最近在学习一个可视化搭建的项目,里面用的拖拽就是draggable.js。看了几个中文的文档,有很多坑,可能是没有及时更新的原因。 VUe  建议去看vuedraggabl...
    99+
    2024-04-02
  • Vue项目中使用Bootstrap
    一、安装jQuery Bootstrap需要依赖jQuery,所以引用Bootstrap之前要先引用jQuery,使用下面的命令引用jQuery: npm install jquer...
    99+
    2024-04-02
  • vue项目中main.js使用方法详解
    目录第一部分:main.js文件解析第二部分:Vue.use的作用以及什么时候使用Vue.use是什么?(官方文档)Vue.use()什么时候使用?补充:关于main.js方便小技巧...
    99+
    2024-04-02
  • vue中 this.$set的使用详解
    目录vue中 this.$set的使用使用为什么能够响应式?分析总结vue中 this.$set的使用 背景:在我写前端项目的时候,后端给我们的一个json对象,并且我已经渲染在页面...
    99+
    2024-04-02
  • vue-cli创建项目及项目结构解析
    目录1.进入一个目录,创建项目2.选择你需要的配置项2.1 选择vue版本2.2 选择选择是否使用history router2.3 选择css 预处理器2.4 选择Eslint代码...
    99+
    2024-04-02
  • Vue 项目中Echarts 5使用方法详解
    目录前言创建项目基本使用安装使用方法柱状图动态排序柱状图前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRende...
    99+
    2022-11-13
    Vue 项目使用Echarts 5 Vue Echarts 5
  • 在vue项目中使用Swiper插件详解
    目录vue项目使用Swiper插件第一步:下载Swiper插件 第二步:在对应的组件页面中导入该插件第三步: 编写对应的html部分第四步:在data中配置对应的参数vue...
    99+
    2023-01-14
    vue Swiper vue使用Swiper插件 vue Swiper插件
  • 解析.netcore项目中IStartupFilter使用教程
    背景: netcore项目中有些服务是在通过中间件来通信的,比如orleans组件。它里面服务和客户端会指定网关和端口,我们只需要开放客户端给外界,服务端关闭端口。相当于去掉host...
    99+
    2024-04-02
  • vue项目中如何使用typescript
    本篇内容主要讲解“vue项目中如何使用typescript”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue项目中如何使用typescript”吧!1、引入Typescriptnpm ...
    99+
    2023-06-21
  • Vue项目中如何使用Bootstrap
    本篇内容主要讲解“Vue项目中如何使用Bootstrap”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue项目中如何使用Bootstrap”吧!一、安装jQueryBootstrap需要依赖j...
    99+
    2023-06-29
  • vue项目中如何使用mock
    本篇文章为大家展示了vue项目中如何使用mock,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下...
    99+
    2023-06-25
  • vue项目中如何使用websocket
    这篇文章将为大家详细讲解有关vue项目中如何使用websocket,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是websocket?“WebSocket 是 HTML5 开始提供的一种在单个 TCP...
    99+
    2023-06-29
  • vue项目中如何使用vuedraggable
    本篇内容主要讲解“vue项目中如何使用vuedraggable”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue项目中如何使用vuedraggable”吧!由于vue3已经是默认版本了,所以v...
    99+
    2023-06-30
  • vue项目中main.js怎么使用
    这篇文章主要介绍了vue项目中main.js怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue项目中main.js怎么使用文章都会有所收获,下面我们一起来看看吧。第一部分:main.js文件解析src...
    99+
    2023-07-02
  • vue项目中main.js如何使用
    在Vue项目中,main.js是整个项目的入口文件,可以在其中做一些初始化的操作。以下是一些常见的用法:1. 引入Vue和根组件:`...
    99+
    2023-08-09
    vue main.js
  • vue项目中如何使用axios
    这篇文章主要介绍了vue项目中如何使用axios的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue项目中如何使用axios文章都会有所收获,下面我们一起来看看吧。Axios简介axios框架全称(ajax –...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作