wxc-label

wxc-label

MinUI 小程序组件 - 标签

Install

$ min install @minui/wxc-label

Demos

图片角标

<template>
  <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>
  </view>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-label': '@minui/wxc-label',
      'wxc-icon': '@minui/wxc-icon'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
  .wrap {
    display: inline-block;
    width: 250rpx;
    height: 250rpx;
    line-height: 1;
    margin-right: 20rpx;
    border-radius: 8rpx;
    position: relative;
    overflow: hidden;
  }
  .img {
    width: 250rpx;
    height: 250rpx;
  }
  .label {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>

自定义色值

<template>
  <wxc-label class="label" type="fill" type-color="#747bb1">直播中</wxc-label>
  <wxc-label class="label" type="fill" type-color="#ffe8ee" text-color="#ff5577">已团8.7万件</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" 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">双11价</wxc-label>
  <wxc-label class="label">限时折扣</wxc-label>
  <wxc-label class="label">
    <wxc-icon type="pintuan" size="20"></wxc-icon> 拼团秒杀
  </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>

API

Label【props】

名称	描述
`text`	String 文案设置
`type`	String 显示类型。目前支持 fill、plain、corner，对应实心标、镂空标、角标，默认值为 plain。
`type-color`	String 类型配色。默认值 #FF5777
`text-color`	String 文字配色。type="fill" 下生效，默认值 #FFFFFF

Link

	地址
	label 组件文档 https://meili.github.io/min/docs/minui/index.html#label
	label 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-label
	MinUI 组件库 https://github.com/meili/minui