vue 如何兼容使用 小程序原生组件

[zhaowenjian]

1. 使用原生组件时，原生bindchange无法触发，无法获取选择值

    <view class="section">
      <view class="section__title">省市区选择器</view>
      <picker mode="region" bindchange="bindRegionChange" :value="region" :custom-item="customItem">
        <view class="picker">
          当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
        </view>
      </picker>
    </view>
   

2.使用select时，默认显示被修改，无法正常select

    <select v-model="selected">

        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>

如何才能兼容使用呢？

[anchengjian]

这种情况，select 兼容不是很好，请直接使用 picker 组件。

<template>
  <div>
    <picker @change="bindPickerChange" :value="index" :range="array">
      <view class="picker">
        当前选择：{{array[index]}}
      </view>
    </picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      index: 0,
      array: ['A', 'B', 'C']
    }
  },
  methods: {
    bindPickerChange (e) {
      console.log(e)
    }
  }
}

</script>

[badbye]

当一个页面多个 picker 时，只有一个可用。代码如下，只有第二个 date picker 可正常使用

<div>
        <picker
          mode="date"
          name="min_date"
          :value="min_date"
          start="2015-01-01"
          end="2019-01-01"
          bindchange="bindMinDateChange"
          class="date_picker date_picker__min"
        >
        </picker>
        <view class="picker min_date">
          从: <span class="picker_value">{{min_date}}</span>
        </view>
        <picker
          mode="date"
          name="max_date"
          :value="max_date"
          start="2015-01-01"
          end="2019-01-01"
          bindchange="bindMaxDateChange"
          class="date_picker date_picker__max"
        >
        <view class="picker max_date">
          到: <span class="picker_value">{{max_date}}</span>
        </view>
        </picker>
 </div>