Skip to content

Commit 2385f74

Browse files
committed
Update readme to include coming feature
1 parent 3a678bd commit 2385f74

File tree

2 files changed

+64
-0
lines changed

2 files changed

+64
-0
lines changed

README.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,70 @@ this.$dialog.confirm($message, {
235235
})
236236
```
237237

238+
## What's next?
239+
### Custom components (coming soon!!!)
240+
241+
```vue
242+
/* File: custom-component.vue */
243+
<template>
244+
<div class="custom-view-wrapper">
245+
<h2>Tell someone about this amazing plugin</h2>
246+
247+
<div v-if="options.html" class="dg-content" v-html="messageBody"></div>
248+
<div v-else="" class="dg-content">{{ messageBody }}</div>
249+
250+
<ok-btn @click="share('share url')" :loading="loading" :options="options" :enabled="true">Share on facebook</ok-btn>
251+
<ok-btn @click="share('share url')" :loading="loading" :options="options" :enabled="true">Share on twitter</ok-btn>
252+
<ok-btn @click="share('share url')" :loading="loading" :options="options" :enabled="true">Share on linkedIn</ok-btn>
253+
<cancel-btn @click="proceed()" :loading="loading" :options="options" :enabled="true">Maybe later!</cancel-btn>
254+
</div>
255+
</template>
256+
257+
<script>
258+
import DialogMixin from 'vuejs-dialog/js/mixins/dialog-mixin'
259+
260+
export default {
261+
mixins: [DialogMixin], // All dialog methods (proceed, cancel, etc), state variables (options, etc) and computed properties are included
262+
methods: {
263+
share(url) {
264+
// popup share window
265+
}
266+
}
267+
}
268+
</script>
269+
270+
<style scoped="">
271+
button {
272+
width: 100%;
273+
margin-bottom: 10px;
274+
float: none;
275+
}
276+
</style>
277+
```
278+
279+
```javascript
280+
import TestView from './path/to/file/custom-component.vue'
281+
const VIEW_NAME = 'my-view'
282+
283+
let vm = new Vue({
284+
created() {
285+
this.$dialog.registerComponent(VIEW_NAME, TestView)
286+
},
287+
methods: {
288+
showCustomView(){
289+
this.$dialog.alert(trans('messages.html'), {
290+
view: VIEW_NAME, // can be set globally too
291+
html: true,
292+
animation: 'fade',
293+
backdropClose: true
294+
})
295+
}
296+
}
297+
})
298+
```
299+
...and you get your custom view
300+
![Vuejs Dialog Plugin](./src/docs/img/custom-view.png?raw=true "Vuejs Dialog Plugin custom view demo")
301+
238302
# License
239303

240304
[MIT](http://opensource.org/licenses/MIT)

src/docs/img/custom-view.png

23.9 KB
Loading

0 commit comments

Comments
 (0)