mirror of
https://github.com/youzan/vant.git
synced 2025-10-16 16:04:04 +00:00
1.6 KiB
1.6 KiB
<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 基础用法
<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
<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
<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>
:::