主题
LimeTag
- 标签用于标记关键词和概括主要内容,可自定义颜色，关闭等
安装
注意
- 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
- 🔔 不需要lime-svg在lime-icon代码中注释掉即可
html
// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->代码演示
标签主题
通过 type 属性控制标签颜色。
html
<l-tag type="primary">品牌色</l-tag>
<l-tag type="success">成功色</l-tag>
<l-tag type="warning">警告色</l-tag>
<l-tag type="danger">危险色</l-tag>
<l-tag>通用色</l-tag>标签形状
通过 shape 属性控制标签形状。
html
<l-tag shape="square" type="primary">方形</l-tag>
<l-tag shape="round" type="success">圆角</l-tag>
<l-tag shape="mark" type="primary">半圆</l-tag>标签变种
通过variant 属性控制标签图标。
html
<l-tag variant="light">高亮</l-tag>
<l-tag variant="light" type="primary">品牌</l-tag>
<l-tag variant="light" type="success">成功</l-tag>
<l-tag variant="light" type="warning">警告</l-tag>
<l-tag variant="light" type="danger">危险</l-tag>
<l-tag>深色</l-tag>
<l-tag type="primary">品牌</l-tag>
<l-tag type="success">成功</l-tag>
<l-tag type="warning">警告</l-tag>
<l-tag type="danger">危险</l-tag>
<l-tag variant="outline">描边</l-tag>
<l-tag variant="outline" type="primary">品牌</l-tag>
<l-tag variant="outline" type="success">成功</l-tag>
<l-tag variant="outline" type="warning">警告</l-tag>
<l-tag variant="outline" type="danger">危险</l-tag>
<l-tag variant="light-outline">光廓</l-tag>
<l-tag variant="light-outline" type="primary">品牌</l-tag>
<l-tag variant="light-outline" type="success">成功</l-tag>
<l-tag variant="light-outline" type="warning">警告</l-tag>
<l-tag variant="light-outline" type="danger">危险</l-tag>标签图标
通过icon 属性控制标签图标。
html
<l-tag icon="face-retouching" type="primary">标签</l-tag>
<l-tag icon="filter-3" variant="light">标签</l-tag>
<l-tag icon="markup" variant="outline">标签</l-tag>标签尺寸
通过 size 属性控制标签大小。
html
<l-tag size="mini" type="primary">细</l-tag>
<l-tag size="small" type="primary">小</l-tag>
<l-tag size="medium" type="primary">中</l-tag>
<l-tag size="large" type="warning">大</l-tag>
<l-tag size="extra-large" type="primary">加大</l-tag>超长文本省略标签
通过max-width 属性,当内容超过时显示省略号。
html
<l-tag max-width="130px" variant="light">听说超长可以省略听说超长</l-tag>自定义颜色
通过 color 属性设置标签颜色，。
html
<l-tag color="#7232dd" icon="face-retouching">标签</l-tag>
<l-tag color="linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))" icon="filter-3">标签</l-tag>
<l-tag color="#7232dd" icon="markup" variant="outline">标签</l-tag>可关标签
通过 closable 属性设置标签可关闭，通过 @close事件接收关闭事件。
html
<l-tag v-if="show1" @close="show1 = false" :closable="true" icon="face-retouching" type="primary">标签</l-tag>
<l-tag v-if="show2" @close="show2 = false" :closable="true" icon="filter-3" variant="light">标签</l-tag>
<l-tag v-if="show3" @close="show3 = false" :closable="true" icon="markup" variant="outline">标签</l-tag>查看示例
- 导入后直接使用这个标签查看演示效果
html
<!-- // 代码位于 uni_modules/lime-tag/compoents/lime-tag -->
<lime-tag />插件标签
- 默认 l-tag 为 component
- 默认 lime-tag 为 demo
关于vue2的使用方式
- 插件使用了
composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置 - 关键代码是: 在main.js中 在vue2部分加上这一段即可
js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 类型，可选值为 primary success danger warning | string | default |
| variant | 变种，可选值为 solid light outline light-outline | string | solid |
| size | 大小, 可选值为 small large | string | medium |
| shape | 形状, 可选值为 mark round | string | square |
| icon | 标签图标icon | string | - |
| color | 标签颜色 | string | - |
| content | 标签内容 | string | - |
| fontSize | 字体大小 | string | - |
| radius | 圆角 | string | - |
| padding | 内边距 | string | - |
| text-color | 文本颜色，优先级高于 color 属性 | string | white |
| closeable | 是否为可关闭标签 | boolean | false |
Slots
| 名称 | 说明 |
|---|---|
| default | 标签显示内容 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | - |
| close | 关闭标签时触发 | - |
主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，uvue app不支持。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --l-tag-mini-padding | 0 8rpx | - |
| --l-tag-small-padding | 0 11rpx | - |
| --l-tag-medium-padding | 0 15rpx | - |
| --l-tag-large-padding | 0 15rpx | - |
| --l-tag-extra-large-padding | 0 30rpx | - |
| --l-tag-mini-font-size | 18rpx | - | | --l-tag-small-font-size | 20rpx | - | | --l-tag-medium-font-size | 24rpx | - | | --l-tag-large-font-size | 28rpx | - | | --l-tag-extra-large-font-size | 28rpx | - |
| --l-tag-mini-height | 30rpx | - | | --l-tag-small-height | 40rpx | - | | --l-tag-medium-height | 48rpx | - | | --l-tag-large-height | 56rpx | - | | --l-tag-extra-large-height | 80rpx | - |
| --l-tag-text-color | - | - | | --l-tag-square-border-radius | var(--l-border-radius-sm) | - | | --l-tag-round-border-radius | var(--l-border-radius-hg) | - | | --l-tag-mark-border-radius | var(--l-border-radius-hg) | - | | --l-tag-close-icon-color | var(--l-text-color-3) | - |
| --l-tag-round-radius | __ | - | | --l-tag-danger-color | var(--l-danger-color) | - | | --l-tag-primary-color | var(--l-primary-color) | - | | --l-tag-success-color | var(--l-success-color) | - | | --l-tag-warning-color | var(--l-warning-color) | - | | --l-tag-default-color | var(--l-gray-11) | - | | --l-tag-danger-light-color | var(--l-danger-color-1) | - | | --l-tag-primary-light-color | var(--l-primary-color-1) | - | | --l-tag-success-light-color | var(--l-success-color-1) | - | | --l-tag-warning-light-color | var(--l-warning-color-1) | - | | --l-tag-default-light-color | var(--l-gray-1) | - |
打赏
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
