当前位置: 首页 > article >正文

vue调用booststrap弹窗

弹窗界面

<div 
                class="modal fade"
                id="sizingLargeModal"
              >
                <div class="modal-dialog modal-lg ">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h1 class="modal-title fs-5">选择类型</h1>
                      <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                      ></button>
                    </div>
                    <!--内容-->
                    <div class="modal-body text-bg-light ">

引入modal

import { Modal } from "bootstrap";

mounted() {
   
      let myModal = new Modal(document.getElementById('sizingLargeModal'));
      this.myModal = myModal;
  },

显示、隐藏

# 显示
this.myModal.show();
# 隐藏
this.myModal.hide();

http://www.kler.cn/news/285198.html

相关文章:

  • 大数据-112 Flink DataStreamAPI 程序输入源 DataSource 基于文件、集合、Kafka连接器
  • Linux随记(十一)
  • android 14及android15 READ_EXTERNAL_STORAGE跟相册,视频权限的适配
  • GraphRAG 文本分割优化
  • 深度学习100问31:如何降低语言模型的困惑度
  • yolov8旋转目标检测部署教程(附代码c++_python)
  • 在Java中,获取输入内容可以通过多种方式实现,以下是三种常用的方式:Scanner、BufferedReader 和 Console 的具体代码示例
  • chromedriver下载地址
  • c# net8调用vc写的dll
  • 机械学习—零基础学习日志(如何理解概率论10)
  • 学习记录:js算法(二十):子数组最大平均数 I、无重复字符的最长子串
  • Linux(文件的查找和解压缩)
  • RelativeLayout相对布局
  • 使用 UniApp 实现摄像头视频流的接入并在页面上显示视频流
  • NC115.栈和排序_C++题解
  • python-word添加标题,段落,文字块
  • Web开发 Ajax 2024/3/31
  • 004、架构_计算节点
  • 科研绘图系列:R语言单细胞差异基因四分图(Quad plot)
  • 加密与安全_前后端通过AES-CBC模式安全传输数据
  • 【Python】运行tcl、perl程序
  • EasyExcel冲突问题,java.lang.NosuchFieldError: Factory
  • 《软件工程导论》(第6版)第4章 形式化说明技术 复习笔记
  • Xcode插件开发
  • 【机器学习】数据预处理-特征工程与特征选择
  • 数字芯片中I/O单元及电源domain布局中SIPI的考虑
  • 浅谈C#委托
  • zdppy+vue3+onlyoffice文档管理系统实战 20240828上课笔记 zdppy_cache框架完成和验证码框架继续优化
  • EmguCV学习笔记 VB.Net 第8章 图像分割
  • org.apache.commons.lang.math.NumberUtils#isNumber 解释