主页 / user-1840960

Mathew Paret's questions

Martin Hope
Mathew Paret
Asked: 2025-01-13 04:40:37 +0800 CST
  • 5

我有以下 Vue 组件：

// src/components/CodeBlock.vue
<script setup>
    import { ref } from 'vue';

    const props = defineProps({
        value: String
    })

    const text = ref(null)
    const copied = ref(false)

    const copyText = (data) => {
        navigator.clipboard.writeText(data);
        copied.value = true;
        setTimeout(() => copied.value = false, 1000)
    }
</script>
<template>

<div class="w-full">
    <div class="relative">
        <label for="npm-install-copy-button" class="sr-only">Label</label>
        <code ref="text" class="col-span-6 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" disabled readonly>
            <slot>{{ props.value }}</slot>
        </code>
        <button type="button" @click.prevent="copyText(text.innerText)" data-tooltip-target="tooltip-copy-npm-install-copy-button" class="absolute end-2 bottom-1 translate-y-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-1 mb-1 inline-flex items-center justify-center hover:text-gray-900 dark:hover:text-white">
            <span id="default-icon" v-if="!copied">
                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                    <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
                </svg>
            </span>
            <span id="success-icon" class="inline-flex items-center" v-if="copied">
                <svg class="w-3.5 h-3.5 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                </svg>
            </span>
        </button>
        <div id="tooltip-copy-npm-install-copy-button" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
            <span id="default-tooltip-message">Copy to clipboard</span>
            <span id="success-tooltip-message" class="hidden">Copied!</span>
            <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
    </div>
</div>
</template>

我的 npm 包package.json看起来像这样：

{
    "name": "@pioneer-dynamics/code-block",
    "description": "A simple way to disaply a block of code that has a click to copy option.",
    "version": "1.0.0",
    "author": "Mathew Paret <[email protected]>",
    "license": "MIT",
    "main": "src/components/CodeBlock.vue",
    "dependencies": {
      "vue": "^3.0.0"
    },
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
    ]
  }

当我在没有 npm 模块的情况下使用此组件时（即将 .vue 文件复制到我的使用项目的文件夹 [不在 node_modules 内]，UI 将按预期呈现）。

import CodeBlock from '@/Components/CodeBlock.vue';

直接使用时，不要从 npm 包中获取

当我使用 NPM 模块中的组件时，UI 看起来很糟糕。

import CodeBlock from '@pioneer-dynamics/code-block

从 npm 包中使用时

我该如何修复 UI！？

创建了一个将在多个项目中使用的 vue 组件，将其移动到 NPM 包并尝试将其导入使用项目中。

预期 UI 和功能将以相同的方式运行。

UI 似乎没有按预期工作，但功能却按预期工作。

vuejs3