mirror of
https://github.com/youzan/vant.git
synced 2025-10-17 16:44:21 +00:00
swipe components
This commit is contained in:
@@ -1,21 +1,33 @@
|
||||
<template><section class="demo-icon"><h1 class="demo-title">icon</h1><example-block title="所有Icon">
|
||||
<zan-icon name="album"></zan-icon>
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
<zan-icon name="camera"></zan-icon>
|
||||
<zan-icon name="certificate"></zan-icon>
|
||||
<zan-icon name="qr-invalid"></zan-icon>
|
||||
<zan-icon name="qr"></zan-icon>
|
||||
<zan-icon name="pay-fail"></zan-icon>
|
||||
<zan-icon name="exchange"></zan-icon>
|
||||
<zan-icon name="close"></zan-icon>
|
||||
<zan-icon name="location"></zan-icon>
|
||||
<zan-icon name="upgrade"></zan-icon>
|
||||
<zan-icon name="check"></zan-icon>
|
||||
<zan-icon name="checked"></zan-icon>
|
||||
<zan-icon name="close"></zan-icon>
|
||||
<zan-icon name="like-o"></zan-icon>
|
||||
<zan-icon name="like"></zan-icon>
|
||||
<zan-icon name="chat"></zan-icon>
|
||||
<zan-icon name="paid"></zan-icon>
|
||||
<zan-icon name="delivered"></zan-icon>
|
||||
<zan-icon name="finished"></zan-icon>
|
||||
<zan-icon name="shop"></zan-icon>
|
||||
<zan-icon name="deliver"></zan-icon>
|
||||
<zan-icon name="success"></zan-icon>
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
<zan-icon name="add"></zan-icon>
|
||||
<zan-icon name="not-payed"></zan-icon>
|
||||
<zan-icon name="add2"></zan-icon>
|
||||
<zan-icon name="photo"></zan-icon>
|
||||
<zan-icon name="logistics"></zan-icon>
|
||||
<zan-icon name="edit"></zan-icon>
|
||||
<zan-icon name="passed"></zan-icon>
|
||||
<zan-icon name="cart"></zan-icon>
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
<zan-icon name="gift"></zan-icon>
|
||||
<zan-icon name="home"></zan-icon>
|
||||
<zan-icon name="location"></zan-icon>
|
||||
<zan-icon name="message"></zan-icon>
|
||||
<zan-icon name="send"></zan-icon>
|
||||
<zan-icon name="shopping-cart"></zan-icon>
|
||||
<zan-icon name="sign"></zan-icon>
|
||||
<zan-icon name="store"></zan-icon>
|
||||
<zan-icon name="topay"></zan-icon>
|
||||
<zan-icon name="tosend"></zan-icon>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
|
@@ -8,12 +8,26 @@
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
|
||||
</example-block><example-block title="自动轮播">
|
||||
<zan-swipe :auto-play="true">
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
</zan-swipe-item>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b swipe {
|
||||
.zan-swipe {
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
29
docs/examples-dist/uploader.vue
Normal file
29
docs/examples-dist/uploader.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template><section class="demo-uploader"><h1 class="demo-title">uploader</h1><example-block title="基础用法">
|
||||
<div class="uploader-container">
|
||||
<zan-uploader :before-read="logContent" @file-readed="logContent">
|
||||
</zan-uploader>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="自定义上传图标">
|
||||
<div class="uploader-container">
|
||||
<zan-uploader @file-readed="logContent">
|
||||
<zan-icon name="camera"></zan-icon>
|
||||
</zan-uploader>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.uploader-container {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
Reference in New Issue
Block a user