我有一个模态组件,它只是window的精美版本。确认,我通过插入插件使其在nuxt应用程序中的任何地方都可以调用。
components / confirmModal.vue
<template>
<transition name="fade">
<div
v-if="isShow"
@click="handleClickOverlay"
class="confirm-modal-overlay"
id="swConfirm"
>
<transition name="zoom">
<div v-if="isShow" ref="swConfirmDialog" class="confirm-modal-container">
<span class="confirm-modal-text-grid">
<h4 v-if="dialog.title" class="confirm-modal-title">{{ dialog.title }}</h4>
<p v-if="dialog.message" class="confirm-modal-text">{{ dialog.message }}</p>
</span>
<div
class="confirm-modal-btn-grid"
:class="{ isMono: !dialog.button.no || !dialog.button.yes }"
>
<button
v-if="dialog.button.no"
@click.stop="e => handleClickButton(e, false)"
class="confirm-modal-btn left"
>
{{ dialog.button.no }}
</button>
<button
v-if="dialog.button.yes"
@click.stop="e => handleClickButton(e, true)"
class="confirm-modal-btn"
>
{{ dialog.button.yes }}
</button>
</div>
</div>
</transition>
</div>
</transition>
</template>
<script>
import Vue from 'vue'
import { events } from '../plugins/confirm-modal'
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
})
const Component = {
name: 'swConfirmDialog',
data() {
return {
isShow: false,
dialog: {
title: '',
message: '',
button: {}
},
params: {}
}
},
methods: {
resetState() {
this.dialog = {
title: '',
message: '',
button: {},
callback: () => {}
}
},
handleClickButton({ target }, confirm) {
if (target.id == 'swConfirm') return
this.isShow = false
if (this.params.callback) {
this.params.callback(confirm)
}
},
handleClickOverlay({ target }) {
if (target.id == 'swConfirm') {
this.isShow = false
// callback
if (this.params.callback) {
this.params.callback(false)
}
}
},
open(params) {
this.resetState()
this.params = params
this.isShow = true
Object.entries(params).forEach(param => {
if (typeof param[1] == typeof this.dialog[param[0]]) {
this.dialog[param[0]] = param[1]
}
})
},
registerEvents() {
events.$on('open', this.open)
events.$on('close', () => {
this.handleClickOverlay({ target: { id: 'swConfirm' } })
})
}
},
mounted() {
this.registerEvents()
}
}
export default Component
</script>
plugins / confirm-modal.js
import SwConfirmModal from "~/components/SwConfirmModal.vue"
import Vue from "vue"
export const events = new Vue({
name: 'sw-confirm-modal'
})
export default (ctx, inject) => {
Vue.component('sw-confirm-modal', SwConfirmModal)
const confirm = params => {
events.$emit('open', params)
}
confirm.close = () => {
events.$emit('close')
}
ctx.$confirm = confirm
inject("confirm", confirm)
}
,并且像下面的代码一样在组件中调用它,但是由于我想在回调中执行异步功能,所以我不断收到错误"Syntax Error: Can not use the keyword 'await' outside an async function"
methods: {
logout(){
this.$confirm(
{
message: `confirm logout?`,
button: {
no: 'Cancel',
yes: 'OK'
},
callback: confirm => {
if (confirm) {
let res = await this.$auth.logout()
}
}
}
)
}
}
答案 0 :(得分:1)
只需将回调更改为异步
public class MainWindow : Window
{
public void _NewI2CDataRecieved(object sender, I2CDataEventArgs e)
{
string RawStr = e.ToString();
///Update MainWindowViewModel with continuously passed I2C sensor data string "RawStr"
}
public MainWindow()
{
var _i2cInitialize = new I2CInitialize();
_i2cInitialize.NewI2CDataRecieved += new EventHandler<I2CDataEventArgs>(_NewI2CDataRecieved);
_i2cInitialize.I2C_DataRecieved();
}
}