2
0
mirror of https://github.com/tenrok/vue-context.git synced 2026-06-22 05:30:33 +03:00
This commit is contained in:
rawilk
2020-08-30 21:41:51 -05:00
parent 6fb8ed1357
commit 389f0c9d7d
15 changed files with 281 additions and 130 deletions
@@ -36,28 +36,28 @@
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
export default {
components: { VueContext },
data () {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
};
data() {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
]
};
},
methods: {
onClick(text) {
alert(`You clicked on: "${text}"`);
},
methods: {
onClick (text) {
alert(`You clicked on: "${text}"`);
}
}
};
},
};
</script>
+8
View File
@@ -0,0 +1,8 @@
import Vue from 'vue';
import BasicUsage from './basic-usage';
new Vue({
components: {
BasicUsage,
},
}).$mount('#basic-app');
@@ -14,7 +14,7 @@
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul>
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
@@ -23,9 +23,7 @@
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6"
:class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
@@ -46,23 +44,23 @@
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
export default {
components: { VueContext },
data () {
return {
closeOnClick: false,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
};
}
};
data() {
return {
closeOnClick: false,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
],
};
},
};
</script>
@@ -14,7 +14,7 @@
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul>
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
@@ -23,9 +23,7 @@
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6"
:class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
@@ -46,23 +44,23 @@
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
export default {
components: { VueContext },
data () {
return {
closeOnScroll: true,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
};
}
};
data() {
return {
closeOnScroll: true,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
],
};
},
};
</script>
@@ -1,13 +1,16 @@
import Vue from 'vue';
import BasicUsage from './basic-usage';
import CloseOnClick from './close-on-click';
import CloseOnScroll from './close-on-scroll';
// Need a separate vue app for each of these so we can render the markdown properly.
new Vue({
components: {
BasicUsage,
CloseOnClick,
},
}).$mount('#close-on-click-app');
new Vue({
components: {
CloseOnScroll,
},
}).$mount('#app');
}).$mount('#close-on-scroll-app');