<script>
export default {
props: {
headerText: String,
descriptionText: String,
}
}
</script>
<template>
<div class="modal">
<h2>{{ headerText }}</h2>
<p>{{ descriptionText }}</p>
<div class="modal-actions">
<button @click="$emit('modal-ok')">OK</button>
</div>
</div>
</template>
<script>
export default {
props: {
headerText: String,
descriptionText: String,
}
}
</script>
<template>
<div class="modal">
<h2 v-if="headerText">{{ headerText }}</h2>
<img v-else src="https://picsum.photos/100">
<p>{{ descriptionText }}</p>
<div class="modal-actions">
<button @click="$emit('modal-ok')">OK</button>
</div>
</div>
</template>
<script>
export default {
props: {
headerText: String,
descriptionText: String,
logoUrl: String
}
}
</script>
<template>
<div class="modal">
<h2 v-if="headerText">{{ headerText }}</h2>
<img v-else :src="logoUrl">
<p>{{ descriptionText }}</p>
<div class="modal-actions">
<button @click="$emit('modal-ok')">OK</button>
</div>
</div>
</template>
<script>
export default {
props: {
headerText: String,
descriptionText: String,
logoUrl: String,
isCancelShown: Boolean
}
};
</script>
<template>
<div class="modal">
<h2 v-if="headerText">{{ headerText }}</h2>
<img v-else :src="logoUrl">
<p>{{ descriptionText }}</p>
<div class="modal-actions">
<button v-if="isCancelShown" @click="$emit('modal-cancel')">Cancel</button>
<button @click="$emit('modal-ok')">OK</button>
</div>
</div>
</template>
<script>
export default {
props: {
headerText: String,
descriptionText: String,
logoUrl: String,
isCancelShown: Boolean
}
};
</script>
<template>
<div class="modal">
<h2 v-if="headerText">{{ headerText }}</h2>
<img v-else :src="logoUrl">
<p>{{ descriptionText }}</p>
<div class="modal-actions">
<button v-if="isCancelShown" @click="$emit('modal-cancel')">Cancel</button>
<button @click="$emit('modal-ok')">OK</button>
</div>
</div>
</template>
<script>
export default {
props: {
descriptionText: String,
logoUrl: String,
isCancelShown: Boolean
}
};
</script>
<template>
<div class="modal">
<slot></slot>
<p>{{ descriptionText }}</p>
<div class="modal-actions">
<button v-if="isCancelShown" @click="$emit('modal-cancel')">Cancel</button>
<button @click="$emit('modal-ok')">OK</button>
</div>
</div>
</template>
<script>
export default {}
</script>
<template>
<div>
<slot name="header"></slot>
<slot name="description"></slot>
<div class="modal-actions">
<slot name="actions"></slot>
</div>
</div>
</template>
<!-- parent component -->
<template>
<my-modal>
<template #header>My header</template>
<template #description>
<h4>
Here is my awesome description
</h4>
<span>Description text goes here</span>
</template>
<template #actions>
<button v-if="isCancelShown" @click="onCancel">Cancel</button>
<button @click="onSubmit" :style="{backgroundColor: okColor}">OK</button>
</template>
</my-modal>
</template>
<!-- MyModal.vue -->
<script>
export default {
data() {
return {
loading: true
};
},
created() {
setTimeout(() => (this.loading = false), 3000);
}
};
</script>
<template>
<div class="modal">
<slot name="header" :loading="loading"></slot>
<slot name="description"></slot>
<div class="modal-actions">
<slot name="actions"></slot>
</div>
</div>
</template>
<!-- App.vue -->
<my-modal>
<template #header="{ loading }">
<h2>You have joined Vue workshop!
<template v-if="loading">Wait for it...</template>
</h2>
</template>
...
</my-modal>