├── README.md ├── app.js ├── app.json ├── app.wxss ├── component └── dropdownmenu │ ├── dropdownmenu.js │ ├── dropdownmenu.json │ ├── dropdownmenu.wxml │ └── dropdownmenu.wxss ├── pages ├── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── logs │ ├── logs.js │ ├── logs.json │ ├── logs.wxml │ └── logs.wxss ├── project.config.json ├── sitemap.json ├── source ├── 2293FCAB-7E6A-4144-AA25-8852ACA52E34.png ├── 799BC7E0-F0A3-48D7-B746-18E0181EBC6E.png └── Feb-16-2019 00-49-26.gif └── utils └── util.js /README.md: -------------------------------------------------------------------------------- 1 | # dropDownMenu-wechat 2 | 3 | 4 | #### 微信小程序下拉菜单自定义组件 5 | 6 | * 级联选择器，例如xx区-xx街道 7 | * 下拉列表，例如排序，筛选等 8 | 9 | ![img](https://github.com/ZBK1nger/dropDownMenu-wechat/blob/master/source/Feb-16-2019%2000-49-26.gif) 10 | 11 | #### 如何使用 12 | 13 | * 支持动态修改Navgation上的Item数量和显示隐藏等 14 | 15 | ~~~ 16 | /* 17 | dropDownMenuTitle:导航标题数组，按顺序填写 18 | dropDownMenuDistrictData:区域数组 19 | --- 以下三种样式一样，按需求添加即可 --- 20 | dropDownMenuSourceData:来源 21 | dropDownMenuStyleData:租售 22 | dropDownMenuFilterData:排序 23 | */ 24 | 26 | ~~~ 27 | * 将项目中component文件夹拖入项目中 28 | * 在将要使用的该组件的.json文件中引入 29 | 30 | ~~~ 31 | 32 | { 33 | "usingComponents": { 34 | "dropdownmenu": "/component/dropdownmenu/dropdownmenu" 35 | } 36 | } 37 | 38 | ~~~ 39 | * 在.wxml文件中引用即可 40 | 41 | ##### 详情代码以及使用参照示例，如果对你有所帮助的请给个Star✨~ -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | // 展示本地存储能力 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | if (this.userInfoReadyCallback) { 28 | this.userInfoReadyCallback(res) 29 | } 30 | } 31 | }) 32 | } 33 | } 34 | }) 35 | }, 36 | globalData: { 37 | userInfo: null 38 | } 39 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/logs/logs" 5 | ], 6 | "window": { 7 | "backgroundTextStyle": "light", 8 | "navigationBarBackgroundColor": "#fff", 9 | "navigationBarTitleText": "WeChat", 10 | "navigationBarTextStyle": "black" 11 | }, 12 | "sitemapLocation": "sitemap.json" 13 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /component/dropdownmenu/dropdownmenu.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | dropDownMenuTitle: { 4 | type: Array, 5 | value: [], 6 | }, 7 | dropDownMenuDistrictData: { 8 | type: Array, 9 | value: [], 10 | observer: function(newVal, oldVal) { 11 | let model = newVal[0] ? newVal[0] : null 12 | this.selectDefaltDistrictLeft(model) 13 | } 14 | }, 15 | 16 | dropDownMenuSourceData: { 17 | type: Array, 18 | value: [] 19 | }, 20 | dropDownMenuStyleData: { 21 | type: Array, 22 | value: [] 23 | }, 24 | dropDownMenuFilterData: { 25 | type: Array, 26 | value: [] 27 | }, 28 | }, 29 | data: { 30 | // private properity 31 | district_open: false, // 区域 32 | source_open: false, // 来源 33 | style_open: false, // 出租 出售 34 | filteropen: false, // 筛选 35 | shownavindex: '', 36 | dropDownMenuDistrictDataRight: {}, 37 | district_left_select: '', 38 | district_right_select: '', 39 | district_right_select_name: '', 40 | selected_style_id: 0, 41 | selected_style_name: '', 42 | selected_source_id: 0, 43 | selected_source_name: '', 44 | selected_filter_id: 0, 45 | selected_filter_name: '' 46 | }, 47 | methods: { 48 | 49 | tapDistrictNav: function(e) { 50 | if (this.data.district_open) { 51 | this.setData({ 52 | district_open: false, 53 | source_open: false, 54 | style_open: false, 55 | filter_open: false, 56 | shownavindex: 0 57 | }) 58 | } else { 59 | this.setData({ 60 | district_open: true, 61 | style_open: false, 62 | source_open: false, 63 | filter_open: false, 64 | shownavindex: e.currentTarget.dataset.nav 65 | }) 66 | } 67 | 68 | }, 69 | tapSourceNav: function(e) { 70 | if (this.data.source_open) { 71 | this.setData({ 72 | source_open: false, 73 | style_open: false, 74 | district_open: false, 75 | filter_open: false, 76 | shownavindex: 0 77 | }) 78 | } else { 79 | this.setData({ 80 | source_open: true, 81 | style_open: false, 82 | district_open: false, 83 | filter_open: false, 84 | shownavindex: e.currentTarget.dataset.nav 85 | }) 86 | } 87 | }, 88 | tapStyleNav: function(e) { 89 | if (this.data.style_open) { 90 | this.setData({ 91 | source_open: false, 92 | style_open: false, 93 | district_open: false, 94 | filter_open: false, 95 | shownavindex: 0 96 | }) 97 | } else { 98 | this.setData({ 99 | source_open: false, 100 | style_open: true, 101 | filter_open: false, 102 | district_open: false, 103 | shownavindex: e.currentTarget.dataset.nav 104 | }) 105 | } 106 | console.log(e.target) 107 | }, 108 | tapFilterNav: function(e) { 109 | if (this.data.filter_open) { 110 | this.setData({ 111 | source_open: false, 112 | style_open: false, 113 | district_open: false, 114 | filter_open: false, 115 | shownavindex: 0 116 | }) 117 | } else { 118 | this.setData({ 119 | source_open: false, 120 | style_open: false, 121 | district_open: false, 122 | filter_open: true, 123 | shownavindex: e.currentTarget.dataset.nav 124 | }) 125 | } 126 | }, 127 | 128 | 129 | selectDefaltDistrictLeft(model) { 130 | if (!model) { 131 | return 132 | } 133 | var model = model.childModel; 134 | var selectedId = model.id 135 | var selectedTitle = model.title; 136 | this.setData({ 137 | dropDownMenuDistrictDataRight: model ? model : '', 138 | district_left_select: selectedId, 139 | district_right_select: '', 140 | }) 141 | }, 142 | 143 | selectDistrictLeft: function(e) { 144 | var model = e.target.dataset.model.childModel; 145 | var selectedId = e.target.dataset.model.id 146 | var selectedTitle = e.target.dataset.model.title; 147 | this.setData({ 148 | dropDownMenuDistrictDataRight: model ? model : '', 149 | district_left_select: selectedId, 150 | district_right_select: '', 151 | }) 152 | }, 153 | 154 | selectDistrictRight: function(e) { 155 | var selectedId = e.target.dataset.model.id 156 | var selectedTitle = e.target.dataset.model.title; 157 | this.closeHyFilter(); 158 | this.setData({ 159 | district_right_select: selectedId, 160 | district_right_select_name: selectedTitle 161 | }) 162 | this.triggerEvent("selectedItem", { 163 | index: this.data.shownavindex, 164 | selectedId: selectedId, 165 | selectedTitle: selectedTitle 166 | }) 167 | }, 168 | 169 | selectSourceItem: function(e) { 170 | var selectedId = e.target.dataset.model.id 171 | var selectedTitle = e.target.dataset.model.title; 172 | this.closeHyFilter(); 173 | this.setData({ 174 | selected_source_id: selectedId, 175 | selected_source_name: selectedTitle 176 | }) 177 | this.triggerEvent("selectedItem", { 178 | index: this.data.shownavindex, 179 | selectedId: selectedId, 180 | selectedTitle: selectedTitle 181 | }) 182 | }, 183 | 184 | selectFilterItem: function(e) { 185 | var selectedId = e.target.dataset.model.id 186 | var selectedTitle = e.target.dataset.model.title; 187 | this.closeHyFilter(); 188 | this.setData({ 189 | selected_filter_id: selectedId, 190 | selected_filter_name: selectedTitle 191 | }) 192 | this.triggerEvent("selectedItem", { 193 | index: this.data.shownavindex, 194 | selectedId: selectedId, 195 | selectedTitle: selectedTitle 196 | }) 197 | }, 198 | 199 | selectStyleItem: function(e) { 200 | var selectedId = e.target.dataset.model.id 201 | var selectedTitle = e.target.dataset.model.title; 202 | this.closeHyFilter(); 203 | this.setData({ 204 | selected_style_id: selectedId, 205 | selected_style_name: selectedTitle 206 | }) 207 | this.triggerEvent("selectedItem", { 208 | index: this.data.shownavindex, 209 | selectedId: selectedId, 210 | selectedTitle: selectedTitle 211 | }) 212 | }, 213 | 214 | /**关闭筛选 */ 215 | closeHyFilter: function() { 216 | if (this.data.district_open) { 217 | this.setData({ 218 | district_open: false, 219 | source_open: false, 220 | style_open: false, 221 | filter_open: false, 222 | }) 223 | } else if (this.data.source_open) { 224 | this.setData({ 225 | source_open: false, 226 | style_open: false, 227 | district_open: false, 228 | filter_open: false, 229 | }) 230 | } else if (this.data.style_open) { 231 | this.setData({ 232 | source_open: false, 233 | style_open: false, 234 | district_open: false, 235 | filter_open: false, 236 | }) 237 | } else if (this.data.filter_open) { 238 | this.setData({ 239 | source_open: false, 240 | style_open: false, 241 | district_open: false, 242 | filter_open: false, 243 | }) 244 | } 245 | }, 246 | }, 247 | //组件生命周期函数，在组件实例进入页面节点树时执行 248 | attached: function() { 249 | 250 | 251 | }, 252 | 253 | }) -------------------------------------------------------------------------------- /component/dropdownmenu/dropdownmenu.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /component/dropdownmenu/dropdownmenu.wxml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 10 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | {{item.title}} 24 | 25 | 26 | 27 | 28 | {{item.title}} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | {{item.title}} 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | {{item.title}} 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | {{item.title}} 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /component/dropdownmenu/dropdownmenu.wxss: -------------------------------------------------------------------------------- 1 | .page { 2 | width: 100%; 3 | height: 100%; 4 | background: #fff; 5 | overflow: hidden; 6 | } 7 | 8 | .position { 9 | position: absolute; 10 | } 11 | 12 | .nav { 13 | position: relative; 14 | z-index: 99; 15 | display: flex; 16 | border-bottom: 1px solid #f7f7f7; 17 | background: #fff; 18 | } 19 | 20 | .nav-child { 21 | display: flex; 22 | flex: 1; 23 | text-align: center; 24 | height: 48rpx; 25 | align-items: center; 26 | justify-content: center; 27 | font-size: 24rpx; 28 | margin: 20rpx 0; 29 | } 30 | 31 | .borders-right { 32 | border-right: 1px solid #e6e6e6; 33 | } 34 | 35 | .borders-left { 36 | border-left: 1px solid #e6e6e6; 37 | } 38 | 39 | .borders { 40 | border-left: 1px solid #e6e6e6; 41 | border-right: 1px solid #e6e6e6; 42 | } 43 | 44 | .nav-title { 45 | display: inline-block; 46 | } 47 | 48 | .icon { 49 | display: inline-block; 50 | border: 4px solid transparent; 51 | border-top: 4px solid #9b9b9b; 52 | margin-left: 5px; 53 | margin-top: 10rpx; 54 | } 55 | 56 | .container { 57 | position: relative; 58 | z-index: 4; 59 | font-size: 14px; 60 | } 61 | 62 | 63 | .slidedown { 64 | transform: translateY(0%); 65 | } 66 | 67 | .district { 68 | position: absolute; 69 | display: none; 70 | z-index: 5; 71 | width: 100%; 72 | height: 100%; 73 | overflow-y: scroll; 74 | background-color: rgba(0, 0, 0, 0.5); 75 | } 76 | 77 | .district .half { 78 | overflow-y: scroll; 79 | float: left; 80 | width: 50%; 81 | height: 600rpx; 82 | line-height: 80rpx; 83 | box-sizing: border-box; 84 | font-size: 14px; 85 | } 86 | 87 | .half view { 88 | text-overflow: ellipsis; 89 | overflow: hidden; 90 | white-space: nowrap; 91 | padding-left: 15rpx; 92 | } 93 | 94 | .half-left { 95 | background: #f7f7f7; 96 | } 97 | 98 | .half-center { 99 | background: #fff; 100 | } 101 | 102 | .half-right { 103 | background: #fff; 104 | } 105 | 106 | .half-right view { 107 | border-bottom: 1px solid #f7f7f7; 108 | } 109 | 110 | .current_left_select { 111 | background: #fff; 112 | } 113 | 114 | .current_right_select { 115 | background: #fff; 116 | color: #fc6060; 117 | } 118 | 119 | .nav-child.active .nav-title { 120 | color: #fc6060; 121 | } 122 | 123 | .nav-child.active .icon { 124 | border-bottom: 4px solid #fc6060; 125 | border-top: 0; 126 | } 127 | 128 | @keyframes slidown { 129 | from { 130 | transform: translateY(-100%); 131 | } 132 | 133 | to { 134 | transform: translateY(0%); 135 | } 136 | } 137 | 138 | .slidown { 139 | display: block; 140 | animation: slidown 0.2s ease-in both; 141 | } 142 | 143 | @keyframes slidup { 144 | from { 145 | transform: translateY(0%); 146 | } 147 | 148 | to { 149 | transform: translateY(-100%); 150 | } 151 | } 152 | 153 | .z-height { 154 | overflow-y: scroll; 155 | background: #fff; 156 | } 157 | 158 | .slidup { 159 | display: block; 160 | animation: slidup 0.2s ease-in both; 161 | } 162 | 163 | .disappear { 164 | display: none; 165 | } 166 | 167 | .show { 168 | display: block; 169 | } 170 | 171 | .slidowntop { 172 | display: flex; 173 | flex-direction: row; 174 | padding: 20rpx 24rpx 10rpx 24rpx; 175 | } 176 | 177 | .emptyall { 178 | margin-left: 475rpx; 179 | color: #fc6060; 180 | } 181 | 182 | .emptyallright { 183 | width: 80rpx; 184 | text-align: center; 185 | } 186 | 187 | .endselect { 188 | width: 350rpx; 189 | text-align: left; 190 | } 191 | 192 | .return { 193 | margin-left: 200rpx; 194 | color: #fc6060; 195 | } 196 | 197 | .slidowncenter { 198 | margin-top: 20rpx; 199 | padding-top: 20rpx; 200 | padding-left: 24rpx; 201 | display: flex; 202 | flex-direction: row; 203 | align-content: space-between; 204 | border-top: solid #d1d3d4 1rpx; 205 | } 206 | 207 | .slidownbottom { 208 | margin-top: 10rpx; 209 | padding: 10rpx; 210 | display: flex; 211 | flex-direction: row; 212 | flex-wrap: wrap; 213 | } 214 | 215 | .sortitem { 216 | border-bottom: solid #f7f7f7 1rpx; 217 | justify-content: space-between; 218 | padding: 20rpx 30rpx; 219 | } 220 | 221 | .sortitem.active { 222 | color: #fc6060; 223 | } 224 | 225 | .container_hd { 226 | width: 100%; 227 | height: 100%; 228 | position: absolute; 229 | overflow-y: scroll; 230 | background-color: rgba(0, 0, 0, 0.5); 231 | } 232 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | // pages/index/menu.js 2 | const app = getApp() 3 | Page({ 4 | data: { 5 | dropDownMenuTitle: ['区域', '来源', '租售', '排序'], 6 | data1: [{ 7 | id: 0, 8 | title: '不限', 9 | childModel: [{ 10 | id: '0-1', 11 | title: '不限' 12 | } 13 | ] 14 | }, 15 | 16 | { 17 | id: 1, 18 | title: '道里区', 19 | childModel: [{ 20 | id: '1-1', 21 | title: '中央大街' 22 | }, 23 | { 24 | id: '1-2', 25 | title: '埃德蒙顿路' 26 | } 27 | ] 28 | }, 29 | { 30 | id: 2, 31 | title: '南岗区', 32 | childModel: [{ 33 | id: '2-1', 34 | title: '果戈里' 35 | }, 36 | { 37 | id: '2-2', 38 | title: '通达街' 39 | } 40 | ] 41 | }, 42 | { 43 | id: 3, 44 | title: '松北区', 45 | childModel: [{ 46 | id: '3-1', 47 | title: '世茂大道' 48 | }, 49 | { 50 | id: '3-2', 51 | title: '市政府' 52 | } 53 | ] 54 | } 55 | ], 56 | data2: [{ 57 | id: 1, 58 | title: '个人房源' 59 | }, 60 | { 61 | id: 2, 62 | title: '经纪人房源' 63 | } 64 | ], 65 | data3: [{ 66 | id: 1, 67 | title: '出租' 68 | }, 69 | { 70 | id: 2, 71 | title: '出售' 72 | } 73 | ], 74 | data4: [{ 75 | id: 1, 76 | title: '智能排序' 77 | }, { 78 | id: 2, 79 | title: '发布时间' 80 | }, { 81 | id: 3, 82 | title: '距离优先' 83 | }], 84 | }, 85 | onLoad: function() { 86 | 87 | }, 88 | /** 89 | * 生命周期函数--监听页面初次渲染完成 90 | */ 91 | onReady: function() { 92 | 93 | }, 94 | selectedItem: function(e) { 95 | console.log('id --' + e.detail.selectedId + "cityname = " + e.detail.selectedTitle); 96 | }, 97 | showDialog: function(e) { 98 | 99 | }, 100 | 101 | }) -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "dropdownmenu": "/component/dropdownmenu/dropdownmenu" 4 | }, 5 | "navigationBarTitleText": "dropDownMenu" 6 | } -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .userinfo { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .userinfo-avatar { 9 | width: 128rpx; 10 | height: 128rpx; 11 | margin: 20rpx; 12 | border-radius: 50%; 13 | } 14 | 15 | .userinfo-nickname { 16 | color: #aaa; 17 | } 18 | 19 | .usermotto { 20 | margin-top: 200px; 21 | } -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [] 7 | }, 8 | onLoad: function () { 9 | this.setData({ 10 | logs: (wx.getStorageSync('logs') || []).map(log => { 11 | return util.formatTime(new Date(log)) 12 | }) 13 | }) 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志", 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true, 12 | "autoAudits": false 13 | }, 14 | "compileType": "miniprogram", 15 | "libVersion": "2.6.0", 16 | "appid": "wxa8d56c609e763cd4", 17 | "projectname": "dropDownMenu-Wechat", 18 | "debugOptions": { 19 | "hidedInDevtools": [] 20 | }, 21 | "isGameTourist": false, 22 | "simulatorType": "wechat", 23 | "simulatorPluginLibVersion": {}, 24 | "condition": { 25 | "search": { 26 | "current": -1, 27 | "list": [] 28 | }, 29 | "conversation": { 30 | "current": -1, 31 | "list": [] 32 | }, 33 | "game": { 34 | "currentL": -1, 35 | "list": [] 36 | }, 37 | "miniprogram": { 38 | "current": -1, 39 | "list": [] 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /source/2293FCAB-7E6A-4144-AA25-8852ACA52E34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZBK1nger/dropDownMenu-wechat/1fc793aeac60635564074d5be36dd6670c399aa1/source/2293FCAB-7E6A-4144-AA25-8852ACA52E34.png -------------------------------------------------------------------------------- /source/799BC7E0-F0A3-48D7-B746-18E0181EBC6E.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZBK1nger/dropDownMenu-wechat/1fc793aeac60635564074d5be36dd6670c399aa1/source/799BC7E0-F0A3-48D7-B746-18E0181EBC6E.png -------------------------------------------------------------------------------- /source/Feb-16-2019 00-49-26.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZBK1nger/dropDownMenu-wechat/1fc793aeac60635564074d5be36dd6670c399aa1/source/Feb-16-2019 00-49-26.gif -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | --------------------------------------------------------------------------------