小编tob*_*asg的帖子

我遇到了一些奇怪的事情，但我不确定它是否是故意的或是什么原因造成的。

我正在尝试一些 JavaScript，当用户在屏幕上移动鼠标时，它会循环显示一组图像。我mousemove为此使用 jQuery。这是一个小提琴： https: //jsfiddle.net/sy35dzeh/1/

我遇到的行为是鼠标移动的某种限制。我希望移动每个像素来增加pixelCount变量。但是当鼠标移动更长的扫描时，迭代似乎达到了极限。当缓慢移动鼠标时，这会导致计数器增加得更快，因为每次移动会添加更多“像素”。我知道这可能是mousemove工作原理，但最重要的是，打开开发人员工具时它的行为有所不同。

当我在 Chrome 中打开开发者工具并尝试再次移动鼠标时，迭代速度快得多。这是我想要的行为，当鼠标移动较慢时迭代变慢，而鼠标移动较快时迭代变快。

这是差异的视频： https: //streamable.com/okqql3

知道为什么当我打开控制台时情况有所不同吗？知道如何让鼠标移动以我希望的方式影响迭代（就像当我打开开发人员工具时）吗？

我正在尝试使用Vue和Vuetify 关注此视频,v-model以v-date-picker使用date最初设置的数据值将当前日期应用于日期选择器组件new Date().

这是我项目的简化结构:

JS

new Vue({
  el:"#app",
  data: {
    date: new Date(),
    time: new Date()
  }
})

模板

<div id="app">
  <v-date-picker v-model="date"></v-date-picker>
    {{ date }}
  <v-time-picker v-model="time"></v-time-picker>
</div>

这是一个CodePen.不幸的是我无法使用Vuetify CSS来使用CodePen,但是如果你打开控制台,你会发现我v-date-picker在尝试使用new Date()该v-model指令时会遇到错误.日期选择器也不会渲染.该v-time-picker然而,工作正常.

在我的本地设置中,我用vue-cli创建了一个Vue项目.这是我到达那里的错误:

[Vue警告]:创建的钩子出错:"TypeError:dateString.split不是函数"

在发现

---> src/components/Meetup/CreateMeetup.vue在src/App.vue

我正在完成我正在关注的教程,所以我不知道这是否是Vue或Vuetify的最新版本的错误？或者我错过了什么？

我正在尝试创建一个基于 Flex 的容器，其中的项目应在悬停时通过动画展开。所有物品首先应具有相同的宽度，具体取决于容器的总宽度。悬停某个项目时，悬停的项目应恰好是容器总宽度的 50%，其余未悬停的项目会缩小以填充剩余空间。

这似乎是一件很容易做的事情，但我无法真正思考如何实现我想要的结果。

我试过这段代码： https: //codepen.io/tobiasger/pen/xxRWxpV

.flex-container {
  width:100%;
  display:flex;
  height:300px;
}

.flex-item {
  flex:1;
  transition: all 0.4s ease;
}

.flex-item:hover {
  flex-basis:50%;
}

但flex-basis结果并没有达到容器的 50%。我不确定它的百分比基于什么，它似乎比实际容器宽度更接近窗口宽度。

我还尝试对min-width悬停项目应用 50% 的值，但这似乎不可能设置动画。

目标是不必根据容器包含的项目数量为容器创建特定的类。如果能够始终强制悬停项目恰好为容器宽度的 50%，同时让其余项目均匀填充剩余的 50%，并且还为该宽度变化设置动画，我会非常高兴！

我\xe2\x80\x99m 尝试将此代码添加到我的 WooCommerce 设置中，该设置在我放置 PHP 的任何位置添加一个购物车链接，然后在使用 AJAX 更改购物车中的项目时更新它：https: //docs.woocommerce.com/文档/显示购物车内容总计/

以下是片段：

HTML - PHP：

<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( \'View your shopping cart\' ); ?>"><?php echo sprintf ( _n( \'%d item\', \'%d items\', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a>\n

在functions.php文件中：

function woocommerce_header_add_to_cart_fragment( $fragments ) {\n    global $woocommerce;\n\n    ob_start();\n\n    ?>\n    <a class="cart-customlocation" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php _e(\'View your shopping cart\', \'woothemes\'); ?>"><?php echo sprintf(_n(\'%d item\', \'%d items\', …

我正在尝试使用 Vue 中的数据被动地设置包装器 div 的高度。当加载包装器 div 的所有子项时设置数据，然后设置为所有它们加在一起的总高度。基本上，我希望包装器根据其所有子项的高度组合在 CSS 中具有固定的像素值。

我用来watch在加载数据库内容后设置高度。post下面的代码中是数据库中的数组，其中包含当前组件应从中呈现的帖子的数据。

watch: {
        post(){
            this.$nextTick(() => {
                this.setTotalHeight();
            })
        }
    }

该setTotalHeight()方法如下所示：

setTotalHeight() {
            this.totalHeight = this.$refs.top.offsetHeight + this.$refs.middle.offsetHeight + this.$refs.bottom.offsetHeight
        }

我还触发了setTotalHeight()调整大小的方法。

当这些函数运行时，totalHeight数据值被设置为计算中setTotalHeight()等于的数字。如果我查看开发工具，我可以看到该值，如果我{{totalHeight}}在“DOM”中输出该值，我可以看到它具有正确的值。

但是，当我尝试通过执行 将此值应用于包装器 div 时:style="{height: totalHeight}"，它不会更新。我最初将totalHeight数据值设置为0，这就是将样式设置为从未更改的样式。

我做错了什么，或者为什么当数据本身正在更新并且“DOM”中的输出相应地更新时，样式绑定没有更新{{totalHeight}}？样式绑定不是反应性的还是可能导致这种情况的原因？

我正在filter:grayscale(1)图像上使用。图像的容器也具有伪:after应用，背景颜色设置为mix-blend-mode:screen。除了 Safari iOS 之外，一切似乎都正常。

这是隔离图像的 CSS：

.grid-item img {
    filter:grayscale(1);
    transition:filter 0.25s ease;
}

.grid-item:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:block;
    z-index:1;
    mix-blend-mode: screen;
    transition:opacity 0.25s ease;
    pointer-events:none;
}

.grid-item.is-active:hover img {
    filter:grayscale(0);
}

您可以在这里查看整个网站： http://www.tobiasgerhardsson.com/work/linazedig

这是现场直播的视频： https: //streamable.com/a6lxe

这个错误很难解释，但它似乎是在其他图像之间移动图像，因此某些图像被复制并被相同的图像替换，或者其他图像的片段彼此显示。它在滚动时消失，但有时该错误会再次随机出现。

我尝试删除混合混合模式，因为我认为这是导致错误的原因，但只有当我filter:grayscale(1)从图像中删除混合模式时，错误才会消失。我还使用 JS 插件在桌面上进行Flexbox 砖石网格布局。但我也暂时删除了脚本，但错误仍然存​​在。

总而言之，这似乎是 的问题filter:grayscale，但我不确定它是否是由其他 CSS 属性的组合引起的。有没有人以前经历过这种情况并且知道可能是什么原因造成的？或者这只是一个无法解决的错误？

我为 Shopify 编写了这段代码，该代码创建一个字符串，其中包含产品中明显的所有变体图像 src。然后，它将这个列表与整个product.media对象进行比较，并“过滤掉”与变体图像共享相同 URL 的图像，以便我得到一个仅包含与变体不关联的图像的 URL 的字符串。然后，我可以将这个最终字符串/数组与 for 循环一起使用，该循环仅输出未连接到变体的图像，例如与仅应包含产品的“一般图像”的图库一起使用。

创建它的代码如下所示：

{% comment %}
  Filter out images that is not variant images for gallery use

  variant_image_srcs: String that contains all variant image srcs
  gallery_images: String that created with a for loop and contains images that doesn't match it's src with any of the variant_image_srcs
  gallery_images_array: String that's split and ready to be used with for loop using for example 'image | product_img_url: '1000x' filter

{% endcomment %}
{% …