vue3中实现this.$modal .confirm('是否确认删除用户编号为"' + userIds + '"的数据项?') .then(function () { return delUser(userIds); }) .then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }) .catch(() => {}); },
时间: 2024-03-12 12:47:33 浏览: 91
在Vue3中,可以通过在全局注册一个名为`$modal`的对象来实现`this.$modal`的功能。具体实现步骤如下:
1. 创建一个名为`modal`的插件,用于在Vue实例中注册`$modal`对象:
```javascript
const modal = {
install(app) {
app.config.globalProperties.$modal = {
confirm(message) {
return new Promise((resolve, reject) => {
if (window.confirm(message)) {
resolve();
} else {
reject();
}
});
},
msgSuccess(message) {
// 实现消息提示功能
}
};
}
};
export default modal;
```
2. 在`main.js`中引入`modal`插件并注册:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import modal from './plugins/modal';
const app = createApp(App);
app.use(modal);
app.mount('#app');
```
3. 在组件中使用`this.$modal`:
```javascript
export default {
methods: {
deleteUser(userIds) {
this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?')
.then(() => {
return delUser(userIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
}
}
};
```
阅读全文