cv-specs 规格选择 ¶

简要 ¶

规格选择组件，一般用于商品规格选择，默认为实心白色背景。

示例 ¶

vue

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-picker1</view>
      <view class="components-title-d">下拉选项</view>
    </view>
    <cv-form-base ref="refFormBase" style="padding: 0 10px">
      <cv-form-item label="单列选择">
        <cv-picker1 v-model="formData.picker" dataType="text" :dataLists="pickerLists" />
        <template v-slot:tip>这是一个单列下拉选择示例</template>
      </cv-form-item>
      <cv-form-item label="单列选择" requeired>
        <cv-picker1 v-model="formData.picker" dataType="text" :dataLists="pickerLists" />
        <template v-slot:tip>这是一个单列下拉选择示例</template>
      </cv-form-item>
      <!-- 有默认值 -->
      <cv-form-item label="单列选择">
        <cv-picker1 v-model="formData.picker1" :dataLists="pickerLists" />
        <template v-slot:tip>这是一个单列下拉选择示例</template>
      </cv-form-item>
      <cv-form-item label="单列选择" requeired>
        <cv-picker1 v-model="formData.picker1" :dataLists="pickerLists" />
        <template v-slot:tip>这是一个单列下拉选择示例</template>
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        picker: '',
        picker1: ''
      },
      pickerLists: []
    };
  },
  onLoad() {
    console.log(typeof this.pickerLists);
    setTimeout(() => {
      this.$testReqMock().then((res) => {
        this.pickerLists = [
          { value: 0, text: '橘子' },
          { value: 1, text: '柠檬' },
          { value: 2, text: '香蕉' },
          { value: 3, text: '苹果' },
          { value: 4, text: '榴莲' }
        ];
        console.log('模拟请求数据--选项', this.pickerLists);
      });
    }, 1000);
    setTimeout(() => {
      this.$testReqMock().then((res) => {
        this.formData.picker = '橘子';
        this.formData.picker1 = '1';
        console.log('模拟请求数据--选中', this.formData);
      });
    }, 2000);
  },
  methods: {
    bindTimeChange(e) {},
    clickTest(e) {
      console.log(this.formData.picker);
    }
  }
};
</script>

属性 ¶

属性名	类型	默认值	说明
specList	Object	-	规格
skuList	Object	-	sku信息，库存价格等
disabledNumber	Boolean	false	是否禁止数量选择

[ specList ]说明

属性名			类型	默认值	说明
items			Array	-	分组内容
	name		String	-	分组名称
	items		Array	-	规格内容
		name	String	-	规格名称

[ skuList ]说明

属性名		类型	默认值	说明
items		Array	-	分组内容
	stock	Number	-	库存
	sku	Array	-	规格搭配

事件 ¶

事件名	说明	返回值
change	选中内容发生变化时触发	data=change.e

属性名	类型	默认值	说明
number	Number	-	数量（ `disabledNumber=true` 不返回）
selectSpecs	Array	-	当前选中的规格
sku	Object	-	当前匹配到的sku，来自：`skuList`