blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

action sheet component

Browse Source
This commit is contained in:
cookfront 2017-03-09 16:01:40 +08:00
parent ecb3f0fd58
commit c96fa4c35b
7 changed files with 295 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
docs/examples-dist/actionsheet.vue Normal file
View File

@ -0,0 +1,72 @@
<template><section class="demo-actionsheet"><h1 class="demo-title">actionsheet</h1><example-block title="基础用法">
<div class="zan-row">
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
</div>
<zan-actionsheet v-model="show1" :actions="actions1">
</zan-actionsheet>
</example-block><example-block title="带取消按钮的ActionSheet">
<div class="zan-row">
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
</div>
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</zan-actionsheet>
</example-block><example-block title="带标题的ActionSheet">
<div class="zan-row">
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
</div>
<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
<p>一些内容</p>
</zan-actionsheet>
</example-block></section></template>
<style>
@component-namespace demo {
@b actionsheet {
.actionsheet-wx {
color: #06BF04;
}
.zan-button {
margin-left: 15px;
}
.title-actionsheet p {
padding: 20px;
}
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
export default {
data() {
return {
show1: false,
show2: false,
show3: false,
actions1: [
{
name: '微信安全支付',
className: 'actionsheet-wx'
},
{
name: '支付宝支付',
loading: true
},
{
name: '有赞E卡',
subname: '（剩余260.50元）'
},
{
name: '信用卡支付'
},
{
name: '其他支付方式'
}
]
};
}
}
</script>

19
docs/examples-dist/popup.vue
View File

@ -3,7 +3,7 @@
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
xxxx
<zan-button @click="handlePopupButtonClick" type="primary">从中间弹出popup</zan-button>
</zan-popup>
<div class="zan-row">
@ -23,8 +23,8 @@
<div class="zan-row">
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
一些内容
<zan-popup v-model="popupShow4" class="zan-popup-4">
从中间弹出popup
</zan-popup>
@ -33,6 +33,13 @@
<style>
@component-namespace demo {
@b popup {
.zan-popup-1 {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 20px;
}
.zan-popup-4 {
width: 60%;
height: 200px;
@ -60,6 +67,12 @@ export default {
}, 2000);
}
}
},
methods: {
handlePopupButtonClick() {
this.popupShow4 = true;
}
}
};
</script>

88
docs/examples-docs/actionsheet.md Normal file
View File

@ -0,0 +1,88 @@
<style>
@component-namespace demo {
@b actionsheet {
.actionsheet-wx {
color: #06BF04;
}
.zan-button {
margin-left: 15px;
}
.title-actionsheet p {
padding: 20px;
}
}
}
</style>
<script>
export default {
data() {
return {
show1: false,
show2: false,
show3: false,
actions1: [
{
name: '微信安全支付',
className: 'actionsheet-wx'
},
{
name: '支付宝支付',
loading: true
},
{
name: '有赞E卡',
subname: '（剩余260.50元）'
},
{
name: '信用卡支付'
},
{
name: '其他支付方式'
}
]
};
}
}
</script>
## ActionSheet
### 基础用法
:::demo 基础用法
```html
<div class="zan-row">
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
</div>
<zan-actionsheet v-model="show1" :actions="actions1">
</zan-actionsheet>
```
:::
### 带取消按钮的ActionSheet
:::demo 带取消按钮的ActionSheet
```html
<div class="zan-row">
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
</div>
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</zan-actionsheet>
```
:::
### 带标题的ActionSheet
:::demo 带标题的ActionSheet
```html
<div class="zan-row">
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
</div>
<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
<p>一些内容</p>
</zan-actionsheet>
```
:::

4
docs/nav.config.json
View File

@ -89,6 +89,10 @@
{
"groupName": "JS组件",
"list": [
{
"path": "/actionsheet",
"title": "ActionSheet"
},
{
"path": "/tab",
"title": "Tab"

42
packages/actionsheet/src/actionsheet.vue
View File

@ -1,28 +1,54 @@
<template>
<transition name="actionsheet-float">
<div class="zan-actionsheet" v-show="currentValue">
<div class="zan-actionsheet-header" v-if="title">
<div class="zan-actionsheet" :class="[ title ? 'zan-actionsheet--withtitle' : '' ]" v-show="currentValue">
<div class="zan-actionsheet__header" v-if="title">
<h3 v-text="title"></h3>
<zan-icon name="close" @click.stop="currentValue = false"></zan-icon>
</div>
<slot>
<ul class="zan-actionsheet-list">
<li v-for="item in actions" class="zan-actionsheet-item" :class="item.className" @click.stop="handleItemClick(item)">{{ item.name }}</li>
<template v-if="!title">
<ul class="zan-actionsheet__list">
<li
v-for="item in actions"
class="zan-actionsheet__item"
:class="[item.className, item.loading ? 'zan-actionsheet__item--loading' : '']"
@click.stop="handleItemClick(item)">
<template v-if="!item.loading">
<span class="zan-actionsheet__name">{{ item.name }}</span>
<span class="zan-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
</template>
<template v-else>
<zan-loading class="zan-actionsheet__loading" type="circle" color="black"></zan-loading>
</template>
</li>
</ul>
<a class="zan-actionsheet-button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
</slot>
<a class="zan-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
</template>
<template v-else>
<div class="zan-actionsheet__content">
<slot></slot>
</div>
</template>
</div>
</transition>
</template>
<script>
import Popup from 'src/mixins/popup';
import ZanLoading from 'packages/loading';
import ZanIcon from 'packages/icon';
export default {
name: 'zan-actionsheet',
mixins: [Popup],
components: {
ZanLoading,
ZanIcon
},
props: {
value: {},
actions: {
type: Array,
default: () => []
@ -40,7 +66,7 @@ export default {
data() {
return {
currentValue: false
currentValue: this.value
};
},

8
packages/icon/src/icon.vue
View File

@ -1,5 +1,5 @@
<template>
<i class="zanui-icon" :class="'zan-icon-' + name"></i>
<i class="zan-icon" :class="'zan-icon-' + name" @click="handleIconClick"></i>
</template>
<script>
@ -8,6 +8,12 @@
props: {
name: String
},
methods: {
handleIconClick(event) {
this.$emit('click', event);
}
}
};
</script>

76
packages/zanui-css/src/actionsheet.css
View File

@ -1,9 +1,81 @@
@import './common/var.css';
@import './mixins/border_retina.css';
@component-namespace zan {
@b actionsheet {
position: fixed;
width: 100%;
top: auto;
bottom: 0;
right: auto;
left: 50%;
transform: translate3d(-50%, 0, 0);
backface-visibility: hidden;
transition: .2s ease-out;
background-color: #e0e0e0;
@m withtitle {
background-color: $c-white;
}
@e item {
line-height: 50px;
text-align: center;
color: $c-black;
font-size: 16px;
position: relative;
background-color: $c-white;
@m loading {
padding: 10px 0;
}
&::after {
@mixin border-retina (top);
}
}
@e subname {
color: $c-gray-darker;
font-size: 12px;
}
@e loading {
margin: 0 auto;
}
@e button {
display: block;
margin-top: 5px;
line-height: 50px;
color: $c-black;
font-size: 16px;
text-align: center;
background-color: $c-white;
}
@e header {
line-height: 44px;
color: $c-black;
text-align: center;
position: relative;
&::after {
@mixin border-retina (top, bottom);
}
.zan-icon-close {
position: absolute;
font-size: 22px;
line-height: 22px;
top: 11px;
right: 15px;
}
}
}
}
.actionsheet-float-bottom-enter,
.actionsheet-float-bottom-leave-active {
.actionsheet-float-enter,
.actionsheet-float-leave-active {
transform: translate3d(-50%, 100%, 0);
}