lcoco/pages/common/tag/dynamic-tag.vue

<template>
  <view class="tag-box">
    <view class="tag-box-list">
      <view class="data-tag" v-for="tag in list" :style="{'background':tagBg}">
        <view class="data-tag-icon">
          <text class="iconfont icon-dingweixiao" v-if="tag.icon==='1'"  :style="{'color':tagColor}"> &#xe87e;</text>
          <text class="iconfont icon-canyuhuati" v-else  :style="{'color':tagColor}"> &#xe61e;</text>
        </view>
        <view class="data-tag-text  sys-weight-400"  :style="{'color':tagColor}">{{tag.text}}</view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  name: "dynamic-tag",
  components: {},
  props: {
    list:{
      type:Array,
      default:[]
    },
    tagColor:{
      type:String,
      default:'#282828'
    },
    tagBg:{
      type:String,
      default:'rgba(255,255,255,0.4)'
    },
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {

  },
  methods: {}
}
</script>

<style scoped lang="scss">
.tag-box{
  .tag-box-list{

    display: flex;
    flex-wrap: wrap;
    .data-tag{
      margin-top: 26rpx;
      margin-right: 20rpx;
      border-radius: 200rpx;
      background: rgba(255,255,255,0.4);
      display: flex;
      justify-content: center;
      padding: 4rpx 12rpx;
      .data-tag-img{
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
      .data-tag-icon{
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
        text-align: center;
        line-height: 32rpx;
        text{
          font-size: 28rpx;
          line-height: 32rpx;
        }
      }
      .data-tag-text{
        font-size: 24rpx;
        height: 32rpx;
        line-height: 32rpx;
      }
    }
  }
}

</style>