selector-picker.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <view class="w-picker-view">
  3. <picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
  4. <picker-view-column>
  5. <view class="w-picker-item" v-for="(item,index) in range" :key="index">{{item[nodeKey]}}</view>
  6. </picker-view-column>
  7. </picker-view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. props:{
  13. itemHeight:{
  14. type:String,
  15. default:"44px"
  16. },
  17. options:{
  18. type:[Array,Object],
  19. default(){
  20. return []
  21. }
  22. },
  23. value:{
  24. type:String,
  25. default:""
  26. },
  27. defaultType:{
  28. type:String,
  29. default:"label"
  30. },
  31. defaultProps:{
  32. type:Object,
  33. default(){
  34. return{
  35. label:"label",
  36. value:"value"
  37. }
  38. }
  39. }
  40. },
  41. data() {
  42. return {
  43. pickVal:[]
  44. };
  45. },
  46. computed:{
  47. nodeKey(){
  48. return this.defaultProps.label;
  49. },
  50. nodeValue(){
  51. return this.defaultProps.value;
  52. },
  53. range(){
  54. return this.options
  55. }
  56. },
  57. watch:{
  58. value(val){
  59. if(this.options.length!=0){
  60. this.initData();
  61. }
  62. },
  63. options(val){
  64. this.initData();
  65. }
  66. },
  67. created() {
  68. if(this.options.length!=0){
  69. this.initData();
  70. }
  71. },
  72. methods:{
  73. initData(){
  74. let dVal=this.value||"";
  75. let data=this.range;
  76. let pickVal=[0];
  77. let cur=null;
  78. let label="";
  79. let value,idx;
  80. if(this.defaultType==this.nodeValue){
  81. value=data.find((v)=>v[this.nodeValue]==dVal);
  82. idx=data.findIndex((v)=>v[this.nodeValue]==dVal);
  83. }else{
  84. value=data.find((v)=>v[this.nodeKey]==dVal);
  85. idx=data.findIndex((v)=>v[this.nodeKey]==dVal);
  86. }
  87. pickVal=[idx!=-1?idx:0];
  88. this.$nextTick(()=>{
  89. this.pickVal=pickVal;
  90. });
  91. if(this.defaultType==this.nodeValue){
  92. this.$emit("change",{
  93. result:value?value[this.nodeKey]:data[0][this.nodeKey],
  94. value:dVal||data[0][this.nodeKey],
  95. obj:value?value:data[0]
  96. })
  97. }else{
  98. this.$emit("change",{
  99. result:dVal||data[0][this.nodeKey],
  100. value:value?value[this.nodeValue]:data[0][this.nodeValue],
  101. obj:value?value:data[0]
  102. })
  103. }
  104. },
  105. handlerChange(e){
  106. let arr=[...e.detail.value];
  107. let pickVal=[arr[0]||0];
  108. let data=this.range;
  109. let cur=data[arr[0]];
  110. let label="";
  111. let value="";
  112. this.$nextTick(()=>{
  113. this.pickVal=pickVal;
  114. });
  115. this.$emit("change",{
  116. result:cur[this.nodeKey],
  117. value:cur[this.nodeValue],
  118. obj:cur
  119. })
  120. }
  121. }
  122. }
  123. </script>
  124. <style lang="scss">
  125. @import "./w-picker.css";
  126. </style>