selector.vue 887 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <view>
  3. <view class="item" @tap="selectorVisible=true">单列选择</view>
  4. <view class="result">选择结果:{{result.result}}</view>
  5. <w-picker
  6. :visible.sync="selectorVisible"
  7. mode="selector"
  8. value="女"
  9. default-type="name"
  10. :default-props="defaultProps"
  11. :options="selectorList"
  12. @confirm="onConfirm($event,'selector')"
  13. @cancel="onCancel"
  14. ref="selector"
  15. ></w-picker>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. selectorVisible:false,
  23. result:{
  24. result:""
  25. },
  26. defaultProps:{
  27. label:"name",
  28. value:"id"
  29. },
  30. selectorList:[
  31. {
  32. name:"男",
  33. id:"1"
  34. },{
  35. name:"女",
  36. id:"2"
  37. }
  38. ]
  39. };
  40. },
  41. methods:{
  42. onConfirm(res,type){
  43. this.result=res;
  44. console.log(res)
  45. },
  46. onCancel(){
  47. }
  48. }
  49. }
  50. </script>
  51. <style lang="scss">
  52. </style>