vue-strap 修改Modal组件

在用到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组件就会只有一个按钮选项了。

功能实现！

时间： 2024-10-10 22:18:17

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

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

问题 在使用element-ui时,有时候想要修改组件内的样式,但不成功,例如 <div class="test"> <el-button>按钮</el-button> </div> <style lang="less" scoped> .test{ .el-button span{ background:red; } } </style> 以上对.el-button span的样式不生效 问题

vue中修改第三方组件中的样式

项目在中修改第三方组件样式,但由于 scoped 属性的样式隔离,可能需要去除 scoped 或是另起一个 style .这些做法都会带来副作用(组件样式污染.不够优雅),样式穿透在css预处理器中使用才生效 我们可以使用 >>> 或 /deep/ 解决这一问题 <style scoped> 外层 >>> .el-checkbox { display: block; font-size: 26px; .el-checkbox__label { font-si

vue中修改子组件样式

一.全局修改 1.在App.vue中设置,引入公共样式及个别页面的特殊样式common.css: 例如:<link rel="stylesheet" type="text/css" href="static/assets/css/common.css"> 下边的写法没用过参考链接中给的 <a href="http://home.cnblogs.com/u/134870/" target="_blan

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

部分代码如下: 父组件: <coupon  :modifyFlag.sync="flag" /> data() { return { flag:0 }; 子组件: <div class="receive" @click="changeTest">领取</div> import Vue from "vue"; import { Component, Prop, Emit } from &quo

vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </

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

何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性,可以使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .examp

vue子组件修改父组件传递过来的值

这里不再赘述父子组件及子父组件传值,不懂的同学可以翻看我以前写过的关于两者传值的文章 父子组件传值:https://www.cnblogs.com/Sky-Ice/p/9267192.html 子父组件传值:https://www.cnblogs.com/Sky-Ice/p/9289922.html 直接进入正题,把一个布尔值传递给子组件,然后,在子组件中修改该值,会报错 Avoid mutating a prop directly since the value will be overwri

Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性

先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种方法 父组件调用子组件传值,子组件通过props接收父组件传来的值,并通过emit发送方法名和值,父组件根据传来的方法名定义方法接收值并进行赋值操作. Sync  这个没试过不了解 v-model  子传父: 父组件定义v-model,子组件中当数据更新时,向父组件emit一个input事件,将更新

vue子组件修改父组件值时报错

报错 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "type" 问题 目前有三个组件 A组件引用了B组件 B组件里面有个props B组件引