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.

Sign up for GitHub

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

Jump to bottom

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 commented Mar 12, 2018 •
edited

  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

这种情况，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>

@towry towry mentioned this issue Mar 21, 2018
Closed
@badbye
Copy link

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>

@Raoul1996 Raoul1996 mentioned this issue Nov 14, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@badbye @anchengjian @zhaowenjian