tm-pickers.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <view class="tm-pickers d-inline-block fulled">
  3. <view @click.stop.prevent="openPoup"><slot></slot></view>
  4. <tm-poup @change="toogle" ref="pop" v-model="showpop" :height="750" :bg-color="black_tmeme?'grey-darken-5':bgColor">
  5. <view class="tm-pickers-title pa-32 pb-16">
  6. <view class="text-size-n text-align-center" style="min-height: 48rpx;">{{title}}</view>
  7. <view class="tm-pickers-close rounded flex-center " :class="black_tmeme?'grey-darken-3':'grey-lighten-3'">
  8. <tm-icons @click="close" name="icon-times" size="24" :color="black_tmeme?'white':'grey'"></tm-icons>
  9. </view>
  10. </view>
  11. <tm-pickersView v-if="showpop" @change="$emit('change',$event)" @aniStart="aniisTrue=false" @aniEnd="aniisTrue=true" ref="tmPicKersTest" :defaultValue="dataValue"
  12. :itemHeight="itemHeight" :list="list" :rangKey="rangKey"
  13. :childrenKey="childrenKey" :black="black_tmeme" :disabled="disabled"
  14. :bgColor="bgColor"
  15. ></tm-pickersView>
  16. <view class="pa-32">
  17. <tm-button :black="black_tmeme" @click="confirm" block itemeClass="round-24" :fllowTheme="fllowTheme" :theme="colorBtn_tmeme" fontSize="32">{{btnText}}</tm-button>
  18. </view>
  19. </tm-poup>
  20. </view>
  21. </template>
  22. <script>
  23. /**
  24. * 普通级联拉选择器(弹层式)
  25. * @description 多级关联,单级关联选择
  26. * @property {String} title = [] 弹层层标题
  27. * @property {String} btn-text = [] 底部按钮确认的文字
  28. * @property {String} btn-color = [primary|green|orange|red|blue|bg-gradient-blue-lighten] 默认:bg-gradient-blue-lighten底部按钮确认的背景颜色仅支持主题色名称
  29. * @property {Array} default-value = [] 默认:[],默认赋值项。可选三种赋值方式,名称赋值,对象赋值,数字序列赋值
  30. * @property {String|Number} item-height = [34|42|50|58|62] 项目的高度单位px
  31. * @property {Array} list = [] 选择器的数据,可选格式:Array<string>,Array<object>.如果为object格式需要提供rangKey.如果为多级需要提供children.key值
  32. * @property {String} rang-key = [text|title] 默认:text,如果List格式为对象数组,需要提供此值
  33. * @property {String} children-key = [children] 默认:children,如果List格式为对象数组且为多级联选择,需要提供此值,理论上无限级联数据
  34. * @property {String|Boolean} black = [true|false] 是否开启暗黑模式。
  35. * @property {String|Boolean} disabled = [true|false] 是否禁用
  36. * @property {String} bg-color = [white|blue] 默认:white,白色背景;请填写背景的主题色名称。
  37. * @property {Function} change 列数被选中改变时触发。
  38. * @property {Function} confirm = [] 返回当前选中的数据
  39. *
  40. */
  41. import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
  42. import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue"
  43. import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
  44. import tmPickersView from "@/tm-vuetify/components/tm-pickersView/tm-pickersView.vue"
  45. export default {
  46. components:{tmButton,tmPoup,tmIcons,tmPickersView},
  47. name:"tm-pickers",
  48. model:{
  49. prop:'value',
  50. event:'input'
  51. },
  52. props: {
  53. // 等同v-model,或者value.sync
  54. value: {
  55. type: String | Number,
  56. default: false
  57. },
  58. // 默认选中的项
  59. // 格式有三种分别是[string,string...]
  60. // [数字序列,数字序列....]
  61. // 和list同等对象结构[{},{},...],此格式需要提供rangKey字段否则报错。
  62. defaultValue:{
  63. type:Array,
  64. default:()=>{return []}
  65. },
  66. // 行高。
  67. itemHeight: {
  68. type: String | Number,
  69. default: 40
  70. },
  71. list: {
  72. type: Array,
  73. default: () => {
  74. return []
  75. }
  76. },
  77. // 如果数据是对象,则需要提供key值。
  78. rangKey: {
  79. type: String,
  80. default: "text"
  81. },
  82. // 如果是联级,则需要提供子集key值。
  83. childrenKey: {
  84. type: String,
  85. default: "children"
  86. },
  87. black:{
  88. type:String|Boolean,
  89. default:null
  90. },
  91. // 是否禁用
  92. disabled:{
  93. type:String|Boolean,
  94. default:false
  95. },
  96. // 背景颜色,主题色名称。
  97. bgColor:{
  98. type:String,
  99. default:'white'
  100. },
  101. // 顶部标题。
  102. title:{
  103. type:String,
  104. default:'请选择选项'
  105. },
  106. // 底部按钮文件
  107. btnText:{
  108. type:String,
  109. default:'确认'
  110. },
  111. // 底部按钮背景主题色名称
  112. btnColor:{
  113. type:String,
  114. default:'primary'
  115. },
  116. // 跟随主题色的改变而改变。
  117. fllowTheme:{
  118. type:Boolean|String,
  119. default:true
  120. }
  121. },
  122. data() {
  123. return {
  124. showpop:false,
  125. dataValue:[],
  126. aniisTrue:true,
  127. };
  128. },
  129. computed: {
  130. black_tmeme: function() {
  131. if (this.black !== null) return this.black;
  132. return this.$tm.vx.state().tmVuetify.black;
  133. },
  134. colorBtn_tmeme:function(){
  135. if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
  136. return this.$tm.vx.state().tmVuetify.color;
  137. }
  138. return this.btnColor;
  139. },
  140. },
  141. mounted() {
  142. this.showpop = this.value;
  143. this.$nextTick(function(){
  144. uni.hideKeyboard();
  145. })
  146. },
  147. watch:{
  148. value:function(val){
  149. this.showpop = val;
  150. }
  151. },
  152. methods: {
  153. confirm() {
  154. if(!this.aniisTrue){
  155. console.log('no');
  156. return ;
  157. }
  158. let sdata = this.$refs.tmPicKersTest.getSelectedValue();
  159. let saray = [];
  160. sdata.forEach(item=>{
  161. saray.push(item.data)
  162. })
  163. this.$emit('confirm',sdata)
  164. this.$emit('update:defaultValue',saray)
  165. this.showpop=false;
  166. },
  167. close(){
  168. this.showpop=false;
  169. },
  170. openPoup(){
  171. if(this.disabled==true) return;
  172. this.showpop=true;
  173. },
  174. toogle(e){
  175. console.log(this.showpop);
  176. if(e){
  177. this.$nextTick(function(){
  178. if(this.dataValue != this.defaultValue){
  179. this.dataValue = this.defaultValue;
  180. }
  181. this.$refs.tmPicKersTest.setDefaultValue(this.dataValue)
  182. })
  183. }
  184. this.$emit('input',e);
  185. this.$emit('update:value',e);
  186. }
  187. },
  188. }
  189. </script>
  190. <style lang="scss" scoped>
  191. .tm-pickers-title {
  192. position: relative;
  193. .tm-pickers-close {
  194. position: absolute;
  195. top: 32upx;
  196. right: 32upx;
  197. width: 50upx;
  198. height: 50upx;
  199. }
  200. }
  201. .tm-pickers{
  202. }
  203. </style>