Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
zhaowenjian opened this issue Mar 12, 2018 · 2 comments
Closed

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

zhaowenjian opened this issue Mar 12, 2018 · 2 comments

Comments

@zhaowenjian
Copy link

@zhaowenjian zhaowenjian commented Mar 12, 2018

  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>

image
如何才能兼容使用呢?

@anchengjian
Copy link
Member

@anchengjian anchengjian commented Mar 12, 2018

这种情况,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
Copy link

@badbye badbye commented Jan 27, 2019

当一个页面多个 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants