test/pages/components/image-resize.vue

<template>
  <div>
    <panel title = 'image-resize' :padding-body='0'>
    	<text value='width>height'></text>
    	<div style="flex-direction: row;">
	      <div class="cell">
	        <image class="wh200x100 border margin" :src='imgSrc' quality='original' :placeholder='imgSrc' ></image>
	      </div>
	      <div class="cell">
	        <image class="wh200x100 border margin" :resize="cover" :src='imgSrc' ></image>
	      </div>
	      <div class="cell">
	        <image class="wh200x100 border margin" :resize="contain" :src='imgSrc'></image>
	      </div>
      </div>
      <text value='width=height'></text>
      <div style="flex-direction: row;">
        <div class="cell">
          <image class="wh200x200 border margin" :src='imgSrc'></image>
        </div>
        <div class="cell">
          <image class="wh200x200 border margin" resize="cover" :src='imgSrc' ></image>
        </div>
        <div class="cell">
          <image class="wh200x200 border margin" resize="contain" :src='imgSrc'></image>
        </div>
      </div>
      <text value='width<height'></text>
      <div style="flex-direction: row;">
        <div class="cell">
          <image class="wh200x400 border margin"  :src='imgSrc'></image>
        </div>
        <div class="cell">
          <image class="wh200x400 border margin" resize="cover"  :src='imgSrc' ></image>
        </div>
        <div class="cell">
          <image class="wh200x400 border margin" resize="contain"  :src='imgSrc'></image>
        </div>
      </div>
    </panel>
    <wxc-desc>
      <text class='desc'>
测试点：
  * 

测试方式：
  * 
  * 
      </text>
    </wxc-desc>
  </div>
</template>
<script>
  module.exports = {
    data :function(){
    	return {
	    	imgSrc:"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg",
	    	cover:'stretch',
	    	contain:'stretch',
	    }
    } ,
    components: {
      "wxc-desc":require('../include/wxc-desc.vue'),
      panel: require('../include/panel.vue'),
      button: require('../include/button.vue'),
      h3: require('../include/h3.vue'),
    },
    methods : {
    },
    created:function(){
    	setTimeout(()=>{
    		this.cover='cover';
    		this.contain = 'contain';
    		this.imgSrc='http://gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_200x200.jpg';
    	},0);
    }
  }
</script>

<style scoped>
  .mr-base{
    margin: 10px;
  }
  .wh200x100{width:200;height:100}
  .wh200x200{width:200;height:200}
  .wh200x400{width:200;height:300}
  .cell{flex:1;background-color: #FFFAF0;}
  .border{border-style: solid;border-color: #FF6666;border-width: 2;}
  .margin{margin-left: 5;margin-top: 5;margin-bottom: 5}
  .desc{
    color:#aa0000;
    font-size: 30px;
  }
</style>