Vue2的占位符图像和虚拟文本

编辑前端静态页面的时候，偶尔会需要使用假文本数据，或者特定尺寸的占位图片。用这个指令可以轻松实现。

用法

HTML页面:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-dummy"></script>

或者，导入你的模块npm install vue-dummy --save-dev

import Vue from "vue"
import VueDummy from "vue-dummy"

Vue.use(VueDummy)

虚拟文本

<p v-dummy></p>

选择单词的数量:

<p v-dummy="150"></p>

在3和10之间随机选择单词数量:

<p v-dummy="'3,10'"></p> <!-- 注意:将表达式作为字符串传递的引号 -->
<p v-dummy:3,10></p>

作为一个组件:

<dummy></dummy>
<dummy text="30"></dummy>
<dummy t="1,3"></dummy>

虚拟的图像

<img v-dummy="300" />

<img v-dummy="'400x300'" /> <!-- Note: the quotes to pass the expression as a string -->
<img v-dummy:400x300 /><!-- or, as a Vue argument -->
<img v-dummy.400x300 /><!-- or, as a Vue modifier -->

使用宽度和高度属性、大小使用CSS

<img v-dummy width="150" height="150" />

默认为父容器的大小

<img v-dummy />

创建随机大小的图像。用于测试尺寸未知的用户上传图像的尺寸

<img v-dummy="'100,400x200,400'" />  
<img v-dummy:100,400x200,400 />

作为一个组件:

<dummy img></dummy>
<dummy img="400x300"></dummy>
<dummy i="100"></dummy>

特别的元素

在一些标签上使用' v-dummy '将导致一些占位符内容与预期的标记。这在某些情况下很有用，比如元素的快速样式化

<ol v-dummy></ol> 
<ul v-dummy></ul> 
<table v-dummy></table>

例子重复元素

与' v-for '组合以重复元素

  <ul>
    <li v-for="i in 6" v-dummy>#{{i}}: </li>
  </ul>

例子

git.io/vue-dummy-e…

自定指令Vue-Dummy