在 javascript 或 vuejs 中创建具有动态定位(底部或右侧)的卡片 [英] Creation of card with dynamic positioning (bottom or right) in javascript or vuejs

问题描述

我想向容器中添加一张卡片，然后在创建第一张卡片后，位于右侧和底部的框上有 2 个按钮，一旦用户单击右侧的按钮，它就会在该框上添加一个框右侧，同样，一旦单击底部的按钮，它会在底部创建一个框，我如何在 javascript 或 vuejs 上执行此操作?

I want to add a card to the container, then once the 1st card is created there are 2 buttons on the box located on the right and bottom, once the user clicks the button on the right it will add a box on the right side, same once click the button on the bottom it will create a box at the bottom, how can I do this on javascript or vuejs?

注意:卡片尺寸(宽度和高度)是动态的.

Note: The card dimensions (width and height) are dynamic.

示例 1 和示例 2

https://codesandbox.io/s/reverent-pasteur-wy1iy

推荐答案

我使用了 this.cards 数组作为坐标图，值为 true 表示有一个盒子在给定的位置.在模板中，每个右侧和底部按钮上都有一个 @click 处理程序，用于将另一个框添加到地图中.在 和 元素上，有一个 v-for 循环从 cards 读取坐标 数组.

I used this.cards array as coordinates map, with value true meaning that there is a box on given position. In the template there is a @click handler on each right and bottom button which adds another box into the map. On <v-row> and <v-card> elements there is a v-for loop reading coordinates from cards array.

https://codesandbox.io/s/elegant-dewdney-lezxf

具有一维数组、绝对定位和自动隐藏按钮的替代解决方案:https://codesandbox.io/s/nice-leakey-e1z4s

Alternative solution with 1-dimensional array, absolute positioning and auto-hiding buttons: https://codesandbox.io/s/nice-leakey-e1z4s

(两种变体均基于 OP 的示例.)

(Both variants are based on OP's examples.)

这篇关于在 javascript 或 vuejs 中创建具有动态定位(底部或右侧)的卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！