Skip to content

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

弹框修改

parent d7a8a4ef
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 16034 additions and 84 deletions
package-lock.json 0 → 100644
View file @ 658e001d
This diff is collapsed.
packages/common/scripts/hlsPopup.js
View file @ 658e001d
......@@ -16,6 +16,8 @@ Vue.use(LoadingPlugin)
Vue.use(DatetimePlugin)
Vue.use(NumberKeyboard)
import confirm from '../../components/Confirm/index'
// Vue.prototype.HlsModal = window.HlsModal = HlsModal
/**
......@@ -130,6 +132,22 @@ export function showError (content = '', time = 2000) {
* @param confirmObject.onConfirm 确定函数
*/
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 = {
title: confirmObject.title || '提示',
content: confirmObject.content || '',
......
packages/common/styles/app.core.less
View file @ 658e001d
......@@ -2,7 +2,7 @@
@import "animate";
@import "variables";
@import "ionic";
@import 'publicStyle';
@import 'public-style';
@import "ionic-public-style";
@import "platform-ios";
@import "platform-iosx";
packages/common/styles/publicStyle.less → packages/common/styles/public-style.less
View file @ 658e001d
......@@ -34,7 +34,9 @@
background: rgba(0, 0, 0, 0.3) !important;
}
.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 {
......@@ -43,7 +45,8 @@
.weui-toast {
//width: 6em !important;
min-width: 6em;
min-width: 60px;
width: 65px !important;
max-width: 14em;
min-height: 3em !important;
top: 38% !important;
......@@ -65,13 +68,14 @@
}
.weui-icon_toast.weui-loading {
width: 32px !important;
height: 32px !important;
width: 34px !important;
height: 34px !important;
}
.weui-toast__content {
//margin: 0 0 30px !important;
font-size: 14px !important;
font-size: 12px !important;
font-weight: 500;
margin: 10px 0 !important;
}
.weui-toast_text .weui-toast__content {
......@@ -121,6 +125,7 @@
}
.weui-dialog {
height: fit-content;
width: 70% !important;
max-width: 260px !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 {
}
},
update () {
if (this.calContent) {
this.resizeHeight()
}
// if (this.calContent) {
// this.resizeHeight()
// }
},
methods: {
getHeaderHeight () {
......@@ -40,19 +40,22 @@ export default {
let headerHeight = 0
do {
if ($el) {
let elHeight = window.getComputedStyle($el).height
let part = /^\d+(\.\d+)?px$/
// let elHeight = window.getComputedStyle($el).offsetHeight
headerHeight += $el.offsetHeight
/* let part = /^\d+(\.\d+)?px$/
if (elHeight && part.test(elHeight)) {
headerHeight += Number(elHeight.replace('px', ''))
}
let paddingTopHeight = window.getComputedStyle($el).paddingTop
} else {
headerHeight = elHeight
} */
/* 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)
......@@ -67,41 +70,43 @@ export default {
if (nextElement) {
let position = window.getComputedStyle(nextElement).position
if (position !== 'fixed') {
let elHeight = window.getComputedStyle(nextElement).height
let part = /^\d+(\.\d+)?px$/
// let elHeight = window.getComputedStyle(nextElement).offsetHeight
nextHeight += nextElement.offsetHeight
/* 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)) {
} else {
nextHeight = elHeight
} */
// 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)) {
// }
// if (paddingBottomHeight && part.test(paddingBottomHeight)) {
// nextHeight += Number(paddingBottomHeight.replace('px', ''))
//}
// }
}
nextElement = nextElement.nextElementSibling
}
} while (nextElement)
return nextHeight
},
resizeHeight () {
async resizeHeight () {
let vm = this
this.$nextTick(() => {
const headerHeight = vm.getHeaderHeight()
const nextHeight = vm.getNextElementHeight()
let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
await this.$nextTick()
const headerHeight = vm.getHeaderHeight()
const nextHeight = vm.getNextElementHeight()
let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
if (windowWidth > windowHeight) {
this.orientation = 'landscape'
} else {
this.orientation = 'portrait'
}
let content = vm.$el
content.style.height = windowHeight - headerHeight - nextHeight + 'px'
})
if (windowWidth > windowHeight) {
this.orientation = 'landscape'
} else {
this.orientation = 'portrait'
}
let content = vm.$el
content.style.height = windowHeight - headerHeight - nextHeight + 'px'
},
},
}
......
packages/components/Scroll/index.vue
View file @ 658e001d
......@@ -5,8 +5,7 @@
*/
<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 ref="scrollContent" class="scrollContent">
<slot/>
......@@ -224,7 +223,7 @@ export default {
this.fullScreen && detectOS() === 'ios' && (this.isIos = true)
},
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()
this.initScroll()
......@@ -242,19 +241,20 @@ export default {
let headerHeight = 0
do {
if ($el) {
let elHeight = window.getComputedStyle($el).height
headerHeight += vm.$el.offsetHeight
/* 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', ''))
let marginTopHeight = window.getComputedStyle($el).marginTop
let marginBottomHeight = window.getComputedStyle($el).marginBottom
if (marginTopHeight && part.test(marginTopHeight)) {
headerHeight += Number(marginTopHeight.replace('px', ''))
}
if (marginBottomHeight && part.test(marginBottomHeight)) {
headerHeight += Number(marginBottomHeight.replace('px', ''))
} */
$el = $el.previousElementSibling
}
} while ($el)
......@@ -268,20 +268,21 @@ export default {
do {
if (nextElement) {
let position = window.getComputedStyle(nextElement).position
if (position === 'fixed') {
let elHeight = window.getComputedStyle(nextElement).height
if (position !== 'fixed') {
nextHeight += vm.$el.offsetHeight
/* 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', ''))
let marginTopHeight = window.getComputedStyle(nextElement).marginTop
let marginBottomHeight = window.getComputedStyle(nextElement).marginBottom
if (marginTopHeight && part.test(marginTopHeight)) {
nextHeight += Number(marginTopHeight.replace('px', ''))
}
if (marginBottomHeight && part.test(marginBottomHeight)) {
nextHeight += Number(marginBottomHeight.replace('px', ''))
} */
}
nextElement = nextElement.nextElementSibling
}
......@@ -292,13 +293,14 @@ export default {
initScroll () {
let vm = this
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的最小高，实现高度不足时也有回弹效果
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`
this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height}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`
......@@ -473,8 +475,8 @@ export default {
width 100%
overflow hidden !important
box-sizing border-box
position absolute
top 0
position relative
//top 0
height 100%
&__wrapper {
......@@ -505,6 +507,7 @@ export default {
position absolute
left 0
top 0; /*no*/
z-index -5
width 100%
display flex
justify-content center
......@@ -532,24 +535,24 @@ export default {
padding-bottom: 50px;
}
}
.platform-ios{
.vue-better-scroll{
&__pulldown {
padding-top:4px
}
}
.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
//padding-top:24px
}
}
.has-footer {
......@@ -565,7 +568,7 @@ export default {
.platform-ios {
.vue-better-scroll{
&__pulldown {
padding-top:24px
//padding-top:24px
}
}
.has-footer {
......
packages/components/Scroll/index.vue.bak 0 → 100755
View file @ 658e001d
This diff is collapsed.
packages/index.js
View file @ 658e001d
......@@ -42,7 +42,7 @@ import NumberKeyboardPlugin from './components/NumberKeyboard/index'
// styles
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 filter from './common/scripts/filter'
import directives from './common/scripts/directives'
......@@ -59,6 +59,7 @@ const hlsPopup = {
showSuccess,
showError,
showConfirm,
showConfirmVux,
showPopup,
showActionSheet,
showTime,
......
src/App.vue
View file @ 658e001d
......@@ -68,7 +68,6 @@ export default {
</script>
<style lang="less">
@import "../packages/common/styles/publicStyle";
html, body, #app {
height: 100%;
width: 100%;
......
src/pages/hlsPopup.vue
View file @ 658e001d
......@@ -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="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="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="showActionSheet">showActionSheet</h-button>
<h-button class="button-class" type="primary" @click.native="showActionSheetButton">showActionSheet 区分按钮颜色
......@@ -348,7 +349,7 @@ export default {
}).then((modal) => {
this.modal = modal;
}) */
this.$refs.scrollList.update(true)
// this.$refs.scrollList.update(true)
},
methods: {
scrollListen (e) {
......@@ -391,7 +392,7 @@ export default {
// console.log(`change: ${i}`)
},
showLoading () {
this.hlsPopup.showLoading('请稍等!')
this.hlsPopup.showLoading('请稍等!', 3000000)
},
hideLoading () {
this.hlsPopup.hideLoading()
......@@ -420,6 +421,15 @@ export default {
},
})
},
showConfirmVux () {
this.hlsPopup.showConfirmVux({
title: '确定退出',
content: '退出后需从新登录',
onConfirm: function (index) {
alert(index)
},
})
},
showPopup () {
this.hlsPopup.showPopup({
title: '确定退出',
......
src/pages/home.vue
View file @ 658e001d
......@@ -113,8 +113,8 @@ export default {
height: '',
decimal: false,
rangeValue: 40,
min: 20,
max: 80,
min: 0,
max: 100,
step: 10,
disabled: false,
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