Skip to content

H
hls-easy-ui
Commit 658e001d authored by nature's avatar nature
Browse files
Options

弹框修改

parent d7a8a4ef
Show whitespace changes
Inline Side-by-side
Showing with 16034 additions and 84 deletions
package-lock.json 0 → 100644
View file @ 658e001d
This source diff could not be displayed because it is too large. You can view the blob instead.
packages/common/scripts/hlsPopup.js
View file @ 658e001d
...@@ -16,6 +16,8 @@ Vue.use(LoadingPlugin) ...@@ -16,6 +16,8 @@ Vue.use(LoadingPlugin)
Vue.use(DatetimePlugin) Vue.use(DatetimePlugin)
Vue.use(NumberKeyboard) Vue.use(NumberKeyboard)
import confirm from '../../components/Confirm/index'
// Vue.prototype.HlsModal = window.HlsModal = HlsModal // Vue.prototype.HlsModal = window.HlsModal = HlsModal
/** /**
...@@ -130,6 +132,22 @@ export function showError (content = '', time = 2000) { ...@@ -130,6 +132,22 @@ export function showError (content = '', time = 2000) {
* @param confirmObject.onConfirm 确定函数 * @param confirmObject.onConfirm 确定函数
*/ */
export function showConfirm (confirmObject) { export function showConfirm (confirmObject) {
let def = {
title: confirmObject.title || '提示',
content: confirmObject.content || '',
confirmText: '确定',
cancelText: '取消',
onConfirm: () => {
confirmObject.onConfirm(1)
},
onCancel: () => {
confirmObject.onConfirm(0)
},
}
confirm.confirmShow(def)
}
export function showConfirmVux (confirmObject) {
let def = { let def = {
title: confirmObject.title || '提示', title: confirmObject.title || '提示',
content: confirmObject.content || '', content: confirmObject.content || '',
......
packages/common/styles/app.core.less
View file @ 658e001d
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
@import "animate"; @import "animate";
@import "variables"; @import "variables";
@import "ionic"; @import "ionic";
@import 'publicStyle'; @import 'public-style';
@import "ionic-public-style"; @import "ionic-public-style";
@import "platform-ios"; @import "platform-ios";
@import "platform-iosx"; @import "platform-iosx";
packages/common/styles/publicStyle.less → packages/common/styles/public-style.less
View file @ 658e001d
...@@ -34,7 +34,9 @@ ...@@ -34,7 +34,9 @@
background: rgba(0, 0, 0, 0.3) !important; background: rgba(0, 0, 0, 0.3) !important;
} }
.weui-toast .weui-loading{ .weui-toast .weui-loading{
animation: vue-loading 1s steps(12, end) infinite !important; animation: vue-loading 1s steps(8, end) infinite !important;
background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNTZweCIgaGVpZ2h0PSI1NnB4IiB2aWV3Qm94PSIwIDAgNTYgNTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bG9hZGluZ0AyeDwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8ZmlsdGVyIGlkPSJmaWx0ZXItMSI+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VHcmFwaGljIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjIzOTIxNiAwIDAgMCAwIDAuMzQ5MDIwIDAgMCAwIDAgMC43NTI5NDEgMCAwIDAgMS4wMDAwMDAgMCI+PC9mZUNvbG9yTWF0cml4PgogICAgICAgIDwvZmlsdGVyPgogICAgPC9kZWZzPgogICAgPGcgaWQ9ImxvYWRpbmciIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsb2FkaW5nLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTkuMDAwMDAwLCAtMzE4LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0i57yW57uELTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1OS4wMDAwMDAsIDMxOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIGZpbGw9IiNEOEQ4RDgiIG9wYWNpdHk9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiI+PC9yZWN0Pgo8IS0tICAgICAgICAgICAgICAgIDxnIGlkPSLnvJbnu4QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyLjAwMDAwMCwgMjEuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9ouWkh+S7vS0zIiBzdHJva2U9IiMxQzMxN0UiIHN0cm9rZS13aWR0aD0iMC41NDE2NjY2NjciIGZpbGw9IiNGRkZGRkYiIHg9IjAuMzQzNzY2OTU3IiB5PSIwLjMyNDc0MDU4MSIgd2lkdGg9IjExLjg4MDU1NTYiIGhlaWdodD0iMTUuMjAyNzc3OCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaLlpIfku70tMiIgZmlsbD0iI0Y4RkJGRiIgeD0iMS4yMjg0ODkxOCIgeT0iMy4zNzYxMjk0NyIgd2lkdGg9IjEwLjExMTExMTEiIGhlaWdodD0iMTEuNTU1NTU1NiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIGZpbGw9IiMzRDU5QzAiIHg9IjAuNDE5OTg2MjI2IiB5PSIwLjQwOTE4NTAxIiB3aWR0aD0iMTEuNzA3Njg4MyIgaGVpZ2h0PSIxLjg3Nzc3Nzc4Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgZmlsbD0iI0ZGQzMxMSIgeD0iMi4wOTUxNTU4NSIgeT0iMy42NjUwMTgzNiIgd2lkdGg9IjMuMDMzMzMzMzMiIGhlaWdodD0iMy45Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9ouWkh+S7vS00IiBmaWxsPSIjNjc4QkU5IiB4PSI2LjEzOTYwMDI5IiB5PSIzLjY2NTAxODM2IiB3aWR0aD0iNS4zNDQ0NDQ0NCIgaGVpZ2h0PSIxIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9ouWkh+S7vS02IiBmaWxsPSIjNjc4QkU5IiB4PSIxLjk1MDcxMTQiIHk9IjkuNDQyNzk2MTQiIHdpZHRoPSI5LjUzMzMzMzMzIiBoZWlnaHQ9IjEiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0i55+p5b2i5aSH5Lu9LTciIGZpbGw9IiM2NzhCRTkiIHg9IjEuOTUwNzExNCIgeT0iMTEuNDY1MDE4NCIgd2lkdGg9IjkuNTMzMzMzMzMiIGhlaWdodD0iMSI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaLlpIfku70tOCIgZmlsbD0iIzY3OEJFOSIgeD0iMS45NTA3MTE0IiB5PSIxMy42MzE2ODUiIHdpZHRoPSI5LjUzMzMzMzMzIiBoZWlnaHQ9IjEiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0i55+p5b2i5aSH5Lu9LTUiIGZpbGw9IiM2NzhCRTkiIHg9IjYuMTM5NjAwMjkiIHk9IjUuODMxNjg1MDMiIHdpZHRoPSIyLjc0NDQ0NDQ0IiBoZWlnaHQ9IjEiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4tLT4KICAgICAgICAgICAgICAgIDxnIGZpbHRlcj0idXJsKCNmaWx0ZXItMSkiIGlkPSIxNDXliqDovb0iPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA1LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMzQuMDg1MTU2MiwxMS41ODEyNSBDMzQuMDg1MTU2MiwxMi41NTY4MDkyIDM0Ljg3NjAwMzMsMTMuMzQ3NjU2MiAzNS44NTE1NjI1LDEzLjM0NzY1NjIgQzM2LjgyNzEyMTcsMTMuMzQ3NjU2MiAzNy42MTc5Njg3LDEyLjU1NjgwOTIgMzcuNjE3OTY4NywxMS41ODEyNSBDMzcuNjE3OTY4NywxMC42MDU2OTA4IDM2LjgyNzEyMTcsOS44MTQ4NDM3NSAzNS44NTE1NjI1LDkuODE0ODQzNzUgQzM0Ljg3NjAwMzMsOS44MTQ4NDM3NSAzNC4wODUxNTYyLDEwLjYwNTY5MDggMzQuMDg1MTU2MiwxMS41ODEyNSBaIiBpZD0i6Lev5b6EIiBmaWxsPSIjQUFBQUFBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIG9wYWNpdHk9IjAuMzA0NTI2NjU0Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xNDg0Mzc1LDIyLjAxMDE1NjMgQzM4LjE0ODQzNzUsMjMuMzgxMzc1NyAzOS4yNjAwMzA1LDI0LjQ5Mjk2ODggNDAuNjMxMjUsMjQuNDkyOTY4OCBDNDIuMDAyNDY5NSwyNC40OTI5Njg4IDQzLjExNDA2MjUsMjMuMzgxMzc1NyA0My4xMTQwNjI1LDIyLjAxMDE1NjMgQzQzLjExNDA2MjUsMjEuMTIzMTMyNyA0Mi42NDA4NDEyLDIwLjMwMzQ4OTIgNDEuODcyNjU2MywxOS44NTk5Nzc0IEM0MS4xMDQ0NzE0LDE5LjQxNjQ2NTcgNDAuMTU4MDI4NiwxOS40MTY0NjU3IDM5LjM4OTg0MzcsMTkuODU5OTc3NCBDMzguNjIxNjU4OCwyMC4zMDM0ODkyIDM4LjE0ODQzNzUsMjEuMTIzMTMyNyAzOC4xNDg0Mzc1LDIyLjAxMDE1NjMgTDM4LjE0ODQzNzUsMjIuMDEwMTU2MyBaIiBpZD0i6Lev5b6EIiBmaWxsPSIjQUFBQUFBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIG9wYWNpdHk9IjAuNDAxNzAwMzY4Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNS4wMzY3MTg4LDM0LjQwNzgxMjUgQzM1LjAzNjcxODgsMzYuMTI5Mzg3NiAzNi40MzIzMzExLDM3LjUyNSAzOC4xNTM5MDYzLDM3LjUyNSBDMzkuODc1NDgxNCwzNy41MjUgNDEuMjcxMDkzOCwzNi4xMjkzODc2IDQxLjI3MTA5MzgsMzQuNDA3ODEyNSBDNDEuMjcxMDkzOCwzMi42ODYyMzc0IDM5Ljg3NTQ4MTQsMzEuMjkwNjI1IDM4LjE1MzkwNjMsMzEuMjkwNjI1IEMzNi40MzIzMzExLDMxLjI5MDYyNSAzNS4wMzY3MTg4LDMyLjY4NjIzNzQgMzUuMDM2NzE4OCwzNC40MDc4MTI1IFoiIGlkPSLot6/lvoQiIGZpbGw9IiNBQUFBQUEiIGZpbGwtcnVsZT0ibm9uemVybyIgb3BhY2l0eT0iMC41MDExMDI5NDEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIzLjA1NDY4NzUsNDEuNzAzMTI1IEMyMy4wNTQ2ODc1LDQzLjY1MTIyMzIgMjQuNjMzOTMzMSw0NS4yMzA0Njg4IDI2LjU4MjAzMTIsNDUuMjMwNDY4OCBDMjguNTMwMTI5NCw0NS4yMzA0Njg4IDMwLjEwOTM3NSw0My42NTEyMjMyIDMwLjEwOTM3NSw0MS43MDMxMjUgQzMwLjEwOTM3NSwzOS43NTUwMjY4IDI4LjUzMDEyOTQsMzguMTc1NzgxMiAyNi41ODIwMzEyLDM4LjE3NTc4MTIgQzI0LjYzMzkzMzEsMzguMTc1NzgxMiAyMy4wNTQ2ODc1LDM5Ljc1NTAyNjggMjMuMDU0Njg3NSw0MS43MDMxMjUgWiIgaWQ9Iui3r+W+hCIgZmlsbD0iI0FBQUFBQSIgZmlsbC1ydWxlPSJub256ZXJvIiBvcGFjaXR5PSIwLjU5OTM3OTU5NiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOS4zOTkyMTg3NSwzOS40NSBDOS4zOTkyMTg3NSw0MS43Nzg2NTY5IDExLjI4Njk2ODEsNDMuNjY2NDA2MiAxMy42MTU2MjUsNDMuNjY2NDA2MiBDMTUuOTQ0MjgxOSw0My42NjY0MDYyIDE3LjgzMjAzMTMsNDEuNzc4NjU2OSAxNy44MzIwMzEzLDM5LjQ1IEMxNy44MzIwMzEzLDM3LjEyMTM0MzEgMTUuOTQ0MjgxOSwzNS4yMzM1OTM3IDEzLjYxNTYyNSwzNS4yMzM1OTM3IEMxMS4yODY5NjgxLDM1LjIzMzU5MzcgOS4zOTkyMTg3NSwzNy4xMjEzNDMxIDkuMzk5MjE4NzUsMzkuNDUgWiIgaWQ9Iui3r+W+hCIgZmlsbD0iI0FBQUFBQSIgZmlsbC1ydWxlPSJub256ZXJvIiBvcGFjaXR5PSIwLjY5ODY0NDMwMSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMC4zMjY1NjI1LDI3LjU3MTg3NSBDMC4zMjY1NjI1LDI5LjI3MzYzMTUgMS4yMzQ0Mzg3NSwzMC44NDYxMTk0IDIuNzA4MjAzMSwzMS42OTY5OTc2IEM0LjE4MTk2NzQ2LDMyLjU0Nzg3NTkgNS45OTc3MjAwNCwzMi41NDc4NzU5IDcuNDcxNDg0NCwzMS42OTY5OTc2IEM4Ljk0NTI0ODc1LDMwLjg0NjExOTQgOS44NTMxMjUsMjkuMjczNjMxNSA5Ljg1MzEyNSwyNy41NzE4NzUgQzkuODUzMTI1LDI1Ljg3MDExODUgOC45NDUyNDg3NSwyNC4yOTc2MzA2IDcuNDcxNDg0NCwyMy40NDY3NTI0IEM1Ljk5NzcyMDA0LDIyLjU5NTg3NDEgNC4xODE5Njc0NiwyMi41OTU4NzQxIDIuNzA4MjAzMSwyMy40NDY3NTI0IEMxLjIzNDQzODc1LDI0LjI5NzYzMDYgMC4zMjY1NjI1LDI1Ljg3MDExODUgMC4zMjY1NjI1LDI3LjU3MTg3NSBaIiBpZD0i6Lev5b6EIiBmaWxsPSIjQUFBQUFBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIG9wYWNpdHk9IjAuODAyMjI4ODYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuMDI4MTI1LDEzLjM0NzY1NjIgQzMuMDI4MTI1LDE1LjIzODkzMSA0LjAzNzEwODAyLDE2Ljk4NjU0MDkgNS42NzQ5OTk5OCwxNy45MzIxNzgzIEM3LjMxMjg5MTk0LDE4Ljg3NzgxNTcgOS4zMzA4NTgwNiwxOC44Nzc4MTU3IDEwLjk2ODc1LDE3LjkzMjE3ODMgQzEyLjYwNjY0MiwxNi45ODY1NDA5IDEzLjYxNTYyNSwxNS4yMzg5MzEgMTMuNjE1NjI1LDEzLjM0NzY1NjIgQzEzLjYxNTYyNSwxMC40MjM5OTg5IDExLjI0NTUzMjQsOC4wNTM5MDYyNSA4LjMyMTg3NSw4LjA1MzkwNjI1IEM1LjM5ODIxNzYxLDguMDUzOTA2MjUgMy4wMjgxMjUsMTAuNDIzOTk4OSAzLjAyODEyNSwxMy4zNDc2NTYyIFoiIGlkPSLot6/lvoQiIGZpbGw9IiNBQUFBQUEiIGZpbGwtcnVsZT0ibm9uemVybyIgb3BhY2l0eT0iMC45MDE2NzczOSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuNDIxODc1LDYuMjg3NSBDMTcuNDIxODc1LDkuMzQ3MDcxMjIgMTkuOTAyMTQ3NSwxMS44MjczNDM4IDIyLjk2MTcxODcsMTEuODI3MzQzOCBDMjYuMDIxMjksMTEuODI3MzQzOCAyOC41MDE1NjI1LDkuMzQ3MDcxMjIgMjguNTAxNTYyNSw2LjI4NzUgQzI4LjUwMTU2MjUsMy4yMjc5Mjg3OCAyNi4wMjEyOSwwLjc0NzY1NjI1IDIyLjk2MTcxODcsMC43NDc2NTYyNSBDMTkuOTAyMTQ3NSwwLjc0NzY1NjI1IDE3LjQyMTg3NSwzLjIyNzkyODc4IDE3LjQyMTg3NSw2LjI4NzUgWiIgaWQ9Iui3r+W+hCIgZmlsbD0iI0FBQUFBQSIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K) no-repeat;
background-size: 100%;
} }
.weui-loading_toast .weui-toast__content { .weui-loading_toast .weui-toast__content {
...@@ -43,7 +45,8 @@ ...@@ -43,7 +45,8 @@
.weui-toast { .weui-toast {
//width: 6em !important; //width: 6em !important;
min-width: 6em; min-width: 60px;
width: 65px !important;
max-width: 14em; max-width: 14em;
min-height: 3em !important; min-height: 3em !important;
top: 38% !important; top: 38% !important;
...@@ -65,13 +68,14 @@ ...@@ -65,13 +68,14 @@
} }
.weui-icon_toast.weui-loading { .weui-icon_toast.weui-loading {
width: 32px !important; width: 34px !important;
height: 32px !important; height: 34px !important;
} }
.weui-toast__content { .weui-toast__content {
//margin: 0 0 30px !important; font-size: 12px !important;
font-size: 14px !important; font-weight: 500;
margin: 10px 0 !important;
} }
.weui-toast_text .weui-toast__content { .weui-toast_text .weui-toast__content {
...@@ -121,6 +125,7 @@ ...@@ -121,6 +125,7 @@
} }
.weui-dialog { .weui-dialog {
height: fit-content;
width: 70% !important; width: 70% !important;
max-width: 260px !important; max-width: 260px !important;
border-radius: 10px !important; border-radius: 10px !important;
......
packages/components/Confirm/confirm.vue 0 → 100644
View file @ 658e001d
/**
* @Author think
* @Date 9/2/21 5:19 PM
*/
<template>
<div v-show="showValue" class="modal-backdrop" >
<section class="h-confirm">
<div v-if="!!title" class="confirm_hd">
<strong class="confirm__title">{{ title }}</strong>
</div>
<template v-if="showContent">
<div class="confirm__bd">
<slot><div v-html="content"/></slot>
</div>
</template>
<div class="confirm__ft vue-1px-t">
<a v-if="showCancelButton" href="javascript:;" class="confirm__btn confirm__btn_default" @click="_onCancel">{{ cancelText }}</a>
<a v-if="showConfirmButton" href="javascript:;" class="confirm__btn" @click="_onConfirm">{{ confirmText }}</a>
</div>
</section>
</div>
</template>
<script>
export default {
name: 'Confirm',
props: {
value: {
type: Boolean,
default: false,
},
title: {
type: String,
default: null,
},
content: {
type: String,
default: null,
},
showContent: {
type: Boolean,
default: true,
},
confirmText: {
type: String,
default: '确定',
},
cancelText: {
type: String,
default: '取消',
},
showCancelButton: {
type: Boolean,
default: true,
},
showConfirmButton: {
type: Boolean,
default: true,
},
},
data () {
return {
showValue: false,
}
},
watch: {
value (val) {
this.showValue = val
},
showValue (val) {
this.$emit('input', val)
this.$emit('on-show') // emit just after msg is cleared
},
},
created () {
if (this.value) {
this.showValue = this.value
}
},
methods: {
_onConfirm () {
let vm = this
vm.$emit('on-confirm')
this.showValue = false
},
_onCancel () {
let vm = this
vm.$emit('on-cancel')
vm.showValue = false
},
},
}
</script>
<style scoped lang="less">
.modal-backdrop{
z-index: 9999;
}
.h-confirm{
max-width: 80vw;
width: 75vw;
height: auto;
margin: auto;
background-color: #fff;
text-align: center;
border-radius: 8px;
.confirm_hd{
padding: 1.5em 1.6em .5em;
.confirm__title{
font-size: 16px;
}
}
.confirm__bd{
padding: 0 1.6em .8em;
min-height: 10.667vw;
font-size: 14px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #999;
}
.confirm__ft{
display: flex;
position: relative;
line-height: 44px;
font-size: 16px
}
}
</style>
packages/components/Confirm/index.js 0 → 100644
View file @ 658e001d
import ConfirmComponent from './confirm'
import Vue from 'vue'
import elementUtil from '../../common/scripts/elementUtil'
let $vm
const mergeOptions = function ($vm, options) {
const defaults = {}
for (let i in $vm.$options.props) {
if (i !== 'value') {
defaults[i] = $vm.$options.props[i].default
}
}
const _options = Object.assign({}, defaults, options)
for (let i in _options) {
$vm[i] = _options[i]
}
}
const confirm = {
install () {
elementUtil.createElement('hls-confirm')
$vm = new Vue(ConfirmComponent)
$vm.$mount('[hls-confirm]')
},
confirmShow (options) {
this.install()
setTimeout(() => {
if (typeof options === 'object') {
mergeOptions($vm, options)
}
if (typeof options === 'object' && (options.onShow || options.onHide)) {
options.onShow && options.onShow()
}
this.$watcher && this.$watcher()
this.$watcher = $vm.$watch('showValue', (val) => {
if (!val && options && options.onHide) {
options.onHide()
}
if (val === false) {
document.body.removeChild($vm.$el)
}
})
$vm.$off('on-cancel')
$vm.$off('on-confirm')
$vm.$on('on-cancel', () => {
options && options.onCancel && options.onCancel()
})
$vm.$on('on-confirm', msg => {
options && options.onConfirm && options.onConfirm(msg)
})
$vm.showValue = true
}, 100)
},
confirmHide () {
$vm.showValue = false
document.body.removeChild($vm.$el)
},
}
export default confirm
packages/components/HContent/index.vue
View file @ 658e001d
...@@ -29,9 +29,9 @@ export default { ...@@ -29,9 +29,9 @@ export default {
} }
}, },
update () { update () {
if (this.calContent) { // if (this.calContent) {
this.resizeHeight() // this.resizeHeight()
} // }
}, },
methods: { methods: {
getHeaderHeight () { getHeaderHeight () {
...@@ -40,19 +40,22 @@ export default { ...@@ -40,19 +40,22 @@ export default {
let headerHeight = 0 let headerHeight = 0
do { do {
if ($el) { if ($el) {
let elHeight = window.getComputedStyle($el).height // let elHeight = window.getComputedStyle($el).offsetHeight
let part = /^\d+(\.\d+)?px$/ headerHeight += $el.offsetHeight
/* let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) { if (elHeight && part.test(elHeight)) {
headerHeight += Number(elHeight.replace('px', '')) headerHeight += Number(elHeight.replace('px', ''))
} } else {
let paddingTopHeight = window.getComputedStyle($el).paddingTop headerHeight = elHeight
} */
/* let paddingTopHeight = window.getComputedStyle($el).paddingTop
let paddingBottomHeight = window.getComputedStyle($el).paddingBottom let paddingBottomHeight = window.getComputedStyle($el).paddingBottom
if (paddingTopHeight && part.test(paddingTopHeight)) { if (paddingTopHeight && part.test(paddingTopHeight)) {
headerHeight += Number(paddingTopHeight.replace('px', '')) headerHeight += Number(paddingTopHeight.replace('px', ''))
} }
if (paddingBottomHeight && part.test(paddingBottomHeight)) { if (paddingBottomHeight && part.test(paddingBottomHeight)) {
headerHeight += Number(paddingBottomHeight.replace('px', '')) headerHeight += Number(paddingBottomHeight.replace('px', ''))
} } */
$el = $el.previousElementSibling $el = $el.previousElementSibling
} }
} while ($el) } while ($el)
...@@ -67,28 +70,31 @@ export default { ...@@ -67,28 +70,31 @@ export default {
if (nextElement) { if (nextElement) {
let position = window.getComputedStyle(nextElement).position let position = window.getComputedStyle(nextElement).position
if (position !== 'fixed') { if (position !== 'fixed') {
let elHeight = window.getComputedStyle(nextElement).height // let elHeight = window.getComputedStyle(nextElement).offsetHeight
let part = /^\d+(\.\d+)?px$/ nextHeight += nextElement.offsetHeight
/* let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) { if (elHeight && part.test(elHeight)) {
nextHeight += Number(elHeight.replace('px', '')) nextHeight += Number(elHeight.replace('px', ''))
} } else {
//let paddingTopHeight = window.getComputedStyle(nextElement).paddingTop nextHeight = elHeight
//let paddingBottomHeight = window.getComputedStyle(nextElement).paddingBottom } */
//if (paddingTopHeight && part.test(paddingTopHeight)) { // let paddingTopHeight = window.getComputedStyle(nextElement).paddingTop
// let paddingBottomHeight = window.getComputedStyle(nextElement).paddingBottom
// if (paddingTopHeight && part.test(paddingTopHeight)) {
// nextHeight += Number(paddingTopHeight.replace('px', '')) // nextHeight += Number(paddingTopHeight.replace('px', ''))
//} // }
//if (paddingBottomHeight && part.test(paddingBottomHeight)) { // if (paddingBottomHeight && part.test(paddingBottomHeight)) {
// nextHeight += Number(paddingBottomHeight.replace('px', '')) // nextHeight += Number(paddingBottomHeight.replace('px', ''))
//} // }
} }
nextElement = nextElement.nextElementSibling nextElement = nextElement.nextElementSibling
} }
} while (nextElement) } while (nextElement)
return nextHeight return nextHeight
}, },
resizeHeight () { async resizeHeight () {
let vm = this let vm = this
this.$nextTick(() => { await this.$nextTick()
const headerHeight = vm.getHeaderHeight() const headerHeight = vm.getHeaderHeight()
const nextHeight = vm.getNextElementHeight() const nextHeight = vm.getNextElementHeight()
let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
...@@ -101,7 +107,6 @@ export default { ...@@ -101,7 +107,6 @@ export default {
} }
let content = vm.$el let content = vm.$el
content.style.height = windowHeight - headerHeight - nextHeight + 'px' content.style.height = windowHeight - headerHeight - nextHeight + 'px'
})
}, },
}, },
} }
......
packages/components/Scroll/index.vue
View file @ 658e001d
...@@ -5,8 +5,7 @@ ...@@ -5,8 +5,7 @@
*/ */
<template> <template>
<div ref="scroll" :class="[c(),{'h-ios': isIos}]" class="content scroll-content"> <div ref="scroll" :class="[c(),{'h-ios': isIos}]">
<div :class="c('__wrapper')"> <div :class="c('__wrapper')">
<div ref="scrollContent" class="scrollContent"> <div ref="scrollContent" class="scrollContent">
<slot/> <slot/>
...@@ -224,7 +223,7 @@ export default { ...@@ -224,7 +223,7 @@ export default {
this.fullScreen && detectOS() === 'ios' && (this.isIos = true) this.fullScreen && detectOS() === 'ios' && (this.isIos = true)
}, },
async mounted () { async mounted () {
this.pullDownInitTop = parseInt(this.$refs.pulldown && getComputedStyle(this.$refs.pulldown).top) || -60 this.pullDownInitTop = parseInt(this.$refs.pulldown && getComputedStyle(this.$refs.pulldown).top) || -10
await this.$nextTick() await this.$nextTick()
this.initScroll() this.initScroll()
...@@ -242,19 +241,20 @@ export default { ...@@ -242,19 +241,20 @@ export default {
let headerHeight = 0 let headerHeight = 0
do { do {
if ($el) { if ($el) {
let elHeight = window.getComputedStyle($el).height headerHeight += vm.$el.offsetHeight
/* let elHeight = window.getComputedStyle($el).height
let part = /^\d+(\.\d+)?px$/ let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) { if (elHeight && part.test(elHeight)) {
headerHeight += Number(elHeight.replace('px', '')) headerHeight += Number(elHeight.replace('px', ''))
} }
let paddingTopHeight = window.getComputedStyle($el).paddingTop let marginTopHeight = window.getComputedStyle($el).marginTop
let paddingBottomHeight = window.getComputedStyle($el).paddingBottom let marginBottomHeight = window.getComputedStyle($el).marginBottom
if (paddingTopHeight && part.test(paddingTopHeight)) { if (marginTopHeight && part.test(marginTopHeight)) {
headerHeight += Number(paddingTopHeight.replace('px', '')) headerHeight += Number(marginTopHeight.replace('px', ''))
}
if (paddingBottomHeight && part.test(paddingBottomHeight)) {
headerHeight += Number(paddingBottomHeight.replace('px', ''))
} }
if (marginBottomHeight && part.test(marginBottomHeight)) {
headerHeight += Number(marginBottomHeight.replace('px', ''))
} */
$el = $el.previousElementSibling $el = $el.previousElementSibling
} }
} while ($el) } while ($el)
...@@ -268,20 +268,21 @@ export default { ...@@ -268,20 +268,21 @@ export default {
do { do {
if (nextElement) { if (nextElement) {
let position = window.getComputedStyle(nextElement).position let position = window.getComputedStyle(nextElement).position
if (position === 'fixed') { if (position !== 'fixed') {
let elHeight = window.getComputedStyle(nextElement).height nextHeight += vm.$el.offsetHeight
/* let elHeight = window.getComputedStyle(nextElement).height
let part = /^\d+(\.\d+)?px$/ let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) { if (elHeight && part.test(elHeight)) {
nextHeight += Number(elHeight.replace('px', '')) nextHeight += Number(elHeight.replace('px', ''))
} }
let paddingTopHeight = window.getComputedStyle(nextElement).paddingTop let marginTopHeight = window.getComputedStyle(nextElement).marginTop
let paddingBottomHeight = window.getComputedStyle(nextElement).paddingBottom let marginBottomHeight = window.getComputedStyle(nextElement).marginBottom
if (paddingTopHeight && part.test(paddingTopHeight)) { if (marginTopHeight && part.test(marginTopHeight)) {
nextHeight += Number(paddingTopHeight.replace('px', '')) nextHeight += Number(marginTopHeight.replace('px', ''))
}
if (paddingBottomHeight && part.test(paddingBottomHeight)) {
nextHeight += Number(paddingBottomHeight.replace('px', ''))
} }
if (marginBottomHeight && part.test(marginBottomHeight)) {
nextHeight += Number(marginBottomHeight.replace('px', ''))
} */
} }
nextElement = nextElement.nextElementSibling nextElement = nextElement.nextElementSibling
} }
...@@ -292,13 +293,14 @@ export default { ...@@ -292,13 +293,14 @@ export default {
initScroll () { initScroll () {
let vm = this let vm = this
if (!this.$refs.scroll) return if (!this.$refs.scroll) return
const headerHeight = vm.getHeaderHeight()
const nextHeight = vm.getNextElementHeight()
this.$refs.scroll.style.height = `${this.$refs.scroll.getBoundingClientRect().height - headerHeight - nextHeight}px`
// 设置scrollContent的最小高，实现高度不足时也有回弹效果 // 设置scrollContent的最小高，实现高度不足时也有回弹效果
if (this.$refs.scrollContent) { if (this.$refs.scrollContent) {
const headerHeight = vm.getHeaderHeight()
// const nextHeight = vm.getNextElementHeight() // const nextHeight = vm.getNextElementHeight()
this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height + 1}px` this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height}px`
this.$refs.scrollContent.style.paddingTop = `${headerHeight}px` // this.$refs.scrollContent.style.paddingTop = `${headerHeight}px`
if (vm.hasFoot.footFlag) { if (vm.hasFoot.footFlag) {
let height = vm.hasFoot.height || 88 let height = vm.hasFoot.height || 88
// this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px` // this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px`
...@@ -473,8 +475,8 @@ export default { ...@@ -473,8 +475,8 @@ export default {
width 100% width 100%
overflow hidden !important overflow hidden !important
box-sizing border-box box-sizing border-box
position absolute position relative
top 0 //top 0
height 100% height 100%
&__wrapper { &__wrapper {
...@@ -505,6 +507,7 @@ export default { ...@@ -505,6 +507,7 @@ export default {
position absolute position absolute
left 0 left 0
top 0; /*no*/ top 0; /*no*/
z-index -5
width 100% width 100%
display flex display flex
justify-content center justify-content center
...@@ -535,7 +538,7 @@ export default { ...@@ -535,7 +538,7 @@ export default {
.platform-ios{ .platform-ios{
.vue-better-scroll{ .vue-better-scroll{
&__pulldown { &__pulldown {
padding-top:4px //padding-top:4px
} }
} }
.has-footer { .has-footer {
...@@ -549,7 +552,7 @@ export default { ...@@ -549,7 +552,7 @@ export default {
.platform-ios { .platform-ios {
.vue-better-scroll{ .vue-better-scroll{
&__pulldown { &__pulldown {
padding-top:24px //padding-top:24px
} }
} }
.has-footer { .has-footer {
...@@ -565,7 +568,7 @@ export default { ...@@ -565,7 +568,7 @@ export default {
.platform-ios { .platform-ios {
.vue-better-scroll{ .vue-better-scroll{
&__pulldown { &__pulldown {
padding-top:24px //padding-top:24px
} }
} }
.has-footer { .has-footer {
......
packages/components/Scroll/index.vue.bak 0 → 100755
View file @ 658e001d
/**
* better-scroll vue封装
* @Author momoko
* @Date 2018/05
*/
<template>
<div ref="scroll" :class="[c(),{'h-ios': isIos}]" class="content scroll-content">
<div :class="c('__wrapper')">
<div ref="scrollContent" class="scrollContent">
<slot/>
</div>
<slot
:pullUp="pullUp"
:pullUpNow="pullUpNow"
name="pullup"
>
<div v-if="pullUp" :class="c('__pullup')">
<div v-if="!pullUpNow">
<span>{{ pullUpTxt }}</span>
</div>
<div v-else>
<Loading/>
</div>
</div>
</slot>
</div>
<slot
:pullDown="pullDown"
:pullDownStyle="pullDownStyle"
:pullDownBefore="pullDownBefore"
:pullDownNow="pullDownNow"
:bubbleY="bubbleY"
name="pulldown"
>
<div
v-if="pullDown" ref="pulldown" :style="pullDownStyle" :class="c('__pulldown')">
<div v-if="pullDownBefore" :class="c('__pulldown__before')">
<Bubble :y="bubbleY"/>
</div>
<div v-else :class="c('__pulldown__after')">
<div v-if="pullDownNow">
<Loading/>
</div>
<div v-else><span>{{ pullDownTxt }}</span></div>
</div>
</div>
</slot>
</div>
</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
import Loading from './Loading'
import Bubble from './Bubble'
import mixin from './mixins'
import {timeout} from './utils'
import { detectOS } from '../../common/utils/index'
export default {
name: 'Scroll',
components: {
Loading,
Bubble,
},
mixins: [mixin],
props: {
probeType: {
// 滚动事件监听类型
type: Number,
default: 1,
},
click: {
// 开启点击事件代理
type: Boolean,
default: true,
},
listenScroll: {
// 监听滚动
type: Boolean,
default: false,
},
listenBeforeScrollStart: {
// 监听滚动开始前
type: Boolean,
default: false,
},
scrollX: {
// 开启X轴滚动
type: Boolean,
default: false,
},
scrollY: {
// 开启Y轴滚动
type: Boolean,
default: true,
},
scrollbar: {
// 开启滚动条
type: null,
default: false,
},
pullDown: {
// 启用下拉刷新
type: Boolean,
default: false,
},
pullDownConfig: {
// 下拉刷新配置
type: Object,
default: () => ({
threshold: 45, // 触发 pullingDown 的距离
stop: 30, // pullingDown 正在刷新 hold 时的距离
txt: '刷新成功',
}),
},
pullUp: {
// 启用上拉加载
type: Boolean,
default: false,
},
pullUpConfig: {
// 上拉加载配置
type: Object,
default: () => ({
threshold: 100, // 提前触发 pullingUp 的距离
txt: {more: '上拉加载', noMore: '— 我是有底线的 —'},
}),
},
startY: {
// 起始Y位置
type: Number,
default: 0,
},
bounce: {
// 回弹效果
type: Boolean,
default: true,
},
bounceTime: {
// 回弹时间
type: Number,
default: 500,
},
preventDefaultException: {
// 不阻止默认行为
type: Object,
default: () => ({
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/,
}),
},
autoUpdate: {
// 自动刷新高度:适用于简单场景，复杂场景请使用updateData/refreshData
type: Boolean,
default: false,
},
updateData: {
// 引起更新上拉/下拉加载状态的数据（下拉刷新/上拉加载相关的数据）
type: Array,
default: null,
},
refreshData: {
// 引起刷新高度的数据（不包含 updateData 内的数据）
type: Array,
default: null,
},
hasFoot: {
// 底部按钮的配置
type: Object,
default: () => ({
footFlag: false, // 提前触发 pullingUp 的距离
height: 44,
}),
},
},
data () {
return {
pullDownBefore: true, // 下拉之前
pullDownNow: false, // 正在下拉
pullDownStyle: '', // 下拉样式
pullUpNow: false, // 正在上拉
pullUpFinally: false, // true表示到了上拉加载到了最底部
isRebounding: false, // 正在回弹
bubbleY: 0, // 气泡y坐标,
isIos: false,
fullScreen: true,
fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
winHeight: window.innerHeight,
winWidth: window.innerWidth,
}
},
computed: {
// 下拉的文本
pullDownTxt () {
return this.pullDownConfig && this.pullDownConfig.txt
},
// 上拉的文本
pullUpTxt () {
const moreTxt = this.pullUpConfig && this.pullUpConfig.txt && this.pullUpConfig.txt.more
const noMoreTxt = this.pullUpConfig && this.pullUpConfig.txt && this.pullUpConfig.txt.noMore
return this.pullUpFinally ? noMoreTxt : moreTxt
},
},
watch: {
updateData () {
this.update()
},
async refreshData () {
if (this.updateState) return
await this.$nextTick()
this.refresh()
},
},
created () {
this.fullScreen && detectOS() === 'ios' && (this.isIos = true)
},
async mounted () {
this.pullDownInitTop = parseInt(this.$refs.pulldown && getComputedStyle(this.$refs.pulldown).top) || -60
await this.$nextTick()
this.initScroll()
// 自动刷新高度：深监视 $data，发生改变时更新高度
this.autoUpdate && this.$parent && this.$parent.$data && this.$watch(() => this.$parent.$data, (val) => {
this.update()
}, {
deep: true,
})
},
methods: {
getHeaderHeight () {
let vm = this
let $el = vm.$el.previousElementSibling
let headerHeight = 0
do {
if ($el) {
let elHeight = window.getComputedStyle($el).height
let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) {
headerHeight += Number(elHeight.replace('px', ''))
}
let paddingTopHeight = window.getComputedStyle($el).paddingTop
let paddingBottomHeight = window.getComputedStyle($el).paddingBottom
if (paddingTopHeight && part.test(paddingTopHeight)) {
headerHeight += Number(paddingTopHeight.replace('px', ''))
}
if (paddingBottomHeight && part.test(paddingBottomHeight)) {
headerHeight += Number(paddingBottomHeight.replace('px', ''))
}
$el = $el.previousElementSibling
}
} while ($el)
return headerHeight
},
getNextElementHeight () {
let vm = this
let nextElement = vm.$el.nextElementSibling
let nextHeight = 0
do {
if (nextElement) {
let position = window.getComputedStyle(nextElement).position
if (position === 'fixed') {
let elHeight = window.getComputedStyle(nextElement).height
let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) {
nextHeight += Number(elHeight.replace('px', ''))
}
let paddingTopHeight = window.getComputedStyle(nextElement).paddingTop
let paddingBottomHeight = window.getComputedStyle(nextElement).paddingBottom
if (paddingTopHeight && part.test(paddingTopHeight)) {
nextHeight += Number(paddingTopHeight.replace('px', ''))
}
if (paddingBottomHeight && part.test(paddingBottomHeight)) {
nextHeight += Number(paddingBottomHeight.replace('px', ''))
}
}
nextElement = nextElement.nextElementSibling
}
} while (nextElement)
return nextHeight
},
// 初始化scroll
initScroll () {
let vm = this
if (!this.$refs.scroll) return
// 设置scrollContent的最小高，实现高度不足时也有回弹效果
if (this.$refs.scrollContent) {
const headerHeight = vm.getHeaderHeight()
// const nextHeight = vm.getNextElementHeight()
this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height + 1}px`
this.$refs.scrollContent.style.paddingTop = `${headerHeight}px`
if (vm.hasFoot.footFlag) {
let height = vm.hasFoot.height || 88
// this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px`
this.$refs.scrollContent.style.paddingBottom = height + 'px'
}
}
const options = {
probeType: this.probeType,
click: this.click,
scrollX: this.scrollX,
scrollY: this.scrollY,
scrollbar: this.scrollbar,
pullDownRefresh: this.pullDown && this.pullDownConfig,
pullUpLoad: this.pullUp && this.pullUpConfig,
startY: this.startY,
bounce: this.bounce,
bounceTime: this.bounceTime,
preventDefaultException: this.preventDefaultException,
}
this.scroll = new BScroll(this.$refs.scroll, options)
this.listenScroll &&
this.scroll.on('scroll', pos => {
this.$emit('scroll', pos)
})
this.listenBeforeScroll &&
this.scroll.on('beforeScrollStart', () => {
this.$emit('beforeScrollStart')
})
this.pullDown && this._initPullDown()
this.pullUp && this._initPullUp()
},
// 初始化下拉刷新
_initPullDown () {
let vm = this
this.scroll.on('pullingDown', () => {
// if (this.pullUpFinally) {
// this.pullDownBefore = false
// vm.scroll.closePullDown()
// this.pullDownNow = false
// } else {
this.pullDownBefore = false
this.pullDownNow = true
setTimeout(function () {
vm.$emit('pullingDown')
vm.scroll.closePullDown() // 防止在 bounce 前二次触发
}, 150)
// }
})
this.scroll.on('scroll', pos => {
if (!this.pullDown || pos.y < 0) return
const posY = Math.floor(pos.y) // 滚动的y轴位置：Number
if (this.pullDownBefore) {
this.bubbleY = Math.max(0, posY + this.pullDownInitTop)
this.pullDownStyle = `transform: translateY(${Math.min(posY, -this.pullDownInitTop)}px)`
} else {
this.bubbleY = 0
}
if (this.isRebounding) {
this.pullDownStyle = `transform: translateY(${Math.min(posY, this.pullDownConfig.stop)}px)`
}
})
},
// 初始化上拉加载
_initPullUp () {
this.scroll.on('pullingUp', () => {
let vm = this
if (this.pullUpFinally) {
this.scroll.finishPullUp()
} else {
vm.pullUpNow = true
setTimeout(function () {
vm.$emit('pullingUp')
}, 100)
}
})
},
// 关闭滚动
disable () {
this.scroll && this.scroll.disable()
},
// 开启滚动
enable () {
this.scroll && this.scroll.enable()
},
// 销毁滚动示例
destroy () {
this.scroll && this.scroll.destroy()
},
// 刷新滚动高度
refresh () {
this.scroll && this.scroll.refresh()
},
// 更新加载状态，下拉/下拉成功后使用
async update (final) {
if (this.updateState) return
this.updateState = true // 正在update状态
if (this.pullDown && this.pullDownNow) {
// 下拉刷新触发成功后
this.pullDownNow = false
await timeout(this.bounceTime / 2) // 刷新成功hold
this.isRebounding = true
this.scroll.finishPullDown() // 开始回弹
await timeout(this.bounceTime)
this.pullDownBefore = true
this.isRebounding = false
this.scroll.openPullDown(this.pullDownConfig)
this.pullUpFinally = false
} else if (this.pullUp && this.pullUpNow) {
// 上拉加载触发成功后
this.pullUpNow = false
this.scroll.finishPullUp()
}
typeof final !== 'undefined' && (this.pullUpFinally = !!final)
await this.$nextTick()
this.refresh()
this.updateState = false
},
/**
* 每次滚动多少距离
* @param {Number} x x轴位置
* @param {Number} y y轴位置
* @param {Number} time 滚动时间
* @return {Void}
*/
scrollBy (x = 0, y = 0, time = this.bounceTime) {
this.scroll && this.scroll.scrollTo((this.scroll.absStartX - x), (this.scroll.absStartY - y), time)
},
/**
* 滚动到指定位置
* @param {Number} x x轴位置
* @param {Number} y y轴位置
* @param {Number} time 滚动时间
* @return {Void}
*/
scrollTo (x = 0, y = 0, time = this.bounceTime) {
this.scroll && this.scroll.scrollTo(x, y, time)
},
// 滚动到元素
scrollToElement () {
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
},
// 滚动到顶部
scrollToTop () {
this.scroll && this.scrollTo(0, 0)
},
// 滚动到底部
scrollToBottom () {
this.scroll && this.scrollTo(0, this.scroll.maxScrollY)
},
},
}
</script>
<style lang="stylus">
//$ = vue-better-scroll
.vue-better-scroll {
width 100%
overflow hidden !important
box-sizing border-box
position absolute
top 0
height 100%
&__wrapper {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
-webkit-transform-origin: left top;
transform-origin: left top;
padding-bottom: 20px
}
&__pullup {
width 100%
height 25px
display flex
justify-content center
align-items center
font-size 14px
color rgb(153, 153, 153)
}
&__pulldown {
position absolute
left 0
top 0; /*no*/
width 100%
display flex
justify-content center
align-items center
transition all
font-size 14px
color rgb(153, 153, 153)
&__before {
display flex
}
&__after {
width 100%
height 40px; /*no*/
display flex
justify-content center
align-items center
color #666
}
}
}
.has-footer {
.vue-better-scroll__wrapper {
padding-bottom: 50px;
}
}
.platform-ios{
.vue-better-scroll{
&__pulldown {
padding-top:4px
}
}
.has-footer {
.vue-better-scroll__wrapper {
padding-bottom: 50px;
}
}
}
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
.vue-better-scroll{
&__pulldown {
padding-top:24px
}
}
.has-footer {
.vue-better-scroll__wrapper {
padding-bottom: 90px;
}
}
}
}
// iPhoneX Max适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
.vue-better-scroll{
&__pulldown {
padding-top:24px
}
}
.has-footer {
.vue-better-scroll__wrapper {
padding-bottom: 90px;
}
}
}
}
</style>
packages/index.js
View file @ 658e001d
...@@ -42,7 +42,7 @@ import NumberKeyboardPlugin from './components/NumberKeyboard/index' ...@@ -42,7 +42,7 @@ import NumberKeyboardPlugin from './components/NumberKeyboard/index'
// styles // styles
import appStyle from './common/styles/app.core.less' import appStyle from './common/styles/app.core.less'
import {showLoading, hideLoading, showLongTop, showLongCenter, showLongBottom, showSuccess, showError, showConfirm, showPopup, showActionSheet, showTime, showBigPicture, selectList, showNumberKeyboard, showNotify} from './common/scripts/hlsPopup' import {showLoading, hideLoading, showLongTop, showLongCenter, showLongBottom, showSuccess, showError, showConfirm, showConfirmVux, showPopup, showActionSheet, showTime, showBigPicture, selectList, showNumberKeyboard, showNotify} from './common/scripts/hlsPopup'
import elementUtil from './common/scripts/elementUtil' import elementUtil from './common/scripts/elementUtil'
import filter from './common/scripts/filter' import filter from './common/scripts/filter'
import directives from './common/scripts/directives' import directives from './common/scripts/directives'
...@@ -59,6 +59,7 @@ const hlsPopup = { ...@@ -59,6 +59,7 @@ const hlsPopup = {
showSuccess, showSuccess,
showError, showError,
showConfirm, showConfirm,
showConfirmVux,
showPopup, showPopup,
showActionSheet, showActionSheet,
showTime, showTime,
......
src/App.vue
View file @ 658e001d
...@@ -68,7 +68,6 @@ export default { ...@@ -68,7 +68,6 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "../packages/common/styles/publicStyle";
html, body, #app { html, body, #app {
height: 100%; height: 100%;
width: 100%; width: 100%;
......
src/pages/hlsPopup.vue
View file @ 658e001d
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
<h-button class="button-class" type="primary" @click.native="showSuccess">showSuccess</h-button> <h-button class="button-class" type="primary" @click.native="showSuccess">showSuccess</h-button>
<h-button class="button-class" type="primary" @click.native="showError">showError</h-button> <h-button class="button-class" type="primary" @click.native="showError">showError</h-button>
<h-button class="button-class" type="primary" @click.native="showConfirm">showConfirm</h-button> <h-button class="button-class" type="primary" @click.native="showConfirm">showConfirm</h-button>
<h-button class="button-class" type="primary" @click.native="showConfirmVux">showConfirmVux</h-button>
<h-button class="button-class" type="primary" @click.native="showPopup">showPopup</h-button> <h-button class="button-class" type="primary" @click.native="showPopup">showPopup</h-button>
<h-button class="button-class" type="primary" @click.native="showActionSheet">showActionSheet</h-button> <h-button class="button-class" type="primary" @click.native="showActionSheet">showActionSheet</h-button>
<h-button class="button-class" type="primary" @click.native="showActionSheetButton">showActionSheet 区分按钮颜色 <h-button class="button-class" type="primary" @click.native="showActionSheetButton">showActionSheet 区分按钮颜色
...@@ -348,7 +349,7 @@ export default { ...@@ -348,7 +349,7 @@ export default {
}).then((modal) => { }).then((modal) => {
this.modal = modal; this.modal = modal;
}) */ }) */
this.$refs.scrollList.update(true) // this.$refs.scrollList.update(true)
}, },
methods: { methods: {
scrollListen (e) { scrollListen (e) {
...@@ -391,7 +392,7 @@ export default { ...@@ -391,7 +392,7 @@ export default {
// console.log(`change: ${i}`) // console.log(`change: ${i}`)
}, },
showLoading () { showLoading () {
this.hlsPopup.showLoading('请稍等!') this.hlsPopup.showLoading('请稍等!', 3000000)
}, },
hideLoading () { hideLoading () {
this.hlsPopup.hideLoading() this.hlsPopup.hideLoading()
...@@ -420,6 +421,15 @@ export default { ...@@ -420,6 +421,15 @@ export default {
}, },
}) })
}, },
showConfirmVux () {
this.hlsPopup.showConfirmVux({
title: '确定退出',
content: '退出后需从新登录',
onConfirm: function (index) {
alert(index)
},
})
},
showPopup () { showPopup () {
this.hlsPopup.showPopup({ this.hlsPopup.showPopup({
title: '确定退出', title: '确定退出',
......
src/pages/home.vue
View file @ 658e001d
...@@ -113,8 +113,8 @@ export default { ...@@ -113,8 +113,8 @@ export default {
height: '', height: '',
decimal: false, decimal: false,
rangeValue: 40, rangeValue: 40,
min: 20, min: 0,
max: 80, max: 100,
step: 10, step: 10,
disabled: false, disabled: false,
disabledOpacity: 0.5, disabledOpacity: 0.5,
......
src/test.html 0 → 100644
View file @ 658e001d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js?callback=callbask">
function queryInfo(){
let obj={
name:'zhangsan',
age:'14'
}
callbask(obj)
}
</script>
<body style="height: 3000px">
<input>
</body>
<script>
function callbask(res){
console.log(res)
}
let input = document.querySelector('input')
let timeid = null
/*input.oninput=function(){
console.log(this.value)
}*/
/*input.oninput=function(){
//todo
if(timeid){
clearTimeout(timeid)
}
timeid = setTimeout(()=>{
//todo
/!*search();
submit()*!/
console.log(this.value)
},500)
}*/
input.oninput=debounce(function(){
console.log(this.value)
},500)
function debounce(fun,await){
let timeid = null
return function () {
if (timeid) {
clearTimeout(timeid)
}
timeid = setTimeout(()=>{
fun.apply(this)
}, await)
}
}
function throttle(fun,await) {
let timeid = null
return function () {
if (!timeid) {
timeid = setTimeout(() => {
fun.apply(this)
timeid=null
}, await)
}
}
}
/*window.onscroll=function(){
console.log('页面滚动')
}*/
let timeOutId=null
/*window.onscroll=function(){
if(!timeOutId){
timeOutId = setTimeout(()=>{
console.log('页面滚动')
timeOutId=null
},500)
}
}*/
window.onscroll=throttle(function(){
console.log('页面滚动')
},500)
let age = Object.freeze()
/* function debounce(func, wait=0) {
let timeid = null;
return function() {
let args = arguments;
if (timeid) {
clearTimeout(timeid);
}
timeid = setTimeout(()=> {
func.apply(this, args);
}, wait);
}
}
function throttle(func, delay) {
let timer = null;
return function() {
var args = arguments;
if (!timer) {
timer = setTimeout(()=> {
func.apply(this, args);
timer = null;
}, delay);
}
}
}*/
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment