在用到vue-strap的Modal组件时,会有两个默认按钮,查看官方文档配置如下:

可以看到,ok-text和cancel-text都有一个默认值,在使用时即使不给这两个选项赋值,也会显示两个默认文本的按钮。

在下面的这个例子中,我只需要一个按钮关掉模态框,这时候不能通过组件直接控制了。

查看vue-strap Modal组件的源码,可以发现Modal组件也是vue代码,所以我们可以对它进行改造。

<button v-if="cancelText!=='false' " type="button" class="btn btn-default" @click="close">{{ cancelText }}</button>

通过v-if控制cancelTex按钮是否显示,当我们传入false时,Modal组件就会只有一个按钮选项了。

功能实现!

vue-strap 修改Modal组件的更多相关文章

  1. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  2. vue中修改第三方组件的样式并不造成污染

    vue引用了第三方组件, 需要在组件中局部修改第三方组件的样式, 而又不想去除scoped属性造成组件之间的样式污染. 此时只能通过>>>,穿透scoped. 但是,在sass中存在 ...

  3. vue中修改第三方组件的样式不生效

    问题 在使用element-ui时,有时候想要修改组件内的样式,但不成功,例如 <div class="test"> <el-button>按钮</e ...

  4. vue+ts修改父组件属性的写法。

    部分代码如下: 父组件:   <coupon  :modifyFlag.sync="flag" />    data() {     return {       fl ...

  5. vue.js相关UI组件收集

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...

  6. vue 子组件修改父组件传来的props值,报错

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...

  7. vue scoped 穿透_vue 修改内部组件样式问题

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  8. vue组件中,iview的modal组件爬坑--modal的显示与否应该是使用v-show

    这是我第一次写博客,主要是记录下自己解决问题的过程和知识的总结,如有不对的地方欢迎指出来! 需求:点击btn,弹出modal显示图表(以折现图为例) 这应该是很基本的需求也是很容易实现的,代码和效果如 ...

  9. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

随机推荐

  1. poi导出excel文件(桃)

    1.基本可以通用的工具类 package com.idcsol.apps.common.excel; import java.io.IOException; import java.io.Output ...

  2. PyCharm 快捷键总结

    运行 Shift+alt+F10 执行程序 调试 Shift+alt+F9 Debug调试 Shift + F9 对当前文件进行Debug F8 调试模式下 跳过 F7 调试模式下 进入 F9 快速调 ...

  3. Node.js应用场景及发展趋势

    node主要应用场景是在大前端,阿里的思路是比较合适的,但是必须要注意,绝对不能让node做太多的业务逻辑,他只适合接受人家生成好的数据,然后或渲染后,或直接发送到客户端.如果让node做复杂的业务逻 ...

  4. ASP.NET MVC 实现 AJAX 跨域请求

    ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送 ...

  5. HDU5877Weak Pair

    Weak Pair                                 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 26 ...

  6. 自动内存管理算法 —— 标记和复制法

    最近阅读了<垃圾回收算法手册>这本经典的书籍,借此机会打算写几篇内存管理算法方面的文章,也算是自己的总结吧.                                         ...

  7. python 设计模式之命令模式

    命令模式介绍: 在面向对象编程中,命令模式是概括所有方法信息的设计模式. 此模式对象包涵方法名,及其相关参数值. 命令模式是一个分类的观察者设计模式,在命令模式下,对象被概括为一个命令表单,此表单包涵 ...

  8. 【BZOJ1562】【jzyzOJ1730】【COGS409】NOI2009变换序列 二分图匹配

    [问题描述]        对于N个整数0, 1, ……, N-1,一个变换序列T可以将i变成Ti,其中 定义x和y之间的距离.给定每个i和Ti之间的距离D(i,Ti), 你需要求出一个满足要求的变换 ...

  9. UVA - 1205 Color a Tree

    大意就是给你一颗树,每个点有一个权值w[i],求一个排列使得 所有的父亲都在儿子前面 并且排列的权值最小. 排列的权值在这里定义为 Σ i * w[p[i]]   ,其中p[i] 是排列第i个位置的元 ...

  10. Linux下创建和删除用户

    在Linux下创建用户和删除用户,必须在root用户下,如果你当前不是用根用户登录,你可以打开终端,输入"su root"命令,再输入根口令,就可以进入root用户模式下,如下所示 ...