@@ -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 )
0 commit comments