wxc-label

图片角标

  <view class="wrap">
    <image class="img" src="https://s10.mogucdn.com/mlcdn/c45406/171025_462jgf26k954504k111664ck0ek5j_640x640.jpg"></image>
    <wxc-label class="label" type="corner">抽奖团</wxc-label>
  </view>
  <view class="wrap">
    <image class="img" src="https://s10.mogucdn.com/mlcdn/c45406/171025_83j9gbl58kk4f04e7kjd5l82a6i92_640x640.jpg"></image>
    <wxc-label class="label" type="corner">老带新</wxc-label>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-label': '@minui/wxc-label',
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
  .wrap {
    display: inline-block;
    height: 250rpx;
    line-height: 1;
    margin-right: 20rpx;
    border-radius: 8rpx;
    position: relative;
  }
  .img {
    width: 250rpx;
    height: 250rpx;
  }
  .label {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>

自定义色值

非镂空状态

<template>
  <wxc-label class="label" type="fill">双11价</wxc-label>
  <wxc-label class="label" type="fill">限时折扣</wxc-label>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-label': '@minui/wxc-label',
      'wxc-icon': '@minui/wxc-icon'
    }
  },
  data: {},
  methods: {}
}
</script>

<style>
  .label {
    margin-right: 20rpx;
  }
</style>

属性传值

<template>
  <wxc-label class="label" text="双11价"></wxc-label>
  <wxc-label class="label" text="限时折扣"></wxc-label>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-label': '@minui/wxc-label',
      'wxc-icon': '@minui/wxc-icon'
    }
  },
  data: {},
  methods: {}
}
</script>

<style>
  .label {
    margin-right: 20rpx;
  }
</style>

Label【props】

v1.0.2（2017.11.02）

• update .npmignore

v1.0.1（2017.10.24）