bootstrap-vue

前端学习记录

由 二次信任 提交于 2020-07-29 04:59:35
前端开发 HTML标签 HTML文档结构 head <head> <!-- 汉字编码 --> <meta charset="UTF-8"> <!-- 设置一个网站的搜索关键字 --> <meta name="Keywords" content=""/> <!-- 网站描述内容 --> <meta name="Description" content=""/> <!-- 视口设定 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- 标题 --> <title>少年的博客</title> <!-- 加载页面图标 --> <link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon"> <!-- 加载外部css样式 --> <link rel="stylesheet" href="css/base.css"> </head> body <!-- 主体内容 --> <body> <h3>Junior</h3> </body> style <!-- css样式 --> <style></style> script

how do hidden or delete the header field in bootstrap-vue b-table?

由 丶灬走出姿态 提交于 2020-06-29 03:56:14
问题 for some reason, I don't want to show the fields of b-table in my web. In other words, I don't want to show the table head fields. But I never find how to hidden or delete the fields(such as Information field name) in bootstrap-vue. Please help me. And I have another question, why can I get the value of items by cell(information)="row" . here is my test code, you can run it on playground. Thank you in advance for you help. <template> <div> <b-table striped hover :items="items" > <template v

bootstrap-vue.js with laravel Unknown custom element: <b-alert> error

由 六月ゝ 毕业季﹏ 提交于 2020-06-17 15:23:21
问题 Im new to Vuejs and I get the error unknown custom element - how do i register a custom element - b-alert. I think this element is from bootstrapVue. <template> <div> <b-alert show>Default Alert</b-alert> </div> </template> <script> export default { data () { return { dismissSecs: 10, dismissCountDown: 0, showDismissibleAlert: false } }, methods: { countDownChanged (dismissCountDown) { this.dismissCountDown = dismissCountDown }, showAlert () { this.dismissCountDown = this.dismissSecs } }, }

bootstrap-vue change the position of <b-modal>

由 笑着哭i 提交于 2020-06-15 20:09:00
问题 By default <b-modal> shows on top of the page. When attribute centered is added to the tag. It is centered. However, I would like to show the modal with a certain amount of gap under the top of the page. The Modal is shown when the home page is opened. AppModal.vue <template> <b-modal ref="thisModalRef" :modal-class="my-modal" size="lg" hide-header hide-footer no-close-on-backdrop hide-header-close> //... </b-modal> </template> <script> export default { data () { return { mymodal: ['mymodal']

bootstrap-vue change the position of <b-modal>

由 て烟熏妆下的殇ゞ 提交于 2020-06-15 20:07:32
问题 By default <b-modal> shows on top of the page. When attribute centered is added to the tag. It is centered. However, I would like to show the modal with a certain amount of gap under the top of the page. The Modal is shown when the home page is opened. AppModal.vue <template> <b-modal ref="thisModalRef" :modal-class="my-modal" size="lg" hide-header hide-footer no-close-on-backdrop hide-header-close> //... </b-modal> </template> <script> export default { data () { return { mymodal: ['mymodal']

How to increase the width of the tooltip in Bootstrap-Vue

由 烂漫一生 提交于 2020-05-29 08:27:56
问题 Is there a way to increase the width of tooltip in bootstrap vue. I have live a big statement to be shown in the tooltip. and the tooltip is displaying the message as three words in a row. so the height of the tooltip is more and the width is less. <div> <span id="disabled-wrapper" class="d-inline-block" tabindex="0"> <b-button variant="primary" style="pointer-events: none;" disabled>Disabled button</b-button> </span> <b-tooltip target="disabled-wrapper">jasfkjsdfsdafiads uhsdifumasb jhgasd

How to increase the width of the tooltip in Bootstrap-Vue

由 僤鯓⒐⒋嵵緔 提交于 2020-05-29 08:27:47
问题 Is there a way to increase the width of tooltip in bootstrap vue. I have live a big statement to be shown in the tooltip. and the tooltip is displaying the message as three words in a row. so the height of the tooltip is more and the width is less. <div> <span id="disabled-wrapper" class="d-inline-block" tabindex="0"> <b-button variant="primary" style="pointer-events: none;" disabled>Disabled button</b-button> </span> <b-tooltip target="disabled-wrapper">jasfkjsdfsdafiads uhsdifumasb jhgasd

BootstrapVue conditional column in b-table

由 て烟熏妆下的殇ゞ 提交于 2020-05-24 06:09:49
问题 I'd like to only show one of my columns if the current user is an admin. I'm not sure how to do this with bootstrapVue. Any ideas? 回答1: Here's a snippet based on Troy's comment. I've added a custom property to the field object called requiresAdmin . This is not part of standard Bootstrap-Vue . You can use this to filter out all the fields that require's the user to be an admin in a computed property. Based on whether the user is an admin or not. This makes it easy to add and remove fields

bootstrap-vue table td element styling

由 微笑、不失礼 提交于 2020-05-15 05:43:26
问题 I have an issue by giving styles to the <td> tag of b-table element. This is the template: <b-table :fields="fields" :items="items" class="mx-1 mt-2" v-if="items && items.length > 0" > <template slot="email" slot-scope="row" > <div :title="row.item.email"> <p class="user-email">{{row.item.email}}</p> </div> </template> </b-table> And this is the fields: fields: [ { key: "email", label: "Email"}, { key: "user", label: "Name" }, { key: "role", label: "Role" } ], I want to give max-width of

How to access root context from a composition function in Vue Composition API / Vue 3.0 + TypeScript?

由 可紊 提交于 2020-05-13 06:40:06
问题 I want to create a reusable wrapper function written in TypeScript for triggering a toast notification by using a composition function , as defined in the current specification for Vue 3.0: Composition API RFC. This example is using BootstrapVue v2.0 toast component. With Vue 2, it would be invoked via the this.$bvToast Vue component instance injection in the root context : this.$bvToast.toast('Error happened', { title: 'Oh no', variant: 'danger' }); This service-like composition function
订阅 bootstrap-vue