小编cho*_*cki的帖子

我正在使用顺风CSS。卡片中的数据不一致。例如，有些卡的描述很短，而另一些卡的描述很长。有些卡片包含 1-2 个标签，而其他卡片则包含 5-6 个。我想让所有的卡片都具有相同的高度。有什么办法可以做到这一点吗？

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-6">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full sm:w-1/2 md:w-1/2 xl:w-1/4 p-4">
      <div class="block bg-white overflow-hidden border-2">
        <div class="p-4">
          <h2 class="mt-2 mb-2 font-bold text-2xl font-Headingg">
            Card Name
          </h2>
          <div class="mb-4 flex flex-wrap">
            <span class="mr-2">Link 1</span>
            <span>Link 2</span>
          </div>

          <p class="text-md text-justify">Some Description</p>
        </div>
        <div class="p-4 flex flex-wrap items-center">
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #1</p>
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #2</p>
        </div>
      </div>
    </div>
  </div>
</div>

我在最新的 Vue CLI 3 上有一个简单的 Vue 项目（我都是新手）。在 src 我有 100% 质量的 jpg/png 图像。默认情况下，构建时 cli 将创建 dist 目录，其中我的图像添加哈希（image.jpg 到 image.7a97ca45.jpg）但没有任何压缩。

所以我添加了 imagemin-webpack-plugin 和 imagemin-mozjpeg 和 imagemin-pngquant 来优化。它有效。在 dist 现在我有更小的 jgp 和 png。

const ImageminPlugin = require('imagemin-webpack-plugin').default
const ImageminMozjpeg = require('imagemin-mozjpeg')
const ImageminPngquant = require('imagemin-pngquant')

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminPlugin({
        plugins: [
          ImageminMozjpeg({
            quality: 70
          }),
          ImageminPngquant({
            quality: '80-90'
          })
        ]
      })
    ]
  }
}

但现在我还想要从原始 jpg 创建的 .webp 图像。所以我应该得到例如 image.7a97ca45.jpg 和 image.7a97ca45.jpg.webp（或 image.7a97ca45.webp）这样我就可以检测浏览器并提供正确的格式。

但我不明白如何在 vue.config.js 中强制 webpack …

出于某种原因，VueUse破坏了我在Cypress 组件测试中的测试。无论我使用什么可组合，它都会抛出错误 > ref is not defined或> watch is not defined. 我检查了来源并注意到 vueuse在引擎盖下使用vue-demi，所有问题都与从 vue-demi 导入有关。但是我试图单独从 vue-demi 导入一些东西，并且它有效，所以我很困惑为什么它会与 vueuse 崩溃。

我的设置 Vue 3 + Vite。复现：https : //github.com/chojnicki/vitesse Vitesse starter模板已经有Vue3/Vite和VueUse了，所以我刚刚加了Cypress，运行后出现同样的错误yarn cypress run-ct

我厌倦了在 codeandbox 上实现它，但是由于缺少系统库，Cypress 无法在那里工作。

这是一个错误还是我在这里遗漏了什么？

日志：

 at Object.ref (http://localhost:35783/__cypress/src/node_modules/.vite/@vueuse_core.js?v=9e0ceea7:94:17)
    at useMediaQuery (http://localhost:35783/__cypress/src/node_modules/.vite/@vueuse_core.js?v=9e0ceea7:1152:41)
    at usePreferredDark (http://localhost:35783/__cypress/src/node_modules/.vite/@vueuse_core.js?v=9e0ceea7:1379:11)
    at useDark (http://localhost:35783/__cypress/src/node_modules/.vite/@vueuse_core.js?v=9e0ceea7:1383:26)
    at <unknown> (http://localhost:35783/__cypress/src/src/logic/dark.ts:2:24)
From previous event:
    at Object.runScripts (http://localhost:35783/__cypress/runner/cypress_runner.js:159792:22)
    at $Cypress.onSpecWindow (http://localhost:35783/__cypress/runner/cypress_runner.js:149271:19)
    at <unknown> (http://localhost:35783/__cypress/src/@fs//home/chojnicki/vitesse/node_modules/@cypress/vite-dev-server/client/initCypressTests.js:22:18)

所以我正在试验 json 列。Mysql 8.0.17 应该使用多值 JSON 索引，如下所示：

CREATE INDEX data__nbr_idx ON a1( (CAST(data->'$.nbr' AS UNSIGNED ARRAY)) )

我有这样的 JSON 列类别 ["books", "clothes"]。我需要从“书籍”类别中获取所有产品。我可以使用“json_contains”或新的“成员”。

SELECT * FROM products WHERE JSON_CONTAINS(categories, '\"books\"')
SELECT * FROM products WHERE "books" MEMBER OF(categories)

它有效。问题是当然 EXPLAIN 会显示有查询正在进行全表扫描，因此它很慢。

所以我需要一些索引。

我通过将“无符号”类型替换为“char(32)”来更改索引示例，因为我的类别是字符串而不是数字。我在谷歌中找不到任何示例，所以我认为 char() 会很好，但不是。

这是我的索引查询：

CREATE INDEX categories_index ON products((CAST(categories AS CHAR(32) ARRAY)))

也试过

CREATE INDEX categories_index ON products((CAST(categories->'$' AS CHAR(32) ARRAY)))

但选择仍在进行全表扫描。我做错了什么？如何在不使用虚拟列的情况下正确索引 json 列？