图文组件 | 文档中心

# 图文组件

图文样式,可适配多种情况。

# 基本使用

一个简单的图文示例

<sino-card-img-words-item title="这是一个默认演示" title-align="center" @click="handleCardClick"></sino-card-img-words-item>
<script> 
  // 可省略
	export default {
    methods: {
      handleCardClick(){
        // console.log('Clicked!')
      }
    }
  }
</script>

# 图片区域

src 图片地址
imgHeight 图片高度，单位 rpx
imgRadius 图片圆角, 单位 rpx

# 文字区域

详情请查看props

title 标题

# 卡片布局

layout = column 上下布局。图片在上，文字内容区在下。
layout = column-reverse上下布局。图片在下，文字内容区在上。
layout = row 左右布局。图片在左，文字内容区在右。
layout = row-reverse 左右布局. 图片在右侧，文字内容区在左边。

<sino-icon name="keji"></sino-icon>

# 自定义区域

组件有一个默认插槽，名为tags，传入的内容将会显示在文本区副标题下方，如使用，需要传入自定义内容。

<sino-card-img-words-item title="这是一个演示" subTitle="黄河远上白云间，一片孤城万仞山。"author="王之涣" date="2020-09-04" :imgRadius="10" @click="handleCardClick">
		<template slot="tags">
			<div>
				<u-tag class="mw-tag" text="热门" mode="plain" type="error" size="mini"/> 
				<u-tag class="mw-tag" text="必修" mode="plain" type="error" size="mini"/>
			</div>			
		</template>
</sino-card-img-words-item>
<style>
  .mw-tag {
    margin-right: 10rpx;
  }
</style>

# API

# Props

Name	Description	Type	Required	Default
layout	图文布局方式	`String`	`true`	column
title	主标题	`String`	`false`	标题文字
titleAlign	标题对齐方式	`String`	`false`	left
subTitle	副标题或描述	`String`	`false`	-
src	图片地址	`String`	`false`	-
author	作者｜创作人｜讲师	`String`	`false`	-
viewNum	浏览数量	`String`	`false`	-
zanNum	点赞数量	`String`	`false`	-
talkNum	评论数量	`String`	`false`	-
cangNum	收藏数量	`String`	`false`	-
date	发布日期｜上传日期	`String`	`false`	-
imgWidth	图片宽度	`Number`	`false`	120px
imgHeight	图片高度	`Number`	`false`	120px
imgRadius	图片圆角	`Number`	`false`	0
bgColor	图文卡片背景颜色	`String`	`false`	#ffffff

# Events

事件名	描述	事件参数
click	卡片点击事件	-

# Slots

Name	Description	Default Slot Content
tags	扩展标签备注区域	-

← Image 图片图文组件盒 →