快捷導(dǎo)航

vue項(xiàng)目中使用this.$confirm解析

更新時(shí)間：2022年09月23日 14:46:53 作者：chengxue_123

這篇文章主要介紹了vue項(xiàng)目中使用this.$confirm方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue使用this.$confirm

首先在element-ui中的el-table下的el-table-column中引入插槽（相當(dāng)于占位符）

?<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("你確定要?jiǎng)h除嗎，請(qǐng)三思,后果自負(fù)", {
? ? ? ? confirmButtonText: "確定",
? ? ? ? cancelButtonText: "取消",
? ? ? ? type: "warning",
? ? ? })
? ? ? ? .then(() => {
? ? ? ? ? console.log("確定了，要?jiǎng)h除");
? ? ? ? })
? ? ? ? .catch(() => {
? ? ? ? ? console.log("放棄了");
? ? ? ? });
? ? },

此時(shí)，需要在main.js中注冊(cè)組件

import {MessageBox} from 'element-ui';

//Vue.use(MessageBox);//與其他引用不同的是，這里“不能”加Vue.use(MessageBox),不然會(huì)出現(xiàn)問題，達(dá)不到想要的效果
Vue.prototype.$confirm = MessageBox.confirm;

vue TypeError: this.$confirm is not a function

錯(cuò)誤

在使用element ui，采用局部引入時(shí)候，報(bào)錯(cuò)TypeError: this.$confirm is not a function。

因?yàn)闆]有在vue的實(shí)例上掛載confirm和message導(dǎo)致的報(bào)錯(cuò)

解決方案

修改element.js文件：

1.引入messageBox 插件

import {MessageBox} from ‘element-ui'

2.在vue 的原型對(duì)象上掛載confirm

Vue.prototype.$confirm = MessageBox.confirm

如下圖所示：

以后就可以放心的在vue中的任何文件使用this.confirm或者this.confirm或者this.message了。比如：你想用MessageBox中的confirm方法，現(xiàn)在可以這樣用：

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">點(diǎn)擊打開 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('確認(rèn)關(guān)閉？')
          .then(_ => {
            done()
          })
          .catch(_ => {
          })
      }
    }
  }
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: