Skip to content

Instantly share code, notes, and snippets.

@Kelin2025

Kelin2025/v-responsive.vue

Last active August 18, 2020 12:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Kelin2025/c8a1ab71b74c677024999fdf2ecfe074 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Kelin2025/c8a1ab71b74c677024999fdf2ecfe074 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Kelin2025 revised this gist Apr 23, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion v-responsive.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <template>
    <!-- Will add/remove .small if the width is less / greater -->
    <div class="post__item" v-responsive="{ small => el.width <= 500 }">
    <div class="post__item" v-responsive="{ small: el => el.width <= 500 }">
    <img class="post__image" :src="post.image" />
    <div class="post__text">{{post.text}}</div>
    </div>
  2. Kelin2025 created this gist Apr 23, 2018.
    18 changes: 18 additions & 0 deletions v-responsive.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <template>
    <!-- Will add/remove .small if the width is less / greater -->
    <div class="post__item" v-responsive="{ small => el.width <= 500 }">
    <img class="post__image" :src="post.image" />
    <div class="post__text">{{post.text}}</div>
    </div>
    </template>

    <script>
    import { ResponsiveDirective } from "vue-responsive-components"
    export default {
    props: ["post"],
    directives: {
    responsive: ResponsiveDirective
    }
    }
    </script>