vuejs-transition 相关问题

我的下面的代码有问题，我有命运之轮。但是，我只想旋转一圈。这段代码感谢帮助 // 过程 box.style.setProperty("transition", "轻松 5...

我使用 axios 获取这些数据 { “qtp1459016715-18382027”：{ “姓名”：“qtp1459016715-18382027”， “状态”：“5”， “优先”...

首页 &... <div class="menu-bar"> <ul> <li><a href="/Home/index.html"> <i class="fa fa-house"></i>Home</a> </i></li> < ul > </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; </style> 我想从 fa fa-house 的 cdn 图标中删除 :hover 效果。 <div class="menu-bar"> <ul> <li> <i class="fa fa-home"></i> <a href="/Home/index.html"> Home </a> </li> </ul> </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; } .menu-bar ul li i{ pointer-events: none; } </style> <div class="menu-bar"> <ul> <li><i class="fa fa-house"></i><a href="/Home/index.html"> Home</a> </i></li> <ul > 只需从 <i> 标签中取出 <a> 元素（图标）即可。你可以试试这个：- <div class="menu-bar"> <ul> <li><i class="fa fa-house"><a href="/Home/index.html"> </i>Home</a> </i></li> </ul> </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; } </style>

“Pinia”类型的参数不可分配给“Plugin<[]>”类型的参数

我不知道 VueJS 想要从我这里得到什么。我在项目中使用打字稿。我正在尝试将 Pinia 连接到 VueJS 项目。打字稿发誓。我尝试为该应用程序制作一个插件，但没有成功

Laravel Inertia VueJs 的本地化

我正在尝试在 Laravel Inerita (Vue.js) 上设置本地化。我知道 https://github.com/mcamara/laravel-localization，但这不支持 Inertia（至少我没有成功

Tailwind 和 CSS 动画环偏移缩小

<div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px]" src="/images/Avatar1.png" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div> 如何为任何 css/tailwind 解决方案的偏移环的过渡设置动画？例如，这 2 个缩略图，左边的缩略图悬停在其上，右边的缩略图是初始状态。我希望它在缩略图悬停时有一个缩小的动画，而不是我当前的动画，因为它非常突然您可以考虑应用包含 transition-property 的 box-shadow CSS 值，例如 transition 或 transition-all Tailwind 类，以及非 0 transition-duration，上述类名也设置了： <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition" src="https://picsum.photos/90/90" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div> 否则，您可以考虑通过 transition-property: box-shadow Tailwind 类应用 transition-duration: 150ms; 和 transition-[box-shadow]（以及其他属性）以仅转换 box-shadow： <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition-[box-shadow]" src="https://picsum.photos/90/90" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div>

onMounted 当没有要关联的活动组件实例时调用

Symfony/VueJS 组件 // 导入从“../hooks/getUser”导入 getUser；从 'vue-router' 导入 { useRoute } // 增值服务常量路由 = useRoute() 常量 { 用户 } = getUser(1) const 路线我...

React 作为 @vue/apollo-composable 的依赖项

我有一个使用 Composition API 的 VueJs 应用程序。我想使用 apollo 向我的 GraphQL 后端进行查询，但收到错误无法解析“react”。我的依赖项是：“@...

更新和访问Vue组件之间的警报消息变量

我正在使用 VueJS 和 Laravel 6.0。我想要实现的是创建全局变量alertStatus和alertMsg，以便每次进行AJAX调用时，全局变量都可以

setTimeout() 无法从 vueJS 方法调用

我试图允许用户从应用程序重置或关闭给定服务器。我现在正在开发界面，并希望向用户提供有关正在发生的事情的消息。我显示一条消息

尝试在同一个项目中拥有 REST API 和前端应用程序

我有一个带有 REST 端点的 Spring Boot 应用程序，还有一个 VueJS 应用程序（以及一些 Vue 路由器逻辑）。问题是，每当我点击 http://localhost:8080/information 时，我...

如何利用v-data-table中的item-class来增加字体大小？

我对 VueJs 比较陌生，并尝试将我的 v-data-table 项目（Vuetify 2）中的字体大小更新为 20px。在这样做的过程中，我遇到了物品等级。这种方法对 chang 来说是成功的...

在 VUEJS 应用程序中滚动到底部不起作用

我正在创建一个聊天机器人应用程序，它从 REST API 流式传输内容，它工作得很好，但滚动到底部没有达到预期的效果，生成了一个滚动条，我必须手动

Vue.js 风格的 v-html 和范围内的 css

如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？简单的例子：组件.vue 如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？简单的例子：组件.vue <template> <div class="icon" v-html="icon"></icon> </template> <script> export default { data () { return {icon: '<svg>...</svg>'} } } </script> <style scoped> .icon svg { fill: red; } </style> 生成html <div data-v-9b8ff292="" class="icon"><svg>...</svg></div> 生成CSS .info svg[data-v-9b8ff292] { fill: red; } 如您所见，v-html 内容没有 data-v 属性，但生成的 css 对于 svg 具有 data-v 属性。我知道这是 vue-loader 的预期行为（https://github.com/vuejs/vue-loader/issues/359）。在本期中提到了后代选择器。但正如你所看到的，我在我的 css 中使用了它，但它不起作用。如何设置 v-html 内容的样式？我正在使用vue-loader 15.9.1。 >>>解决方案对我不起作用（没有效果），而/deep/方法导致构建错误...... 这是有效的： .foo ::v-deep .bar { color: red; } 正如我在这里的回答所述：新版本的vue-loader（从版本12.2.0开始）允许您使用“深层范围”CSS。你需要这样使用它： <style scoped>现在支持可以影响子级的“深度”选择器使用 >>> 组合器的组件： .foo >>> .bar { color: red; } 将被编译为： .foo[data-v-xxxxxxx] .bar { color: red; } 更多信息请参见vue-loader的发布页面将 /deep/ 选择器与 SCSS 一起使用对我来说不起作用，但后来我尝试使用 ::v-deep 选择器例如 ::v-deep a { color: red; } 参见这个答案 AS Sarumanatee 说，如果接受的答案不起作用，请尝试： .foo /deep/ .bar { color: red; } 使用:deep {} 根据您的情况，您应该这样做： <template> <div class="icon" v-html="icon"></div> </template> <style scoped> .icon { :deep { svg { fill: red; } } } </style>

VueJS [电子邮件受保护] 组件 v-model 最初不会更新父级

我有一个父子组件设置来测试 v-model。当您输入值时，子级会更新父级，但最初不会。家长：从“vue”导入{ref}；导入文本输入...</desc> <question vote="0"> <p>我有一个父子组件设置来测试 v-model。当您输入值时，子级会更新父级，但最初不会。</p> <p>家长：</p> <pre><code><script setup> import { ref } from 'vue'; import TextInput from './TextInput.vue'; const size = ref(1); const color = ref('red'); </script> <template> <TextInput v-model:size="size" v-model:color.capitalize="color" /> <div :style="{ fontSize: size + 'em', color: color }">  <p>{{ size }} {{ color }}</p> </div> </template> </code></pre> <p>子：TextInput.vue</p> <pre><code><script setup> import { ref } from 'vue'; const size = defineModel('size'); const [color, modifier] = defineModel('color', { set(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; }, //only this forces color to upper case on start in the input get(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; } }); </script> <template> <input v-model="size"> <input v-model="color"> </template> </code></pre> <p>问题2：如果我在defineModel中省略“color”（“color”，{...，我会收到以下错误</p> <p>[Vue warn]：无关的非 props 属性（颜色、colorModifiers）被传递给组件但无法自动继承，因为组件渲染片段或文本根节点。</p> <pre><code>at <TextInput size=1 onUpdate:size=fn color="red" ... > at <ComponentVModel> at <App> </code></pre> <p>如果我只保留</p> <pre><code><input v-model="color"> </code></pre> <p>line，为了让它不是片段，根本不更新。</p> </question> <answer tick="false" vote="0"> <p>问题 1：在调用子元素中的 v-model setter 之前，<pre><code><p></code></pre> 元素中的大写不会发生。 <strong>设置器是同步回父级的设置器</strong>。由于在输入接收到来自用户的一些文本之前不会调用设置器，因此父级中的 <pre><code><p></code></pre> 元素将显示初始值，在您的情况下为“红色”。</p> <p>问题 2：defineModel 根据第一个参数字符串“color”声明一个 prop。该道具旨在匹配父级<strong>上的</strong>v模型的参数，即<pre><code>v-model:color</code></pre>。从defineModel中删除“颜色”意味着父v模型必须从<pre><code>v-model:color</code></pre>更改为<pre><code>v-model</code></pre></p> </answer> </body></html>

vuejs-transition 相关问题

最新问题