Skip to content

H
hls-easy-ui
Commit 082b57f9 authored by nature's avatar nature
Browse files
Options

预览原图

parent 3cd28181
Show whitespace changes
Inline Side-by-side
Showing with 246 additions and 24 deletions
packages/components/DateField/index.vue
View file @ 082b57f9
......@@ -13,7 +13,7 @@
<span>{{ label }}</span>
</div>
<div :style="{'flex':proportion[1] }" class="field-value">
<div class="field-body">
<div :class="{'field-control-error':hasError}" class="field-body">
<input
v-bind="$attrs"
v-model="value"
......@@ -30,6 +30,7 @@
</template>
<script>
import {isDef} from '../../../packages/common/utils'
export default {
name: 'DateField',
inheritAttrs: false,
......@@ -99,10 +100,14 @@ export default {
type: String,
default: require('./right-gray@2x.png'),
},
error: {
type: Boolean,
default: false,
},
},
data () {
return {
hasError: false,
}
},
computed: {
......@@ -139,8 +144,12 @@ export default {
},
methods: {
cleanValue () {
let vm = this
this.$emit('input', null)
this.$emit('clean', null)
if (isDef(vm.value) && vm.error) {
vm.hasError = true
}
},
showDate () {
let vm = this
......@@ -159,6 +168,12 @@ export default {
onConfirm (val) {
vm.$emit('input', val)
vm.$emit('onSelect', val)
vm.hasError = false
},
onHide () {
if (!isDef(vm.value) && vm.error) {
vm.hasError = true
}
},
})
}
......
packages/components/Field/index.vue
View file @ 082b57f9
......@@ -53,7 +53,7 @@
</template>
<script>
import { formatNumber, isDef, isObject } from '../../../packages/common/utils'
import { formatNumber, isDef, isObject, isString } from '../../../packages/common/utils'
export default {
name: 'Field',
......@@ -134,7 +134,7 @@ export default {
},
error: {
type: Boolean,
default: false,
default: true,
},
autosize: {
type: Boolean | Object,
......@@ -272,6 +272,9 @@ export default {
const { required, error } = this
if (required && error) {
this.hasError = !isDef(fieldInput.value)
/* if (isString(error)) {
this.placehold = error
} */
}
},
......
packages/components/Select/SelectField.vue
View file @ 082b57f9
......@@ -13,13 +13,14 @@
<span>{{ label }}</span>
</div>
<div :style="{'flex':proportion[1] }" class="field-value">
<div class="field-body">
<div :class="{'field-control-error':hasError}" class="field-body">
<input
v-bind="$attrs"
v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" :class="('field-control-'+inputAlign)"
type="text" class="field-control"
readonly
@click="showSelect">
@click="showSelect"
@blur="onBlur">
<input v-model="value" type="text" hidden>
<i v-if="showClean" class="field-icon field-right-icon icon ion-close-circled" @click="cleanValue"/>
<!--<slot name="icon"/>-->
......@@ -31,6 +32,7 @@
</template>
<script>
import {isDef} from '../../../packages/common/utils'
import VueSelect from './index'
export default {
name: 'SelectField',
......@@ -109,9 +111,14 @@ export default {
type: String,
default: require('./right-gray@2x.png'),
},
error: {
type: Boolean,
default: false,
},
},
data () {
return {
hasError: false,
}
},
computed: {
......@@ -179,10 +186,16 @@ export default {
this.$emit('input', v1)
this.$emit('onSelect', v1, v2)
}
vm.hasError = false
},
cleanValue () {
let vm = this
this.$emit('input', null)
this.$emit('clean', null)
const { required, error } = this
if (required && error) {
this.hasError = !isDef(vm.value)
}
},
showSelect () {
let vm = this
......@@ -204,6 +217,23 @@ export default {
})
}
},
// 检验输入的合法性
validate () {
const { fieldInput } = this.$refs
const { required, error } = this
if (required && error) {
this.hasError = !isDef(fieldInput.value)
/* if (isString(error)) {
this.placehold = error
} */
}
},
onBlur (event) {
this.focused = false
this.$emit('blur', event)
this.validate()
},
},
}
</script>
......
packages/components/ShowPicture/showpicture.vue
View file @ 082b57f9
......@@ -12,7 +12,8 @@
v-if="!imgList.length"
:alt="imgTitle">
<swipe
v-if="imgList.length" :index.sync="startPosition" :auto="false" :show-indicators="false">
v-if="imgList.length" :index.sync="startPosition" :auto="false" :show-indicators="false"
@change="swipeChange">
<swipe-item
v-for="(item,index) in imgList" :key="index">
<img
......@@ -25,6 +26,10 @@
</swipe>
</div>
<div v-if="imgList.length" class="indicators">{{ startPosition + 1 }}/{{ imgList.length }}</div>
<div v-show="imgOriginalUrl && percent!=100" class="img-origin" @click="showOriginPic(imgOriginalUrl,startPosition)">
<div class="word">{{ word }}</div>
<div v-show="percent" :style="{width:percent+'%'}" class="progress"/>
</div>
</div>
</div>
</template>
......@@ -45,7 +50,7 @@
}
&.active {
background-color: rgba(0, 0, 0, 0.6);
background-color: rgba(0, 0, 0, 0.9);
}
.show-picture-wrapper {
......@@ -102,30 +107,66 @@
}
}
}
.indicators{
top:20px;
.indicators {
top: 20px;
position: absolute;
color: #fff;
font-size: 16px;
}
.img-origin {
position: absolute;
bottom: 40px;
left: 20px;
background-color: #666;
color: #fff;
font-weight: bold;
font-size: 12px;
border-radius: 12px;
min-height: 24px;
min-width: 100px;
.word {
position: absolute;
padding: 6px 10px;
width: 100%;
text-align: center;
}
.progress{
position: absolute;
height: 100%;
background-color: rgba(255,255,255,.4);
border-radius: 12px;
}
}
}
.modal-open [vum-show-picture] {
pointer-events: auto;
}
.platform-ios{
.platform-ios {
.show-picture-backdrop {
.indicators{
top:40px;
.indicators {
top: 40px;
}
.img-origin {
bottom: 40px;
}
}
}
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
.show-picture-backdrop {
.indicators{
top:60px;
.indicators {
top: 60px;
}
.img-origin {
bottom: 70px;
}
}
}
......@@ -135,8 +176,12 @@
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
.show-picture-backdrop {
.indicators{
top:60px;
.indicators {
top: 60px;
}
.img-origin {
bottom: 70px;
}
}
}
......@@ -144,6 +189,7 @@
</style>
<script>
import {isFunction} from '../../common/utils'
import assign from 'object-assign'
import SwipeItem from '../Swipe/SwipeItem'
import Swipe from '../Swipe/index'
......@@ -157,17 +203,25 @@ export default {
return {
defaultOptions: {
imgUrl: '',
imgOriginalUrl: '',
imgList: [],
startPosition: 0,
imgTitle: '',
width: '100',
imgSize: 0,
},
imgUrl: '',
imgOriginalUrl: '',
imgList: [],
startPosition: 0,
imgTitle: '',
state: 0,
width: '100',
imgSize: null,
loadSuccess: null,
percent: 0,
original: '查看原图',
word: '',
}
},
......@@ -191,12 +245,28 @@ export default {
this.imgTitle = _options.imgTitle
this.width = _options.width
this.imgList = _options.imgList || []
this.startPosition = _options.startPosition
this.startPosition = _options.startPosition || 0
this.percent = _options.percent
this.imgOriginalUrl = _options.imgOriginalUrl
this.loadSuccess = _options.loadSuccess
this.state = 1
if (!this.width) {
this.width = 100
}
vm.$refs.pad.style.width = this.width + '%'
if (_options.imgSize) {
vm.imgSize = vm.formatSize(_options.imgSize)
vm.word = vm.original + vm.imgSize
}
vm.imgList.forEach((item, index, array) => {
item.word = vm.original + vm.formatSize(array[index].imgSize)
item.percent = item.percent | 0
})
if (vm.imgList.length) {
vm.word = vm.imgList[vm.startPosition].word
vm.imgOriginalUrl = vm.imgList[vm.startPosition].imgOriginalUrl
vm.percent = vm.imgList[vm.startPosition].percent
}
},
hide () {
......@@ -207,9 +277,80 @@ export default {
}, false)
},
formatSize (size = 0, pointLength = 1, units) {
var unit
units = units || ['B', 'K', 'M', 'G', 'TB']
while ((unit = units.shift()) && size > 1024) {
size = size / 1024
}
return (unit === 'B' ? size : size.toFixed(pointLength === undefined ? 2 : pointLength)) + unit
},
getState () {
return this.state
},
showOriginPic (originalUrl, startPosition = 0) {
let vm = this
function getHttpObj () {
var httpobj = null
try {
httpobj = new ActiveXObject('Msxml2.XMLHTTP')
} catch (e) {
try {
httpobj = new ActiveXObject('Microsoft.XMLHTTP')
} catch (e1) {
httpobj = new XMLHttpRequest()
}
}
return httpobj
}
// eslint-disable-next-line new-cap
var xhr = new getHttpObj()
xhr.responseType = 'blob'
xhr.open('GET', originalUrl, true)
xhr.onprogress = function (event) {
if (event.lengthComputable) {
// console.log(event.loaded)
// console.log(event.total)
vm.percent = event.loaded / event.total * 100
vm.word = '下载' + vm.percent.toFixed(2) + '%'
}
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
// 使用URL.createObjectURL将Blob对象转换为可访问的url地址
let src = URL.createObjectURL(xhr.response)
vm.imgOriginalUrl = src
vm.imgUrl = src
if (vm.imgList.length) {
vm.imgList[startPosition].imgUrl = src
vm.imgList[startPosition].imgOriginalUrl = src
vm.imgList[startPosition].percent = 100
}
if (isFunction(vm.loadSuccess)) {
vm.loadSuccess({
index: startPosition,
percent: 100,
localUrl: src,
})
}
}
}
xhr.send()
},
swipeChange (index) {
let vm = this
vm.imgOriginalUrl = vm.imgList[index].imgOriginalUrl
vm.percent = vm.imgList[index].percent
vm.word = vm.imgList[index].word
},
sharePicture () {
// var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/
// window.plugins.socialsharing.share(null, null, this.imgUrl, null)
......
src/pages/hlsPopup.vue
View file @ 082b57f9
......@@ -295,6 +295,24 @@ export default {
modal: '',
showModalValue: false,
radioValue: true,
imgList: [
{imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
imgOriginalUrl: 'http://hlsapp.hand-china.com/file/orign.png',
imgSize: 2982604,
percent: 0,
},
{imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
imgOriginalUrl: 'http://hlsapp.hand-china.com/file/orign.png',
imgSize: 2282604,
percent: 0,
},
{imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
imgOriginalUrl: 'http://hlsapp.hand-china.com/file/orign.png',
imgSize: 3282604,
percent: 0,
},
],
}
},
watch: {
......@@ -434,8 +452,16 @@ export default {
})
},
showBigPicture () {
this.hlsPopup.showBigPicture({
imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
let vm = this
vm.hlsPopup.showBigPicture({
/* imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
imgOriginalUrl: 'http://hlsapp.hand-china.com/file/orign.png',
imgSize: 2882604, */
imgList: vm.imgList,
loadSuccess: (src) => {
vm.imgList[src.index]['percent'] = src.percent
vm.imgList[src.index]['imgOriginalUrl'] = src.localUrl
},
})
},
selectListMultiple () {
......@@ -469,7 +495,7 @@ export default {
}, {
'code': 'NP2',
'code_name': '个人2',
},{
}, {
'code': 'NP',
'code_name': '个人',
}, {
......
src/pages/home.vue
View file @ 082b57f9
......@@ -8,7 +8,6 @@
<tab-item>Vue</tab-item>
<tab-item>APP</tab-item>
</s-tab>
<div style="backgroundColor:red;height:50px"/>
<h-content>
<list-item>
<item>
......@@ -48,7 +47,7 @@
<currency-input v-model="number"/>
<DateField
v-model="nowDate" required label="时间"
@onSelect="select"/>
@onSelect="select" error/>
<h-field
v-model="number" format type="number"
......@@ -88,6 +87,7 @@
inputAlign="left"
clearable error
required label="家庭地址"/>
<!--<img src="@/assets/image/logo.png" @click="imgclick()" alt="img">-->
</h-content>
<bottom-tab/>
</h-view>
......@@ -140,6 +140,9 @@ export default {
// this.height = this.$refs.textarea.clientHeight
},
methods: {
/* imgclick(){
console.log('img click')
}, */
scrollBottom () {
let div = document.getElementById('home-content')
div.scrollTop = div.scrollHeight
......
src/scripts/hlsPopup.js
View file @ 082b57f9
......@@ -251,9 +251,13 @@ export default {
if (typeof imgObject === 'object') {
ShowPicturePlugin.show({
imgUrl: imgObject.imgUrl,
imgOriginalUrl: imgObject.imgOriginalUrl,
percent: imgObject.imgOriginalUrl || 0,
imgSize: imgObject.imgSize,
width: imgObject.width,
imgList: imgObject.imgList || [],
startPosition: imgObject.startPosition,
loadSuccess: imgObject.loadSuccess,
})
}
},
......
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