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	16px	标签左右边距
customStyles{borderRadius}	Number	N	6px	边框半径
customStyles{borderWidth}	Number	N	2px	边框宽度
customStyles{fontSize}	Number	N	24px	字体大小
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>