npm i liu-vue-93
import liu-vue-93 from '/liu-vue-93'
import 'liu-vue-93/libliu-vue-93.css'
Vue.use(liu-vue-93)
- 按钮my-button
- 分割线 my-divider
- 轮播图 my-slider
- size:按钮的大小,可选值:'mini', 'samll', 'tiny', 'medium', 'large', 'big', 'huge', 'massive',默认为medium
<my-button size="mini">小按钮</my-button>
<br>
<br>
<my-button>默认按钮</my-button>
<br><br>
<my-button size="massive" >大按钮</my-button>
<my-button icon="cloud">图标按钮</my-button>
<br><br>
<my-button icon="warning circle">警告按钮</my-button>
<my-button size="big" disabled>禁用按钮</my-button>
<my-button loading>加载中...</my-button>
<my-button animated="fade">
<div slot="hidden">shop</div>
<div slot="visible">哈哈哈哈!!</div>
</my-button>
<my-button animated="vertical">
<div slot="hidden">gogogo</div>
<div slot="visible">啦啦啦!</div>
</my-button>
<my-button @click1="sub()">点击我啊</my-button>
methods: {
sub () {
alert('哈哈哈,欢迎您')
}
}
<my-divider></my-divider>
<my-divider>显示的文字</my-divider>
<my-divider icon="user"></my-divider>
- style 设置宽和高
- list: 设置图片数组
- auto: 设置图片是否自动轮播
- currentIndex:当前图标的下标
- click事件:点击图片做什么
<my-slider
style="width:500px;height:280px"
:list='list'
:currentIndex="currentIndex"
:auto='2000'
@click="info"
>
</my-slider>
data () {
return {
// 图片数组
list: [
{ url: require('./imgs/01.jpg'), alt: '111111' },
{ url: require('./imgs/02.jpg'), alt: '222222' },
{ url: require('./imgs/03.jpg'), alt: '333333' },
{ url: require('./imgs/04.jpg'), alt: '444444' },
{ url: require('./imgs/05.jpg'), alt: '555555' }
],
// 当前下标
currentIndex: 2
}
},
methods: {
info (idx) {
console.log(`点击了第${idx + 1}张图片`)
}
}
npm run lint
See Configuration Reference.