uni-app 可以输入的商品规格选择器

在 uni-app 中实现一个可以输入的商品规格选择器，你可以利用 uni-ui 库中的组件或者自定义组件来完成。下面是一个基本的示例，展示了如何创建一个可输入的商品规格选择器。

首先，确保你已经安装了 uni-app 并初始化了一个项目。然后，你可以创建一个自定义组件，比如 SpecSelector.vue，来实现规格选择器。

SpecSelector.vue

<template>
  <view class="spec-selector">
    <view v-for="(spec, index) in specs" :key="index" class="spec-item">
      <input v-model="spec.name" placeholder="输入规格名称" />
      <view class="spec-values">
        <input
          v-for="(value, idx) in spec.values"
          :key="idx"
          v-model="value"
          placeholder="输入规格值"
          style="margin-right: 10px;"
        />
        <button @click="addValue(index)">+ 添加值</button>
      </view>
    </view>
    <button @click="addSpec">+ 添加规格</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      specs: [
        {
          name: '',
          values: ['']
        }
      ]
    };
  },
  methods: {
    addSpec() {
      this.specs.push({ name: '', values: [''] });
    },
    addValue(index) {
      this.specs[index].values.push('');
    }
  }
};
</script>

<style>
.spec-selector {
  padding: 10px;
}
.spec-item {
  margin-bottom: 10px;
}
.spec-values {
  display: flex;
  flex-wrap: wrap;
}
</style>

使用 SpecSelector 组件

在你的页面组件中，比如 index.vue，你可以这样使用这个自定义组件：

<template>
  <view>
    <SpecSelector />
  </view>
</template>

<script>
import SpecSelector from '@/components/SpecSelector.vue';

export default {
  components: {
    SpecSelector
  }
};
</script>

说明

1. SpecSelector.vue：这个组件维护了一个 specs 数组，每个规格项包含 name 和 values。
2. 添加规格：点击“+ 添加规格”按钮时，会向 specs 数组中添加一个新的规格项。
3. 添加规格值：在每个规格项中，点击“+ 添加值”按钮时，会向该规格的 values 数组中添加一个新的空字符串。
4. 样式：简单的样式定义，可以根据实际需求调整。

这个示例提供了一个基本的框架，你可以根据实际需求进一步扩展，比如添加删除规格或规格值的按钮、验证输入内容等。