小编And*_*hiu的帖子
如何使用CSS垂直集中Bootstrap V4模式？
如何使用CSS 集中Bootstrap V4模式？
推荐指数
解决办法
查看次数
如何在同一元素上使用“v-if”和“v-for”？
您好，我正在尝试弄清楚如何在也使用 v-for 的迭代元素上使用 v-if 。我需要检查当前元素是否具有一系列类中的任何一个，这些类是数字。
所以每篇文章的类是：
<article class="post-item post-guide 12 22 19 30 55">...
这是呈现所有内容的 HTML：
<article v-if="showIfHasClass" :class="'post-item post-guide ' + guide.categories.toString().replace(/,/g, ' ')"
v-for="(guide, index) in guides" :key="index">
<header>
<h1 class="post-title">
{{ guide.title.rendered}}
</h1>
</header>
</article>
我尝试过检查所有元素的类的方法，这是可行的，但我尝试使用带有 v-if 的干净的 Vue 内置解决方案，但没有成功，我无法在成功的方式。
showIfHasClass应该是计算属性吗？我也尝试过……但似乎我一路上错过了一些东西。
我必须检查的数据是一个数组：
data:{
guides: [...]
selectedCategories: [1, 22, 33, 100, 30];
}
或者也许最好直接循环指南并检查它们是否具有 selectedCategory ，然后从指南数据数组中删除该元素？什么更有效？
推荐指数
解决办法
查看次数
工具提示和弹出窗口在 Bootstrap 5 中不起作用
我使用 Bootstrap 5 创建了一个非常小的网站。
\n我使用“工具提示”和“弹出窗口”在页面底部创建了 2 个按钮，但它们不起作用，没有显示任何内容。
\n这是我的网站，位于页面底部：
\n\n这是 HTML 代码：
\n<!doctype html>\n<html lang="fr" class="h-100">\n\n <head>\n <link rel="manifest" href="/manifest.json">\n <link rel="canonical" href="https://www.mathieulebert.fr/">\n <link href="bootstrap.min.css" rel="stylesheet">\n <link href="style.css" rel="stylesheet">\n </head>\n\n <body class="position-relative d-flex flex-column bg-dark text-white text-center" data-bs-spy="scroll" data-target="#navbar" data-bs-offset="85" tabindex="0"> \n\n<button type="button" class="btn btn-secondary m-5" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">\n Tooltip on top\n</button>\n\n<button type="button" class="btn btn-secondary m-5" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Copi\xc3\xa9">\n Popover on bottom\n</button>\n\n <script src="bootstrap.bundle.min.js"></script>\n <script src="clipboard.min.js"></script>\n <script src="pwa.js"></script>\n <script src="feed.js"></script>\n\n <script>\n var …推荐指数
解决办法
查看次数
如何在SASS/SCSS中创建硬件背景？
我已经创建了一个有11个硬停止的渐变,创造了11个独立框的幻觉.
就目前而言,有一个宽度的百分比被硬编码成线性渐变.我不禁想到有一种更有效的方式(通过SCSS？)而不是这样编码:
.color-bar {
background: linear-gradient( to left,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 9.09%,
rgba(0, 0, 0, .1) 9.09%,
rgba(0, 0, 0, .1) 18.18%,
rgba(0, 0, 0, .2) 18.18%,
rgba(0, 0, 0, .2) 27.27%,
rgba(0, 0, 0, .3) 27.27%,
rgba(0, 0, 0, .3) 36.36%,
rgba(0, 0, 0, .4) 36.36%,
rgba(0, 0, 0, .4) 45.45%,
rgba(0, 0, 0, .5) 45.45%,
rgba(0, 0, 0, .5) 54.54%,
rgba(0, 0, 0, .6) 54.54%,
rgba(0, 0, 0, .6) 63.63%,
rgba(0, 0, …推荐指数
解决办法
查看次数
如何在 b-table 的 v-slot:cell() 模板中获取项目值 - BootstrapVue
我是一个非常新的编程。我试图弄清楚如何绑定数据以获取链接 :href 使用 store、vuex 和 bootstrap-vue 表工作。我为此花了 4 天时间，现在我快要死了。请帮忙。
book.js（商店，vuex）
books: [
{
id: 1,
name: "name 1",
bookTitle: "book1",
thumbnail: '../../assets/img/book01.jpeg',
url: "https://www.google.com",
regDate: '2019-10'
},
{
id: 2,
name: "name2",
bookTitle: "book2",
thumbnail: "book2",
url: "http://www.yahoo.com",
regDate: '2019-10'
},
书单.vue
books: [
{
id: 1,
name: "name 1",
bookTitle: "book1",
thumbnail: '../../assets/img/book01.jpeg',
url: "https://www.google.com",
regDate: '2019-10'
},
{
id: 2,
name: "name2",
bookTitle: "book2",
thumbnail: "book2",
url: "http://www.yahoo.com",
regDate: '2019-10'
},
<script>
export default {
name: "BookList",
components: …推荐指数
解决办法
查看次数
使用 vue-cli-service build --target lib 时如何复制 /dist 文件夹中的 *.html 文件？
虽然我显然不是 webpack 专家，但我通常会弄清楚/找出我需要修改什么才能实现我所需要的。然而，我在这件事上浪费了一天多的时间，尽管它看起来相当简单：
我想index.html在构建后通过从文件夹中复制它来将其添加到构建中。
我尝试将其添加到configureWebpack, 中vue.config.js：
plugins: [
new CopyPlugin([{
from: 'deploy',
to: '/',
force: true,
copyUnmodified: true
}])
]
（文件夹中唯一的文件deploy是这个index.html）。
我还尝试了各种版本的chainWebpack，大部分是从 github 讨论中挑选的，试图利用诸如html、move-index和 之类的插件copy。然而，我在 github 上找到的大部分内容都破坏了我的构建。
即使是简单的尝试，我只是尝试点击，控制台似乎不起作用：
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
console.log(args);
return args;
});
},
输出：
Building for production as library (commonjs,umd,umd-min)...[]
ERROR TypeError: Cannot read property '__expression' of undefined`
...
at module.exports.toConfig (D:\sgn\www\_g\berwow\BERWoW\Client\RecommenderV2\node_modules\webpack-chain\src\Config.js:129:40)
到目前为止我想到的： …
推荐指数
解决办法
查看次数
是否有<md-menu>指令的isOpen属性？
指令是否有一个isOpen属性（或类似属性）可以监听或绑定到该属性？<md-menu>angular-material
注意：我最初的问题要长得多并且过于复杂，但是@Sarhanis使我意识到我在问错问题。
推荐指数
解决办法
查看次数
JavaScript的执行是否推迟到CSSOM生成之前？
自从我阅读/了解CSSOM以来，这个问题的答案一直很清晰，直到今天。我似乎无法能够找到最初的文章，但它解释很清楚，结合实例，即JavaScript执行被延迟，直到CSSOM从所有内置<style>和<link>标签<head>（除了那些不适用，基于@media查询）。
或者至少那是我当时所做的，直到今天我才有理由怀疑它。
Google的《 Web基础知识/性能》子章节中的粗体字声明似乎支持了这一点：
...浏览器会延迟脚本执行和DOM构建，直到完成CSSOM的下载和构建为止。
但是，在我提供的这个答案下，与另一位SO用户就该主题进行了友好的交谈，这一说法受到了严峻的挑战，他在其中提出了以下论据以证明是相反的：
<head>
<script>document.write("<!--");</script>
<style> body { background-color: red; } </style>
-->
</head>
好的，让我们确定一下。让我们更换<style>同
<link rel="stylesheet" type="text/css" href="test.php" />
...并test.php挂几秒钟：
<link rel="stylesheet" type="text/css" href="test.php" />
如果我是对的（并且js执行推迟到CSSOM构建完成），那么在构建CSSOM之前和执行之前，该页面将悬空10秒钟，<script>这将注释掉<link />并允许页面呈现。
如果他是正确的，则在满足条件时运行js，并且<link />请求永远不会离开，因为到目前为止这是一个注释。
惊喜：
- 页面立即呈现。他是对的！
- 但
<link />请求离开，浏览器标签会显示加载图标10秒钟。我也是对的！还是我 我很困惑，那就是我...
任何人都可以对此有所了解吗？到底是怎么回事？
这和document.write吗？
它与加载.php文件而不是文件有关.css吗？
如果有什么不同，我在Ubuntu的Chrome中进行了测试。
我恳请链接可靠的（重新）资源或提供雄辩的示例/测试来备份您可能考虑提供的所有答案。
推荐指数
解决办法
查看次数
如何将文本从隐藏的文本区域复制到剪贴板？
我有一个这样的隐藏文本区域，并设置了一些值：
<textarea style="display: none;" id="element_html"></textarea>
单击按钮后，我尝试使用以下JS代码将其内容复制到剪贴板：
$('#element_html').select();
document.execCommand('copy');
它仅在文本区域可见时才起作用。如何将隐藏的文本区域内容复制到剪贴板？
推荐指数
解决办法
查看次数
如何应用正确的元素加消息框样式？
这是元素加消息框在我构建的最小页面上的外观：
我期望它看起来像element-plus 文档中的那样。
我将Vue与vite和ElementPlus一起使用。我从 vite 和 element plus 文档复制了设置。我玩了很多其他元素，它们都渲染正确。App.vue可以重现问题的最小组件：
<template>
<el-button text @click="open">Click to open the Message Box</el-button>
</template>
<script setup>
import { ElMessageBox } from 'element-plus'
const open = () => {
ElMessageBox.alert('This is a message', 'Title', {
confirmButtonText: 'OK'
})
}
</script>
我的vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' …推荐指数
解决办法
查看次数
标签 统计
css ×4
javascript ×4
vue.js ×4
angularjs ×1
bootstrap-4 ×1
bootstrap-5 ×1
build ×1
cssom ×1
data-binding ×1
element-plus ×1
jquery ×1
performance ×1
popover ×1
sass ×1
tooltip ×1
v-slot ×1
vite ×1
vue-cli ×1
vue-cli-4 ×1
webpack ×1