-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c3bf275
commit e1775a0
Showing
64 changed files
with
2,658 additions
and
691 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,15 @@ | ||
| # tools | ||
|
|
||
| 常用插件 | ||
| - alert 弹框 | ||
| - toast toast提示 | ||
| - keyboard-number 数字软键盘 | ||
| - pullRefresh 下拉刷新 | ||
| - js：原生组件 | ||
| - alert 弹框 | ||
| - toast toast提示 | ||
| - keyboard-number 数字软键盘 | ||
| - pullRefresh 下拉刷新 | ||
| - vue：vue组件 | ||
| - Alert弹窗 | ||
| - PullRefresh下拉刷新 | ||
| - Toast通知提示 | ||
| - react：react组件 | ||
| - Alert弹窗 | ||
| - PullRefresh下拉刷新 | ||
| - Toast通知提示 |
File renamed without changes.
200 changes: 100 additions & 100 deletions
200
client/js/plugins/alert/index.js → client/js/plugins/js/alert/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,101 @@ | ||
|
|
||
| /* | ||
| * 弹窗alert | ||
| * Alert | ||
| * css need (components.less, z-.less, colors.less, ./index.less) | ||
| * @author: Micheal Wang | ||
| * @build time: 2017.12.23 | ||
| * | ||
| * @params {Object} options 构建配置 | ||
| * {String} background: 背景色 | ||
| * @params {Object} options 调用配置 | ||
| * {String} title: 标题 | ||
| * {String} className: 给.m-win新增class | ||
| * {String} content: 内容（必须） | ||
| * {Array} btns: 按钮数组 | ||
| * {Object} options 按钮配置 | ||
| * {String} text: 按钮文案（必须） | ||
| * {String} className: 按钮class | ||
| * {Function} callback: 按钮点击回调 | ||
| @example: | ||
| var alert = new Alert(); | ||
| alert.show({ | ||
| title: '提示', | ||
| content: '哈哈哈', | ||
| className: 'j-test', | ||
| btns: [ | ||
| { text: '关闭' }, | ||
| { text: '好的', callback: function() { alert(123456) } } | ||
| ] | ||
| }) | ||
| */ | ||
|
|
||
| class Alert { | ||
| constructor(props = {}) { | ||
| let { background } = props; | ||
| this.bgHtml = `<div class="m-win_bg" ${ background ? 'style="background:' + background + '"' : ''}></div>`; | ||
| } | ||
|
|
||
| createDom ({ title, content, btns = [], className } = params) { | ||
| let item = document.createElement('div'), | ||
| handleHide = this.hide, | ||
| html = `<div class="m-win ${className || ''}"> | ||
| ${title ? '<h4 class="m-tit">' + title + '</h4>' : ''} | ||
| <div class="m-ctn${ title ? '' : ' z-notit' }">${ content }</div> | ||
| <p class="f-b_1px bt_1px">${ btns.length ? btns.map((item, index) => { | ||
| return `<a data-index="${ index }" class="u-btn_il f-fl f-b_1px bl_1px ${ item.className ? item.className : '' }" style="width:${ Math.floor(100 / btns.length) + '%' }">${ item.text }</a>` | ||
| }).join('').replace('bl_1px', '') : `<a class="u-btn">确定</a>` }</p> | ||
| </div> | ||
| ${this.bgHtml} | ||
| `; | ||
|
|
||
| item.id = 'fundAlert'; | ||
| item.innerHTML = html; | ||
|
|
||
| let bg = document.createElement('div'); | ||
| bg.className = 'm-win_bg'; | ||
| if (this.background) bg.style.background = this.background | ||
|
|
||
| if (btns.length) { | ||
| let btnDoms = item.getElementsByClassName('u-btn_il'); | ||
|
|
||
| Array.prototype.forEach.call(btnDoms, item => { | ||
| let index = item.getAttribute('data-index'); | ||
|
|
||
| if (!btns[index].callback) btns[index].callback = this.hide; | ||
| item.addEventListener('click', btns[index].callback, false); | ||
| }); | ||
| } else { | ||
| item.getElementsByClassName('u-btn')[0].addEventListener('click', this.hide, false);; | ||
| } | ||
|
|
||
|
|
||
| return item; | ||
| } | ||
|
|
||
| show (params = {}) { | ||
| if (!params.content) return false; | ||
| let _nowItem = this.createDom(params); | ||
|
|
||
| let _item = document.getElementById('fundAlert'); | ||
| if (_item) { | ||
| _item.parentNode.replaceChild(_nowItem, _item); | ||
| } else { | ||
| document.body.appendChild(_nowItem) | ||
| } | ||
|
|
||
| _nowItem = _nowItem.getElementsByClassName('m-win')[0]; | ||
| let _height = _nowItem.getBoundingClientRect().height; | ||
|
|
||
| _nowItem.style.marginTop = - _height / 2 + 'px'; | ||
| _nowItem.style.opacity = 1; | ||
| } | ||
|
|
||
| hide () { | ||
| let _item = document.getElementById('fundAlert'); | ||
| if (_item) _item.className += ' z-hide'; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| /* | ||
| * 弹窗alert | ||
| * Alert | ||
| * css need (components.less, z-.less, colors.less, ./index.less) | ||
| * @author: Micheal Wang | ||
| * @build time: 2017.12.23 | ||
| * | ||
| * @params {Object} options 构建配置 | ||
| * {String} background: 背景色 | ||
| * @params {Object} options 调用配置 | ||
| * {String} title: 标题 | ||
| * {String} className: 给.m-win新增class | ||
| * {String} content: 内容（必须） | ||
| * {Array} btns: 按钮数组 | ||
| * {Object} options 按钮配置 | ||
| * {String} text: 按钮文案（必须） | ||
| * {String} className: 按钮class | ||
| * {Function} callback: 按钮点击回调 | ||
| @example: | ||
| var alert = new Alert(); | ||
| alert.show({ | ||
| title: '提示', | ||
| content: '哈哈哈', | ||
| className: 'j-test', | ||
| btns: [ | ||
| { text: '关闭' }, | ||
| { text: '好的', callback: function() { alert(123456) } } | ||
| ] | ||
| }) | ||
| */ | ||
|
|
||
| class Alert { | ||
| constructor(props = {}) { | ||
| let { background } = props; | ||
| this.bgHtml = `<div class="m-win_bg" ${ background ? 'style="background:' + background + '"' : ''}></div>`; | ||
| } | ||
|
|
||
| createDom ({ title, content, btns = [], className } = params) { | ||
| let item = document.createElement('div'), | ||
| handleHide = this.hide, | ||
| html = `<div class="m-win ${className || ''}"> | ||
| ${title ? '<h4 class="m-tit">' + title + '</h4>' : ''} | ||
| <div class="m-ctn${ title ? '' : ' z-notit' }">${ content }</div> | ||
| <p class="f-b_1px bt_1px">${ btns.length ? btns.map((item, index) => { | ||
| return `<a data-index="${ index }" class="u-btn_il f-fl f-b_1px bl_1px ${ item.className ? item.className : '' }" style="width:${ Math.floor(100 / btns.length) + '%' }">${ item.text }</a>` | ||
| }).join('').replace('bl_1px', '') : `<a class="u-btn">确定</a>` }</p> | ||
| </div> | ||
| ${this.bgHtml} | ||
| `; | ||
|
|
||
| item.id = 'fundAlert'; | ||
| item.innerHTML = html; | ||
|
|
||
| let bg = document.createElement('div'); | ||
| bg.className = 'm-win_bg'; | ||
| if (this.background) bg.style.background = this.background | ||
|
|
||
| if (btns.length) { | ||
| let btnDoms = item.getElementsByClassName('u-btn_il'); | ||
|
|
||
| Array.prototype.forEach.call(btnDoms, item => { | ||
| let index = item.getAttribute('data-index'); | ||
|
|
||
| if (!btns[index].callback) btns[index].callback = this.hide; | ||
| item.addEventListener('click', btns[index].callback, false); | ||
| }); | ||
| } else { | ||
| item.getElementsByClassName('u-btn')[0].addEventListener('click', this.hide, false);; | ||
| } | ||
|
|
||
|
|
||
| return item; | ||
| } | ||
|
|
||
| show (params = {}) { | ||
| if (!params.content) return false; | ||
| let _nowItem = this.createDom(params); | ||
|
|
||
| let _item = document.getElementById('fundAlert'); | ||
| if (_item) { | ||
| _item.parentNode.replaceChild(_nowItem, _item); | ||
| } else { | ||
| document.body.appendChild(_nowItem) | ||
| } | ||
|
|
||
| _nowItem = _nowItem.getElementsByClassName('m-win')[0]; | ||
| let _height = _nowItem.getBoundingClientRect().height; | ||
|
|
||
| _nowItem.style.marginTop = - _height / 2 + 'px'; | ||
| _nowItem.style.opacity = 1; | ||
| } | ||
|
|
||
| hide () { | ||
| let _item = document.getElementById('fundAlert'); | ||
| if (_item) _item.className += ' z-hide'; | ||
| } | ||
| } | ||
|
|
||
| module.exports = Alert; |
74 changes: 37 additions & 37 deletions
74
client/js/plugins/alert/index.less → client/js/plugins/js/alert/index.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,37 @@ | ||
| // alert | ||
| #fundAlert { | ||
| .m-win{ | ||
| padding-top: 0.4rem; | ||
| left: 15%; | ||
| top: 50%; | ||
| width: 70%; | ||
| /*font-size: 0.32rem;*/ // 12px | ||
| font-size: 0.373rem; | ||
| line-height: 0.48rem; | ||
| text-align: center; | ||
| word-break: break-all; | ||
| border-radius: 8px; | ||
| background-color: #fff; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .m-tit{ | ||
| text-align: center; | ||
| } | ||
|
|
||
| .m-ctn{ | ||
| padding: 0.2rem 0.5rem 0.4rem; | ||
| padding-bottom: 0.4rem; | ||
| } | ||
| .m-ctn.z-notit{ | ||
| padding-top: 0.6rem; | ||
| padding-bottom: 0.6rem; | ||
| } | ||
|
|
||
| .u-btn, .u-btn_il{ | ||
| height: 1rem; | ||
| line-height: 1rem; | ||
| font-size: 0.4rem; | ||
| text-align: center; | ||
| } | ||
| } | ||
| // alert | ||
| #fundAlert { | ||
| .m-win{ | ||
| padding-top: 0.4rem; | ||
| left: 15%; | ||
| top: 50%; | ||
| width: 70%; | ||
| /*font-size: 0.32rem;*/ // 12px | ||
| font-size: 0.373rem; | ||
| line-height: 0.48rem; | ||
| text-align: center; | ||
| word-break: break-all; | ||
| border-radius: 8px; | ||
| background-color: #fff; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .m-tit{ | ||
| text-align: center; | ||
| } | ||
|
|
||
| .m-ctn{ | ||
| padding: 0.2rem 0.5rem 0.4rem; | ||
| padding-bottom: 0.4rem; | ||
| } | ||
| .m-ctn.z-notit{ | ||
| padding-top: 0.6rem; | ||
| padding-bottom: 0.6rem; | ||
| } | ||
|
|
||
| .u-btn, .u-btn_il{ | ||
| height: 1rem; | ||
| line-height: 1rem; | ||
| font-size: 0.4rem; | ||
| text-align: center; | ||
| } | ||
| } |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.