QS-picker-mixin.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. const Sys = uni.getSystemInfoSync();
  2. const wH = Sys.windowHeight;
  3. const wW = Sys.windowWidth;
  4. export default ({
  5. QSPickerType
  6. } = {}) => {
  7. return {
  8. props: {
  9. height: { //picker高度
  10. type: Number,
  11. default: 0
  12. },
  13. lineHeight: {
  14. type: Number,
  15. default: .08
  16. },
  17. indicator_style: { //picker单行样式
  18. type: String,
  19. default: ''
  20. },
  21. fontScale: { //picker内文字大小
  22. type: Number,
  23. default: .034
  24. },
  25. buttonSet: { //按钮设置
  26. type: Object,
  27. default () {
  28. return {};
  29. }
  30. },
  31. dataSet: { //各类型携带的数据
  32. type: Object,
  33. default () {
  34. return {};
  35. }
  36. },
  37. showReset: { //每次显示是否重置value
  38. type: Boolean,
  39. default: false
  40. },
  41. title: { //title标题
  42. type: String,
  43. default: ''
  44. },
  45. mode: {
  46. type: String,
  47. default: 'bottom'
  48. },
  49. zIndex: {
  50. type: [Number, String],
  51. default: 9999
  52. },
  53. bgColor_title: {
  54. type: String,
  55. default: '#F8F8F8'
  56. },
  57. autoHide: {
  58. type: Boolean,
  59. default: true
  60. },
  61. titleColor: {
  62. type: String,
  63. default: '#999'
  64. },
  65. contentColor: {
  66. type: String,
  67. default: 'black'
  68. }
  69. },
  70. data() {
  71. const defaultFontScale = this.fontScale || .034;
  72. const countContentSize = wW * Number(defaultFontScale);
  73. const contentSize = countContentSize + 'px';
  74. return {
  75. setObj: {},
  76. value: [],
  77. defaultValue: [],
  78. pickerViewStyle: `font-size: ${contentSize};color: {this.contentColor||'black'};`,
  79. columnHeight: `height: ${wH*(this.lineHeight || .08)}px;`,
  80. columnStyle: `font-size: 16px;`,
  81. wH,
  82. wW,
  83. contentSize,
  84. onceShow: false
  85. };
  86. },
  87. watch: {
  88. dataSet() {
  89. this.init();
  90. deep: true
  91. }
  92. },
  93. methods: {
  94. show() {
  95. this.$refs.QSPickerTem.show();
  96. if (this.showReset) {
  97. const defaultValue = this.defaultValue;
  98. const data = QSPicker.countDays(this.years[defaultValue[0]], defaultValue);
  99. this.days = data.days;
  100. this.value = data.val;
  101. }
  102. if(!this.onceShow) {
  103. this.onceShow = true;
  104. this.init();
  105. }
  106. if(this.$refs.QSPickerTem.checkAsync && typeof this.$refs.QSPickerTem.checkAsync === 'function')
  107. this.$refs.QSPickerTem.checkAsync();
  108. this.$emit('showQSPicker');
  109. },
  110. hide() {
  111. this.$refs.QSPickerTem.hide();
  112. this.$emit('hideQSPicker');
  113. },
  114. voidFc() {}
  115. }
  116. }
  117. }