求多个数组的每一项互相拼接(多个产品属性组合)

var models = [['BMW X1','BMW X3','BMW X5','BMW X6'],['RED','BLUE','GREEN'],['低配','中配','高配'],['进口','国产']];
var mLen = models.length;
var index = 0;

var digui = function (arr1,arr2) {
    // console.log("enter digui",arr1,arr2);
    var res = [];
    arr1.forEach(function (m) {
        arr2.forEach(function (n) {
            res.push(m+" - "+n);
        })
    });
    index ++;
    if(index<= mLen-1){
        return digui(res,models[index])
    }else{
        return res;
    }
};
var resultArr = [];
if(mLen >= 2){
    resultArr = digui(models[index],models[++index]);
}else{
    resultArr = models[0];
}
console.log(resultArr);

 

### Vue3 动态标签可拖拽布局并拼接为单一属性 在 Vue3 中,可以通过 Composition API 来实现动态生成多个可拖拽的 `label` 元素,并最终将这些标签的内容拼接成一个单一属性。以下是具体的实现方式: #### 使用 Drag and Drop API 和 Reactive 数据管理 为了支持拖拽功能,可以借助 HTML5 的原生 Drag and Drop API 或者第三方库(如 Sortable.js)。这里我们使用原生 API 进行演示。 ```vue <template> <div class="container"> <h3>可拖拽标签区域</h3> <draggable-area :labels="labels" @update-labels="onLabelsUpdate"></draggable-area> <h3>拼接后的属性</h3> <p>{{ concatenatedAttribute }}</p> </div> </div> </template> <script setup> import { ref, computed } from 'vue'; import DraggableArea from './DraggableArea.vue'; // 定义初始标签列表 const labels = ref(['Label1', 'Label2', 'Label3']); // 计算属性拼接所有标签内容 const concatenatedAttribute = computed(() => { return labels.value.join(' '); }); // 更新标签的方法 function onLabelsUpdate(newLabels) { labels.value = newLabels; } </script> <!-- 子件 --> <script> export default { name: 'DraggableArea', props: ['labels'], emits: ['update-labels'], data() { return { dragIndex: null, }; }, methods: { handleStart(e, index) { this.dragIndex = index; // 记录当前拖动项索引 e.dataTransfer.effectAllowed = 'move'; // 设置允许移动操作 }, handleOver(e) { e.preventDefault(); // 防止默认事件阻止放置 }, handleDrop(e, targetIndex) { const updatedLabels = [...this.labels]; // 创建副本以便修改 const draggedItem = updatedLabels.splice(this.dragIndex, 1)[0]; updatedLabels.splice(targetIndex, 0, draggedItem); // 插入新位置 this.$emit('update-labels', updatedLabels); this.dragIndex = null; // 清除记录 }, }, }; </script> <style scoped> .container { display: flex; flex-direction: column; } .draggable-item { padding: 8px; margin: 4px; background-color: lightblue; cursor: grab; } .drop-zone { min-height: 100px; border: 2px dashed gray; padding: 16px; } </style> ``` --- #### 关键点解析 1. **Reactive 数据绑定** - 利用 Vue3 的 `ref` 和 `computed` 方法创建响应式的标签数计算属性[^1]。 2. **HTML5 原生 Drag and Drop API** - 在子件中实现了拖拽的核心逻辑,包括 `dragstart`, `dragover`, 和 `drop` 三个主要事件处理函数。 3. **父子通信机制** - 父件通过监听自定义事件 (`@update-labels`) 接收来自子件的数据更新通知,并同步到父级的状态中。 4. **样式优化** - 提供了一个简单的 CSS 样式用于展示拖拽区以及各个标签的外观[^2]。 --- #### 注意事项 - 如果项目中有大量标签或者更复杂的交互需,建议引入成熟的拖放库(例如 [SortableJS](https://github.com/SortableJS/Sortable)),它能显著简化开发流程并提升性能。 - 对于移动端的支持可能需要额外考虑手势识别插件或框架扩展。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值