46 lines
1.3 KiB
Markdown
46 lines
1.3 KiB
Markdown
# 幻灯片组件文档
|
||
|
||
## 配置说明
|
||
|
||
```json
|
||
{
|
||
sliderList: [{src: '', link: '', title: '', titleStyle: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); titleStyle: 标题样式
|
||
autoSlide: boolean, //true: 自动轮播; false: 停止轮播
|
||
time: int, //轮播间隔时间
|
||
preview: boolean //是否有预览图
|
||
}
|
||
|
||
```
|
||
|
||
|
||
## 用法
|
||
|
||
```html
|
||
<div class="slider" :controller="test">
|
||
<template name="sliders" config="sliderOpts"></template>
|
||
</div>
|
||
<!--
|
||
其中config属性是指定分页组件的配置，会自动从上一层controller里找;
|
||
其他的属性（除$id, config, id, class, tabindex, style, ms-*属性,data-*属性外，也可以用以配置组件，且优先级最高）;
|
||
name属性可以设定组件的$id值，方便各模块之间进行通讯
|
||
-->
|
||
<!-- 引入幻灯片组件 -->
|
||
<script src="//dist.doui.cc/js/yua.js"></script>
|
||
<script>
|
||
require(['//dist.doui.cc/js/lib/sliders/main.js'],function(){
|
||
var vm = yua({
|
||
$id: "test",
|
||
sliderOpts: {
|
||
sliderList: [{src: '', link: '', title: '', titleStyle: ''}],
|
||
autoSlide: false,
|
||
time: 0,
|
||
preview: true
|
||
|
||
}
|
||
})
|
||
|
||
yua.scan()
|
||
})
|
||
</script>
|
||
```
|
JavaScript
95.2%
CSS
4.8%