用 Vue.js 编写基于元素的响应式组件

1$ npm install --save vue-responsive-components

 1[label components/Responsive.vue]
 2<template>
 3  <!--
 4    v-responsive takes a set of objects
 5    where the keys are class names and the values are
 6    functions that take an element and return a boolean.
 7    If the functions return true, then the classes will be applied.
 8
 9    In this case, if the component is less than 800 pixels wide,
10    the `small` class will be applied.
11    If the component is less than 400 pixels wide, both the `small`
12    and `tiny` classes will be applied.
13  -->
14  <div class="responsive-component" v-responsive="{
15    tiny: el => el.width < 400,
16    small: el => el.width < 800
17  }">
18  </div>
19</template>
20
21<script>
22import { ResponsiveDirective } from "vue-responsive-components"
23
24export default {
25  directives: {
26    responsive: ResponsiveDirective
27  }
28}
29</script>
30
31<style scoped>
32.responsive-component {
33  height: 200px;
34  background: red;
35}
36
37/* Applied when the component is less than 800px wide. */
38.responsive-component.small {
39  background: green;
40}
41
42/* Applied when the component is less than 400px wide. */
43.responsive-component.tiny {
44  background: blue;
45}
46</style>

 1[label App.vue]
 2<template>
 3  <!--
 4    This gives us convenient resize handles to shrink and resize
 5    the parent of the responsive component.
 6  -->
 7  <div id="app" style="resize: horizontal; overflow: hidden;">
 8    <Responsive></Responsive>
 9  </div>
10</template>
11
12<script>
13import Responsive from './components/Responsive.vue'
14
15export default {
16  components: {
17    Responsive
18  }
19}
20</script>