uniapp中uview组件库丰富的tab标签

简介: uniapp中uview组件库丰富的tab标签



Tag 标签

tag组件一般用于标记和选择,我们提供了更加丰富的表现形式,能够较全面的涵盖您的使用场景

基本使用

  • 通过type参数设置主题类型,默认为primary
  • 属性text设置标签内容
<u-tag text="标签" plain size="mini" type="warning"></u-tag>

#自定义主题

<u-tag text="标签"></u-tag>
<u-tag text="标签" type="warning"></u-tag>
<u-tag text="标签"type="success"></u-tag>
<u-tag text="标签" type="error"></u-tag>

#圆形标签

  • 类似胶囊形状
<u-tag text="标签" plain shape="circle"></u-tag>
<u-tag text="标签" type="warning" shape="circle"></u-tag>

#镂空标签

<u-tag text="标签" plain > </u-tag>
<u-tag text="标签" type="warning" plain></u-tag>
<u-tag text="标签" type="success" plain></u-tag>
<u-tag text="标签" type="error" plain></u-tag>

#镂空带背景色

  • 添加plainFill属性镂空带背景色
<u-tag text="标签" plain > </u-tag>
<u-tag text="标签" type="warning" plain plainFill></u-tag>
<u-tag text="标签" type="success" plain plainFill></u-tag>
<u-tag text="标签" type="error" plain plainFill></u-tag>

#自定义尺寸

  • size属性为您提供了三种规格的标签大小,默认中等。
<u-tag text="标签" plain size="mini"></u-tag>
<u-tag text="标签" type="warning"></u-tag>
<u-tag text="标签" type="success" plain size="large"></u-tag>

#可关闭标签

  • tag在右上角提供了删除标签的样式
<u-tag text="标签" size="mini" closable :show="close1" @close="close1 = false"></u-tag>
<u-tag text="标签" type="warning" closable :show="close2" @close="close2 = false"></u-tag>
<u-tag text="标签" type="success" plain size="large" 
closable :show="close3" @close="close3 = false"></u-tag>
<script>
  export default {
    data() {
      return {
        close1: true,
        close2: true,
        close3: true,
        radios: [{
            checked: true
          },
          {
            checked: false
          },
          {
            checked: false
          }
        ],
        checkboxs: [{
            checked: true
          },
          {
            checked: false
          },
          {
            checked: false
          }
        ]
      }
    },
  }
</script>

#带图片和图标

<u-tag text="标签" size="mini" icon="map" plain></u-tag>
<u-tag text="标签" type="warning" icon="tags-fill"></u-tag>
<u-tag text="标签" type="success" plain size="large"
icon="https://cdn.uviewui.com/uview/example/tag.png"></u-tag>

#单选标签 和 多选标签

  • 我们为您提供了单选和多选的事件,您可以在事件中获取参数列表
<template>
<!-- 单选 -->
<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
  <u-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
    @click="radioClick">
  </u-tag>
</view>
<!-- 多选 -->
<view class="u-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
  <u-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
    @click="checkboxClick">
  </u-tag>
</view>
</template>
<script>
  export default {
    data() {
      return {
        radios: [{
            checked: true
          },
          {
            checked: false
          },
          {
            checked: false
          }
        ],
        checkboxs: [{
            checked: true
          },
          {
            checked: false
          },
          {
            checked: false
          }
        ]
      }
    },
    methods: {
      radioClick(name) {
        this.radios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      checkboxClick(name) {
        this.checkboxs[name].checked = !this.checkboxs[name].checked
      }
    }
  }
</script>
<style lang="scss">
  .u-page__tag-item {
    margin-right: 20px;
  }
</style>
相关文章
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
36 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
145 10
|
2月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
124 5
|
2月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
131 2
|
2月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
89 1
|
2月前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
44 0
|
2月前
|
数据可视化 安全 Android开发
低代码可视化-uniapp蓝牙标签打印-代码生成器
低代码可视化-uniapp蓝牙标签打印-代码生成器
81 0
|
2月前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
92 0
|
2月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
51 0
|
2月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
96 0