1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | //npm install --save vue-dummy //<script src="https://unpkg.com/vue-dummy"></script> main.js : import Vue from "vue"; import App from "./App.vue"; import VueDummy from "vue-dummy";Vue.use(VueDummy); Vue.config.productionTip = false;new Vue({ render: h => h(App) }).$mount("#app"); App.vue : <template> <div id="app"> <p v-dummy="150"></p> <img v-dummy="'200x150'"> </div> </template><script> export default { name: "App" }; </script> /* In the code above, we added a p element and bind it to the v-dummy directive. We set the value to 150 so that we get 150 fake words on the page. Next, we added an image that’s 200px wide by 150px high. We can also have a random number of words between a range for the dummy text. To use this feature, we can write: */ <template> <div id="app"> <p v-dummy="'100,130'"></p> </div> </template> <script> export default { name: "App" }; </script> //Then we get a random block of text between 100 to 130 words. It can also be written as a directive argument. For instance, we can write: <template> <div id="app"> <p v-dummy:100,130></p> </div> </template> <script> export default { name: "App" }; </script> <img v-dummy:300x200> <img v-dummy.400x300> <img v-dummy width="250" height="150"> //The code above will create images that’s between 100 to 400px wide and 200 to 400px high. <img v-dummy="'100,400x200,400'"> //The first line creates a text block that’s 100 words long, and the 2nd creates a placeholder image that’s 420px wide by 300px high. <dummy text="100"></dummy> <dummy img="420x300"></dummy> //We can also create a table with fake content as follows: <table v-dummy></table> | cs |
2. Vue.ImagesLoaded
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //npm install vue-images-loaded --save <template> <div id="app"> {{loaded}} <div v-images-loaded:on.progress="imageProgress"> <img src="https://images.unsplash.com/photo-1562953208-602ead7f3d47?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80"> </div> </div> </template> <script> import imagesLoaded from "vue-images-loaded";export default { name: "App", directives: { imagesLoaded }, data() { return { loaded: "" }; }, methods: { imageProgress(instance, image) { this.loaded = image.isLoaded ? "loaded" : "broken"; } } }; </script> | cs |
댓글 없음:
댓글 쓰기