图文组件盒 | 文档中心

# 图文组件盒

图文样式外包装盒，快速适配标准样式

# 基本使用

num 演示数据量
col 每行显示数量
isWrap 是否主动换行,如果不换行，col参数将失效
gutter 字元素右侧间隔, isWrap:nowrap 时有效

一个简单的演示示例

<sino-card-img-words :num="6" :col="3"></sino-card-img-words>

# 自定义使用示例

左右滑动区域调用

  <template>
    <scroll-view scroll-x="true" >
          <sino-card-img-words :num="6" :col="4" :list="list" isWrap="nowrap" gutter="10"></sino-card-img-words>
    </scroll-view>
  </template>
  <script>
	export default {
    data(){
      list:[
					{
						title: '老师1',
						src: 'https://train-vue-1259109275.cos.ap-beijing.myqcloud.com/static/images/teacher_head/t-xiayu.jpg',
						titleAlign: 'center',
						subTitle: '一级讲师',
						imgRadius: '60',
						imgWidth:'120',
						imgHeight:'120',
						layout: 'column'
					},
					{
						title: '老师2',
						src: 'https://train-vue-1259109275.cos.ap-beijing.myqcloud.com/static/images/teacher_head/t-xiayu.jpg',
						titleAlign: 'center',
						subTitle: '一级讲师',
						imgRadius: '60',
						imgWidth:'120',
						imgHeight:'120',
						layout: 'column'
					},
					{
						title: '老师3',
						src: 'https://train-vue-1259109275.cos.ap-beijing.myqcloud.com/static/images/teacher_head/t-xiayu.jpg',
						titleAlign: 'center',
						subTitle: '一级讲师',
						imgRadius: '60',
						imgWidth:'120',
						imgHeight:'120',
						layout: 'column'
					},
					{
						title: '老师4',
						src: 'https://train-vue-1259109275.cos.ap-beijing.myqcloud.com/static/images/teacher_head/t-xiayu.jpg',
						titleAlign: 'center',
						subTitle: '一级讲师',
						imgRadius: '60',
						imgWidth:'120',
						imgHeight:'120',
						layout: 'column'
					},
					{
						title: '老师5',
						titleAlign: 'center',
						subTitle: '一级讲师',
						imgRadius: '60',
						imgWidth:'120',
						imgHeight:'120',
						layout: 'column'
					}
				]
    }
  }
</script>

# API

# Props

Name	Description	Type	Required	Default
num	演示用默认数量	`Number`	`false`	4
col	每行card 数量	`Number`	`false`	2
isWrap	是否换行	`String`	`false`	wrap
gutter	元素间隔	`String` / `Number`	`false`	0
list	数据列表	`Array`	`false`	[]

# Events

事件名	描述	事件参数
click	卡片点击事件	index: 通过`props`传递的`index`值

← 图文组件 SwiperBanner 轮播图 →