@~lisfan/vue-upyun-image-format

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Global - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="styles/prettify.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#install">install</a></li><li><a href="global.html#image-format">image-format</a></li></ul> </nav> <div id="main"> <h1 class="page-title">Global</h1> <section> <header> <h2> </h2> </header> <article> <div class="container-overview"> <dl class="details"> </dl> </div> <h3 class="subsection-title">Methods</h3> <h4 class="name" id="install"><span class="type-signature"></span>install<span class="signature">(Vue, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="index.js.html">index.js</a>, <a href="index.js.html#line353">line 353</a> </li></ul></dd> <dt class="tag-since">Since:</dt> <dd class="tag-since"><ul class="dummy"><li>2.0.0</li></ul></dd> </dl> <div class="description"> <p>又拍云图片处理工具注册函数<br>处理规则请参考<a href="http://docs.upyun.com/cloud/image/#webp">又拍云文档</a></p> <p>若想针对某个值使用默认值，则传入null值即可</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>Vue</code></td> <td class="type"> <span class="param-type">Vue</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last"><p>Vue类</p></td> </tr> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">object</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>{}</code> </td> <td class="description last"><p>配置选项</p> <h6>Properties</h6> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>debug</code></td> <td class="type"> <span class="param-type">boolean</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>false</code> </td> <td class="description last"><p>是否开启日志调试模式</p></td> </tr> <tr> <td class="name"><code>maxDPR</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>3</code> </td> <td class="description last"><p>(>=4)g网络或者'unknow'未知网络下，DPR取值的最大数</p></td> </tr> <tr> <td class="name"><code>draftRatio</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>2</code> </td> <td class="description last"><p>UI设计稿尺寸与设备物理尺寸的比例</p></td> </tr> <tr> <td class="name"><code>scale</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>'both'</code> </td> <td class="description last"><p>又拍云图片尺寸缩放方式，默认宽度进行自适应，超出尺寸进行裁剪，若自定义尺寸大于原尺寸时，自动缩放至指定尺寸再裁剪</p></td> </tr> <tr> <td class="name"><code>quality</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>90</code> </td> <td class="description last"><p>又拍云jpg格式图片压缩质量</p></td> </tr> <tr> <td class="name"><code>rules</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>''</code> </td> <td class="description last"><p>又拍云图片处理的其他规则</p></td> </tr> <tr> <td class="name"><code>minWidth</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> </td> <td class="description last"><p>默认值是(当前设备的物理分辨率 * 当前实际设备像素比的) 二分之一</p></td> </tr> <tr> <td class="name"><code>networkHandler</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>'unknow'</code> </td> <td class="description last"><p>获取网络制式的处理函数，若不存在，返回unknow</p></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <h4 class="name" id="image-format"><span class="type-signature"></span>image-format<span class="signature">(src, sizeOrConfig<span class="signature-attributes">opt</span>, scale<span class="signature-attributes">opt, nullable</span>, format<span class="signature-attributes">opt, nullable</span>, quality<span class="signature-attributes">opt, nullable</span>, rules<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="index.js.html">index.js</a>, <a href="index.js.html#line373">line 373</a> </li></ul></dd> <dt class="tag-since">Since:</dt> <dd class="tag-since"><ul class="dummy"><li>2.0.0</li></ul></dd> </dl> <div class="description"> <p>vue过滤器：image-format</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>src</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last"><p>图片地址，第一个参数vue组件会自动传入，无须管理</p></td> </tr> <tr> <td class="name"><code>sizeOrConfig</code></td> <td class="type"> <span class="param-type">number</span> | <span class="param-type">string</span> | <span class="param-type">object</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> </td> <td class="description last"><p>裁剪尺寸，取设计稿中的尺寸即可，该值如果是一个字典格式的配置对象，则会其他参数选项的值</p></td> </tr> <tr> <td class="name"><code>scale</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> <optional><br> <nullable><br> </td> <td class="default"> <code>'both'</code> </td> <td class="description last"><p>缩放方式</p></td> </tr> <tr> <td class="name"><code>format</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> <optional><br> <nullable><br> </td> <td class="default"> </td> <td class="description last"><p>图片格式化，系统会根据多种情况来最终确定该值的默认值</p></td> </tr> <tr> <td class="name"><code>quality</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> <nullable><br> </td> <td class="default"> <code>90</code> </td> <td class="description last"><p>若输出jpg格式图片时的压缩质量</p></td> </tr> <tr> <td class="name"><code>rules</code></td> <td class="type"> <span class="param-type">string</span> | <span class="param-type">object</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> <code>''</code> </td> <td class="description last"><p>又拍云图片处理的的其他规则，注意，如果它是一个字符串格式是，那么它必须是采用<code>/[key]/[value]</code>这样的写法，不能随意乱写，同时这里的值不会覆盖前几个参数的值，该项的优先级最低</p></td> </tr> </tbody> </table> </article> </section> </div> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Nov 07 2017 17:34:19 GMT+0800 (CST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme. </footer> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>