my-date.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <view class="cu-form-group" @click="timechange">
  3. <view class="title"><text class="text-red" v-if="required">*</text>{{label}}</view>
  4. <input
  5. :placeholder="placeholder"
  6. name="input"
  7. v-model="selected"
  8. disabled="true"
  9. ></input>
  10. <w-picker
  11. :visible.sync="visible"
  12. ref="picker"
  13. mode="date"
  14. startYear="2020"
  15. endYear="2100"
  16. :value="value"
  17. :fields="fields"
  18. @confirm="onConfirm($event,'date')"
  19. ></w-picker>
  20. </view>
  21. </template>
  22. <script>
  23. export default {
  24. name: "AppSecelt",
  25. props:{
  26. placeholder:{
  27. type:String,
  28. default:'请选择',
  29. required:false
  30. },
  31. label:{
  32. type:String,
  33. default:'',
  34. required:false
  35. },
  36. fields:{
  37. type:String,
  38. default:'second',
  39. required:false
  40. },
  41. value:{
  42. type:String,
  43. required:false
  44. } ,
  45. required:{
  46. type:Boolean,
  47. default:false,
  48. required:false
  49. }
  50. },
  51. data(){
  52. return {
  53. visible:false,
  54. selected:''
  55. }
  56. },
  57. watch:{
  58. value:{
  59. immediate:true,
  60. handler(val){
  61. if(!val){
  62. this.selected = ''
  63. }else{
  64. this.selected = val;
  65. }
  66. }
  67. }
  68. },
  69. created(){
  70. },
  71. methods:{
  72. timechange(){
  73. this.$refs.picker.show()
  74. },
  75. onConfirm(e){
  76. console.log("confirm",e)
  77. let backString = e.value;
  78. this.selected=e.value;
  79. this.$emit('input',backString);
  80. }
  81. },
  82. model: {
  83. prop: 'value',
  84. event: 'input'
  85. }
  86. }
  87. </script>
  88. <style scoped>
  89. </style>