KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated demo

Browse Source
This commit is contained in:
euvl
2017-04-07 15:14:49 +01:00
parent 213062e5fc
commit ff173186d0
10 changed files with 178 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/index.html
View File

@@ -3,6 +3,8 @@
<head>
<meta charset="utf-8">
<title>Vue Modal Examples</title>
<meta name="description" content="Vue.js modal component. Simple, clean with no external dependencies."/>
<meta name="keywords" content="vue, vuejs, modal, dialog, box, modal box, dialog box, vue-modal vuejs-modal.">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

3
demo/package.json
View File

@@ -6,8 +6,7 @@
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.0.0",
"vue-js-modal": "^1.0.13"
"vue": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.0.0",

27
demo/src/App.vue
View File

@@ -1,6 +1,13 @@
<template>
<div id="app">
<modal name="example-modal" transition="nice-modal-fade" :min-width="200" :min-height="200" :delay="100" :adaptive="adaptive" :resizable="resizable">
<modal name="example-modal"
transition="nice-modal-fade"
:min-width="200"
:min-height="200"
:delay="100"
:adaptive="adaptive"
:resizable="resizable"
:draggable="draggable">
<div style="height: 100%; box-sizing: border-box; padding: 10px; font-size: 13px; overflow: auto">
Appropriately exploit professional infrastructures rather than unique growth strategies. Assertively build leveraged growth strategies vis-a-vis multimedia based vortals. Progressively simplify cross-platform value through interactive imperatives. Objectively
implement enabled web services after plug-and-play ROI. Distinctively impact inexpensive schemas before installed base imperatives. Holisticly benchmark pandemic process improvements without wireless experiences. Efficiently create worldwide partnerships
@@ -47,10 +54,11 @@
</table>
<div style="margin-top: 20px; margin-bottom: 20px;">
<button @click="show(false, false)">Simple</button>
<button @click="show(true, false)">Resizable</button>
<button @click="show()">Simple</button>
<button @click="show(true)">Resizable</button>
<button @click="show(false, true)">Adaptive</button>
<button @click="show(true, true)">Mixed</button>
<button @click="show(false, false, true)">Draggable (under development)</button>
</div>
<table class="props">
@@ -92,6 +100,7 @@ export default {
return {
resizable: false,
adaptive: false,
draggable: false,
props: {
name: {
@@ -137,10 +146,18 @@ export default {
}
},
methods: {
show(resizable, adaptive) {
show(resizable = false, adaptive = false, draggable = false) {
this.resizable = resizable
this.adaptive = adaptive
this.$modal.show('example-modal')
this.draggable = draggable
/*
$nextTick is required because the data model with new
"resizable, adaptive, draggable" values is not updated yet.. eh
*/
this.$nextTick(() => {
this.$modal.show('example-modal')
})
}
}
}

2
demo/src/main.js
View File

@@ -1,6 +1,6 @@
import Vue from 'vue'
import App from './App.vue'
import VueJsModal from 'vue-js-modal'
import VueJsModal from 'plugin'
Vue.use(VueJsModal)

7
demo/webpack.config.js
View File

@@ -15,13 +15,9 @@ module.exports = {
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
@@ -40,7 +36,8 @@ module.exports = {
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
'vue$': 'vue/dist/vue.esm.js',
'plugin': path.resolve(__dirname, "../dist/index.js")
}
},
devServer: {