Question

<template>
    <div>
        <!-- desktop-->
        <svg v-if="name === 'desktop'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
            <path
                d="M13 17h-2v2h2v-2zm2 0v2h2a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2h2v-2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5zM4 5v10h16V5H4z"
            />
        </svg>
        <svg v-if="name === 'draggable-handle'" width="11" height="16" viewBox="0 0 11 16" xmlns="http://www.w3.org/2000/svg">
            <circle cx="2.22798" cy="1.45455" r="1.45455" />
            <circle cx="8.77486" cy="1.45455" r="1.45455" />
            <circle cx="2.22798" cy="14.5454" r="1.45455" />
            <circle cx="8.77486" cy="14.5454" r="1.45455" />
            <circle cx="2.22798" cy="8.00044" r="1.45455" />
            <circle cx="8.77486" cy="8.00044" r="1.45455" />
        </svg>

大家好，基本上我有一个名为SIcon.vue的组件，该组件具有一堆svg的硬编码和不同的名称属性，因此我可以使用不同的属性。我目前正在尝试将类字符串传递回我的组件。例如，如果我这样做

<SIcon name="desktop" class="h-10 w-10" />

用于桌面的svg应该使用“ h-10 w-10”类进行呈现。我需要这个，因为我正在使用tailwindcss，而且我必须准确地传回字符串。我尝试了v-bind并添加了一个类props，但是它仍然需要一个属性。任何帮助将不胜感激

Answer 1

在 SIcon.vue 中，您可以先添加一个道具：

props: ['propClass'],

将propClass绑定到svg类：

<svg :class="propClass" ..>

在您的父级组件中：

<SIcon name="desktop" propClass="h-10 w-10" />

那应该直接绑定到SVG

Answer 2

尽管使用<?php $some_records = ["record1.jpg", "record2.jpg", "record3.jpg", "record4.jpg", "record5.jpg"]; $counter = 1; ?> <div class="gallery"> <?php foreach ($some_records as $path) { echo '<a href="' . $path . '"> <img src="' . $path . '"> </a> <div id="contenteditable"> <p id="caption-photo' . $counter . '" contenteditable>' . pathinfo($path, PATHINFO_FILENAME) . '</p> </div>'; $counter++; } ?> </div> <script> document.addEventListener("DOMContentLoaded", function(){ const editables = document.querySelectorAll("[contenteditable]"); editables.forEach(el => { el.addEventListener("blur", () => { localStorage.setItem("dataStorage-" + el.id, el.innerHTML); console.log(el.innerHTML); //When you change the value, it is logged }) }); /* The loop below does not work as expected */ // for (var key in localStorage) { // if (key.includes("dataStorage-")) { // const id = key.replace("dataStorage-", ""); // document.querySelector("#" + id).innerHTML = localStorage.getItem(key); // ---- The above direct way of selecting the element does not work // console.log(localStorage.getItem(key)); // } // } /* 1 is added to editables.length because the counter starts from 1 and not 0 */ for(var i = 1; i < editables.length+1; i++){ console.log("dataStorage-caption-photo" + i + " => " + localStorage.getItem("dataStorage-caption-photo" + i)); //This logs all the values associated with the elements } }); </script>解决@procoib的问题，但解决方案几乎是上例更好的方法。除了使用props，您还可以使用$attrs。 props允许您访问从父级传递给子级的任何类属性，并将这些类附加到子级中的任何节点上。

您的代码可能看起来像这样。

$attrs

vuejs将类传递给组件

2 个答案: