使用Vant完成底部弹出框 ActionSheet 上拉菜单

向右看齐 2024-04-19 07:48 34阅读 0赞

### 效果图： ###

![20190915133428689.gif][]

### 代码展示：（ActionSheet 上拉菜单） ###

<template>
      
      <div id="action_sheet">
    
        <van-button type="primary" @click="alertMenu">弹出菜单</van-button>
        <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" round @cancel="toCancel" @select="onSelect" />
    
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            msg: '',
            show: false,
            actions: [{
                name: '选项1'
              },
              {
                name: '选项2'
              },
              {
                name: '选项3',
                subname: '描述信息'
              }
            ]
          }
        },
        methods: {
          alertMenu(){
            this.show = true;
          },
          onSelect(item){
              console.log(item);
              this.show = false;
              this.$toast({
                message:item.name,
                duration:500
              })
          },
          toCancel(){
            console.log('点击了取消');
          }
        },
        mounted() {
    
        }
      }
    </script>
    
    <style>
    </style>

# ActionSheet 上拉菜单： #

[更多Api和Options 详见 ActionSheet][Api_Options _ ActionSheet]

[20190915133428689.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a21b97028af54dd19c4bef940b07c14c.gif
[Api_Options _ ActionSheet]: https://youzan.github.io/vant/#/zh-CN/action-sheet

发表评论取消回复

表情：

评论列表（有 0 条评论，34人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Vant完成底部弹出框 ActionSheet 上拉菜单

效果图： ![20190915133428689.gif][] 代码展示：（ActionSheet 上拉菜单） <template> <!...

向右看齐/ 2024年04月19日 07:48/ 0 赞/ 35 阅读

相关使用Vant完成Dialog弹框

效果展示： ![20190915113547321.gif][] 完整代码： <template> <!-- 完成Dialog 弹框 --...

刺骨的言语ヽ痛彻心扉/ 2024年04月19日 07:26/ 0 赞/ 46 阅读

相关 Android底部弹出选择框PickerView的使用

> 希望大家可以留个关注点赞，后续会有更多的技术分享 -------------------- 前言本次主要介绍Android中底部弹出框的使用，使用两个案例来说明

分手后的思念是犯贱/ 2024年04月06日 09:20/ 0 赞/ 34 阅读

相关 uni-app 从底部向上弹出菜单

我在项目需求中需要实现从底部向上弹窗菜单效果功能在uni-app给出原生组件showActionSheet发现设置标题，在uni-app项目中正常显示，但是在微信小程序

港控/mmm°/ 2022年11月13日 15:23/ 0 赞/ 469 阅读

相关 android下拉弹出框

Spinner s = (Spinner) findViewById(R.id.spinner); ArrayAdapter<String> a

Myth丶恋晨/ 2022年08月18日 12:12/ 0 赞/ 191 阅读

相关 jquery 下拉弹出菜单

<!doctype html> <html lang="en"> <head> <meta charset

红太狼/ 2022年07月14日 06:50/ 0 赞/ 197 阅读

相关底部弹出

项目中做了一个底部弹出，记录在此。 ![70][] ![70 1][] css： html, body \{ width: 100%; heig

傷城~/ 2022年05月21日 01:06/ 0 赞/ 230 阅读

相关小程序底部弹出框效果

问题描述：点击使用说明，弹出消息框，显示相关信息（1）wxml页面 <view class='explain' bindtap="show"> <te

淩亂°似流年/ 2022年05月15日 05:21/ 0 赞/ 453 阅读

相关 vue项目，弹出框把底部按钮顶上去

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9

电玩女神/ 2022年04月10日 05:13/ 0 赞/ 397 阅读

相关底部弹出框动画

qq微信小程序学习交流群：581478349 ![20190319101910350.png][]

傷城~/ 2021年09月18日 13:14/ 0 赞/ 428 阅读