lc-tag-wall

可自定义样式标签墙组件,可用于搜索热词

效果

使用方法

<template>
<div class="lc-demo">

<scroller>
<title title="lc-tag-wall"></title>
<category title="基本态"></category>
<lc-tag-wall title="基本态"
:list="tagData"
@lcTagWallSelected="onSelect"
@lcTagWallRightBtnClicked="rightClicked" />
<category title="修改右边按钮"></category>
<lc-tag-wall title="修改右边按钮"
:list="tagData"
@lcTagWallSelected="onSelect"
right-text="查看更多"
right-color="#FC5B23"
@lcTagWallRightBtnClicked="rightClicked" />
<category title="自定义样式"></category>
<lc-tag-wall title="自定义样式"
:list="tagData2"
@lcTagWallSelected="onSelect"
:custom-styles="customStyle"
@lcTagWallRightBtnClicked="rightClicked"></lc-tag-wall>
</scroller>

</div>
</template>

<script>
import Light from 'light';
import Title from 'lighting-ui/packages/_mods/title.vue';
import Category from 'lighting-ui/packages/_mods/category.vue';
import LcTagWall from 'lighting-ui/packages/lc-tag-wall';
const modal = Light.requireModule('modal');

export default {
components: { Title, Category, LcTagWall },
data: () => ({
tagData: [{
title: '微信',
color: '#3BC06B'
}, {
title: '摩拜单车',
color: '#FC5B23'
}, {
title: '小睡眠'
}, {
title: '音乐'
}, {
title: '购物'
}, {
title: '时间管理'
}, {
title: '换机助手'
}, {
title: 'Flyme Design'
}, {
title: 'Creator'
}],
tagData2: [{
title: '微信',
backgroundColor: '#3BC06B'
}, {
title: '摩拜单车',
backgroundColor: '#FC5B23'
}, {
title: '小睡眠'
}, {
title: '音乐'
}, {
title: '购物'
}, {
title: '时间管理'
}, {
title: '换机助手'
}, {
title: 'Flyme Design'
}, {
title: 'Creator'
}],
customStyle: {
padding: 42,
borderRadius: 100,
borderWidth: 0,
originBackgroundColor: 'rgba(0, 0, 0, 0.2)',
originTitleColor: '#FFFFFF'
}
}),
methods: {
onSelect (e) {
modal.toast({ message: `选中了 ${e.title},选中的是第 ${e.index} 个` });
},
rightClicked (e) {
modal.toast({ message: '点击了右边按钮' });
}
}
};
</script>
<style scoped>
</style>

可配置参数

Prop Type Required Default Description
list Array Y - 热词标签列表,可动态更新
list[{title}] String N '' 标题
list[{color}] String N '' 标题颜色
list[{backgroundColor}] String N '' 标签背景颜色
list[{borderColor}] String N '' 标签边框颜色
title String N 标题 标题
title-color String N rgba(0, 0, 0, 0.4) 标题颜色
right-text String N 更多 右边按钮文案
right-color String N #198DED 右边按钮颜色
customStyles Object N {} 自定义样式
customStyles{height} Number N 72px 标签高度
customStyles{padding} Number N 30px 标签左右边距
customStyles{borderRadius} Number N 6px 边框半径
customStyles{borderWidth} Number N 2px 边框宽度
customStyles{fontSize} Number N 42px 字体大小
customStyles{originTitleColor} String N rgba(0, 0, 0, 0.6) 默认的字体颜色,会被list item中的color覆盖
customStyles{originBorderColor} String N rgba(0, 0, 0, 0.08) 默认的边框颜色,会被list item中的borderColor覆盖
customStyles{originBackgroundColor} String N #FFFFFF 默认的边框颜色,会被list item中的backgroundColor覆盖
customStyles{itemSpacing} Number N 24px 标签间距
customStyles{lineSpacing} Number N 24px 标签的行间距

Slot

lc-tag-wall 提供了两个插槽供用户自定义标题栏。

  1. : 左边标题插槽
  2. : 右侧按钮插槽

事件回调

  • lcTagWallRightBtnClicked 右边按钮被点击时触发
  • lcTagWallSelected 标签被点击时触发

    参数:

    {
    title: 被点击的标签名称,
    index: 被点击的 index
    }

    示例:

    <lc-tag-wall  @lcTagWallRightBtnClicked="rightClicked"></lc-tag-wall>