javascript 相关问题

我有一个带有以下代码的 Button 组件：从“vue”导入{计算，参考}； const props = withDefaults(defineProps<{ href?: string; type: '</desc> <question vote="0"> <p>我有一个 <pre><code>Button</code></pre> 组件，代码如下：</p> <pre><code><script lang="ts" setup> import { computed, ref } from 'vue'; const props = withDefaults(defineProps<{ href?: string; type: 'button' | 'submit' | 'reset' | undefined; color: string; disabled: boolean; }>(), { type: 'button', color: 'primary', disabled: false, }); const element = ref<HTMLElement | null>(null); defineExpose({ focus: () => { if (element.value) { element.value.focus(); } }, }); const style = 'inline-flex justify-center rounded-sm shadow-sm px-3 py-2 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus:outline focus:outline-2 focus:outline-offset-2'; const colors = new Map([ [ 'primary', 'bg-lime-600 text-white hover:bg-lime-700 focus-visible:outline-lime-700 focus:outline-lime-700', ], [ 'base', 'bg-neutral-600 text-white hover:bg-neutral-700 focus-visible:outline-neutral-700 focus:outline-neutral-700', ], [ 'red', 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-700 focus:outline-red-700', ], [ 'white', 'bg-white text-neutral-900 ring-1 ring-inset ring-neutral-300 hover:bg-neutral-50 focus-visible:outline-neutral-400 focus:outline-neutral-400', ], ]); const disabled = computed(() => props.disabled ? ' opacity-50 cursor-not-allowed' : null ); const styles = computed( () => `${style} ${colors.get(props.color)}${disabled.value}` ); </script> <template> <a v-if="href" ref="element" :class="styles" :href="href"> <slot /> </a> <button v-else ref="element" :class="styles" :type="type"> <slot /> </button> </template> </code></pre> <p>我在另一个组件中使用它：</p> <pre><code><script lang="ts" setup> import Button from '@/components/Button.vue'; import { onMounted, ref } from 'vue'; const emit = defineEmits(['cancel', 'proceed']); const buttonRef = ref<HTMLElement | null>(null); onMounted(() => { if (buttonRef.value) { buttonRef.value.focus(); } }); </script> <template> <div> // ... <div class="mt-6 grid grid-flow-row-dense grid-cols-2 gap-3"> <Button ref="buttonRef" @click="emit('cancel')">Abort</Button> <Button color="red" @click="emit('proceed')"> <slot name="button" /> </Button> </div> </div> </template> </code></pre> <p>当我编译（使用 Vite）生产代码时，出现错误：</p> <blockquote> <p>类型为 '{ ref: string; 的参数onClick：任意； }' 不可分配给类型为 '{ readonly href?: string |不明确的;只读类型：“按钮”| “提交”| “重置” |不明确的;只读颜色：字符串；只读禁用：布尔值； } & VNodeProps & ... 4 个以上 ... & 记录<...>'.</p> </blockquote> <blockquote> <p>输入 '{ ref: string; onClick：任意； }' 类型缺少以下属性 '{ readonly href?: string |不明确的;只读类型：“按钮”| “提交”| “重置”|不明确的;只读颜色：字符串；只读禁用：布尔值； }'：类型、颜色、禁用</p> </blockquote> <blockquote> <p><Button ref="buttonRef" @click="emit('cancel')">中止</p> </blockquote> <p>无法弄清楚如何解决它，因此我们将不胜感激。</p> </question> <answer tick="false" vote="0"> <p>通过声明</p> <pre><code>defineProps<{ href?: string; type: 'button' | 'submit' | 'reset' | undefined; color: string; disabled: boolean; }>() </code></pre> <p>您设置了三个必需的道具（<pre><code>type</code></pre>、<pre><code>color</code></pre>、<pre><code>disabled</code></pre>）。但是，您不要在此处将这些道具设置到 Button 组件：</p> <pre><code> <Button ref="buttonRef" @click="emit('cancel')">Abort</Button> </code></pre> <p><strong>一般来说</strong>，有以下几种方法可以解决这个问题：</p> <ol> <li><p>使道具成为非必需的（通过在其名称后添加 ?，就像您对 <pre><code>href</code></pre> 所做的那样（@Jaromanda X 已经在评论中说过了））</p> </li> <li><p>为您所需的道具提供值：只需设置类型、颜色和禁用即可。</p> </li> <li><p>通过更改编译器选项以忽略这些不一致。（但是，您仍然会收到 vue 的警告，表明您没有提供必需的 prop）。 - 我不会推荐这个。</p> </li> </ol> <p><strong>您的情况：</strong></p> <p><pre><code>color</code></pre>：为此提供一个值或使用默认值（主要？）使其不再需要</p> <p><pre><code>disabled</code></pre>：为此提供一个值或使用默认值使其不再需要（false？）</p> <p><pre><code>type</code></pre>：我发现如果 <pre><code>type</code></pre> 不存在，您可能希望需要 <pre><code>href</code></pre>，但反之亦然则不需要。这是不可能的。 <em>（请注意，我认为您可以为此创建一个强类型接口，但这很复杂，我认为您不需要它。）</em></p> <p>相反，我建议您使用以下道具代替 <pre><code>type</code></pre> 和 <pre><code>href</code></pre>：</p> <p><pre><code>isLink</code></pre>：布尔值</p> <p><pre><code>buttonElementAttrs: { href?: string, type?: 'button' | 'submit' | 'reset' | undefined)</code></pre></p> <p>并像这样渲染你的按钮组件：</p> <pre><code><template> <component :is="isLink ? 'a' : 'button'" ref="element" :class="styles" v-bind="buttonElementAttrs"> <slot /> </component> </template> </code></pre> <p>然后您可以使用此代码来显示您的按钮：</p> <pre><code> <Button ref="buttonRef" @click="emit('cancel')" :isLink="false" :buttonElementAttrs="{ href: 'my/fancy/url' }">Abort</Button> </code></pre> </answer> </body></html>

javascript typescript vue.js vite

回答 0 投票 0

在导航上运行或刷新它的 Java 脚本将不再起作用

首页 htmlf 基本上，如果我在打开主页后点击主页，我会尝试带来效果，它会给导航中点击的文本带来CSS效果这是我的代码请告诉我我应该做什么...

javascript html css vs-web-site-project

回答 1 投票 0

{"message": "notNull 违规：users.firstName 不能为空， notNull 违规：users.lastName 不能为 null} 我面临的错误

当用户注册时，我将用户模型字段允许 null 设置为 true，之后再次登录，用户可以上传他们的个人资料图片，但是当我测试此代码时，我面临错误 {"message&q...

javascript node.js reactjs user-profile

回答 2 投票 0

来自第三方脚本的 Google Analytics

我正在开发一个小部件，可以通过js代码片段添加到主机网站，一旦渲染，就会将iframe添加到主机网站。现在我的客户想给我他们的 GA 跟踪 ID，所以

javascript google-analytics

回答 1 投票 0

如果json内容失败，能够获取response对象的文本内容

json解码失败是否可以获取到response的文本值？我有以下代码：尝试 { var 响应 = 等待 fetch(url, 选项); var data = 等待response.json(); ...

javascript json fetch-api

回答 1 投票 0

按钮 onclick 显示隐藏消息 javascript

该按钮需要在 css 中进行编辑，才能按照我的方式显示，该部分的工作方式。然后它需要显示一条消息：“欢迎来到编码世界！”单击按钮后。我感觉

javascript button onclick buttonclick intro.js

回答 1 投票 0

@panzoom/panzoom 当光标悬停在元素上时不起作用

const pz = document.getElementById('panzoom'); 控制台.log(pz) const panzoom = Panzoom(pz, {canvas: true, maxScale:5}) pz.parentElement.addEventListener('wheel', panzoom.zoomWithWheel) ...

javascript

回答 1 投票 0

Vue Js-如何在用户完成输入后调用 HTTP 请求

我有这个输入框： ...

javascript vue.js

回答 2 投票 0

如何在 JavaScript 中防止双击时选择文本？

我正在使用 JavaScript 中的双击事件侦听器，以在用户双击某些文本元素时触发操作。但是，我还有另一个响应文本的事件监听器

javascript html mouseevent addeventlistener

回答 1 投票 0

d3.js 数据在文件中更改时不会刷新

我有5个csv文件1.csv，2.csv.. 5.csv。我正在做的是我有一个下拉列表。当我从下拉列表中选择特定选项时，将加载并可视化特定文件。数据...