0

我正在构建一个链接构建器，让人们从一个链接共享多个链接。目前我有几张“卡片”，用户可以将它们放入他们的链接模板中。例如，这允许他们在 Spotify 上拥有指向其音乐的链接（一张卡），或指向他们的 Youtube 频道的链接（另一张卡）。

我正在使用 VueDraggable 允许用户将他们的卡片拖到他们的模板中。

用户界面截图

我不明白的是，我应该如何将卡片组件存储在商店中以便它们可以拖动？目前在我的商店中，我只是将所有卡片作为对象，因为 VueDraggable 需要将数据放在 2 个不同的列表中。

export const state = () => ({
    chosenCards: [
    ],
    defaultCards: [
        {id: 1, text: 'Twitter',  font: 'Arial',  destination: 'https://twitter.com/home', design: {color: '#1DA1F2', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#1DA1F2', 'font-weight' : 600, font: 'Arial'}},
        {id: 2, text: 'Spotify',  font: 'Arial',  destination: 'https://twitter.com/home', design: {color: '#1db954', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#1db954', 'font-weight' : 600, font: 'Arial'}},
        {id: 3, text: 'Youtube',  font: 'Arial',  destination: 'https://twitter.com/home', design: {color: '#c4302b', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#c4302b', 'font-weight' : 600, font: 'Arial'}},
    ],
})

所以我实际上并没有使用我制作的任何卡片组件。我希望能够将卡片设计为组件，而不仅仅是我商店中的对象，并且仍然可以拖动它们。我该怎么做呢？

4

0 回答 0