Commit 5a1f8810 authored by JingChao's avatar JingChao

0.0.6

parent 4852700f
......@@ -531,7 +531,24 @@ showActionSheetButton() {
```
### h-progress(进度条) h-range(滑块)
```html
<h-range
:decimal="decimal" v-model="rangeValue" :min="min" :max="max"
:step="step" :disabled="disabled" :disabled-opacity="disabledOpacity" :range-bar-height="rangeBarHeight"
:range-handle-height="rangeHandleHeight" @change="change" @touchstart="touchStart" @touchend="touchEnd"/>
<h-progress :percent="70"/>
```
### Note
hls-easy-ui#0.0.6
修改组建加载的方式为按需加载
[添加进度条 h-progress](/packages/components/Progress/README.md)
[添加滑块 h-range](/packages/components/Range/README.md)
hls-easy-ui#0.0.5
[添加金额输入框 currency-input](/packages/components/CurrencyInput/README.md)
......
......@@ -44,7 +44,7 @@ let webpackConfig = {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
limit: 1000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
......@@ -52,7 +52,7 @@ let webpackConfig = {
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
limit: 1000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
......@@ -60,7 +60,7 @@ let webpackConfig = {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
limit: 1000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
......
......@@ -26,7 +26,7 @@ const webpackConfig = merge(baseWebpackConfig, {
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
......
{
"name": "hls-easy-ui",
"version": "0.0.5",
"version": "0.0.6",
"description": "A Vue components project",
"author": "JingChao <jingchao.wu@hand-china.com>",
"private": false,
......@@ -24,7 +24,8 @@
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vux": "^2.9.2",
"vue-lazyload": "1.2.3"
"vue-lazyload": "1.2.3",
"axios": "latest"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
......
......@@ -13,7 +13,7 @@
<h1 :style="{'flex':proportion[1] }" class="h-header-center">
<slot name="center"/>
</h1>
<!--右侧安装-->
<!--右侧区域-->
<section :style="{'flex':proportion[2] }" class="h-header-right">
<slot name="right"/>
</section>
......@@ -58,7 +58,7 @@ export default {
box-sizing: content-box;
overflow: hidden;
position: relative;
z-index: 20;
z-index: 5;
width: 100%;
.h-header-center {
......
......@@ -25,6 +25,10 @@ export default {
type: String,
default: '',
},
onClose: {
type: Boolean,
default: false,
},
},
data () {
return {
......@@ -77,17 +81,19 @@ export default {
},
start (e) {
// e.stopPropagation()
if (this.onClose) {
this.hideModal(null)
}
},
hideModal (e) {
if(!e){
if (!e) {
this.state = 3
setTimeout(() => {
this.state = 0
this.showModal = false
}, 250)
}, 250)
}
if(e && e.target && e.target.className.indexOf('modal-backdrop') === 0){
if (e && e.target && e.target.className.indexOf('modal-backdrop') === 0) {
this.state = 3
setTimeout(() => {
this.state = 0
......
h-progress 进度条
```html
<h-progress :percent="70" :progress-bg="progressBg" :progress-act-bg="progressActBg"/>
export default {
data() {
return {
percent: 40,
progressBg: 'rgba(0,0,0,.3)'
progressActBg: '#0041c4'
}
}
}
```
percent 当前进度
progressBg 进度条整体背景色
progressActBg 当前进度背景色
/**
* @Author think
* @Date 2020-07-20 14:47
*/
<template>
<div :style="{backgroundColor:progressBg}" class="h-progress">
<div :style="{width:percent+'%',backgroundColor: progressActBg}" class="h-progress-bar"/>
</div>
</template>
<script>
export default {
name: 'HProgress',
props: {
percent: {
request: true,
type: Number,
default: 0,
},
progressBg: {
type: String,
default: 'rgba(0,0,0,.1)',
},
progressActBg: {
type: String,
default: '#0041c4',
},
},
data () {
return {}
},
methods: {},
}
</script>
<style lang="less">
.h-progress{
width: 100%;
height: 3px;
.h-progress-bar{
height: 100%;
}
}
</style>
......@@ -19,6 +19,10 @@ export default {
type: Boolean,
default: false,
},
value: {
type: String,
default: '',
},
},
data () {
return {
......
h-range 滑块
```html
<h-range
:decimal="decimal" v-model="rangeValue" :min="min" :max="max"
:step="step" :disabled="disabled" :disabled-opacity="disabledOpacity" :range-bar-height="rangeBarHeight"
:range-handle-height="rangeHandleHeight" @change="change" @touchstart="touchStart" @touchend="touchEnd"/>
export default {
data() {
return {
decimal: false,
rangeValue: 40,
min: 20,
max: 80,
step: 10,
disabled: true,
disabledOpacity: 0.5,
rangeBarHeight: 1,
rangeHandleHeight: 20,
}
},
methods:{
change (val) {
// this.rangeValue = val
console.log(val)
},
touchStart (e) {
console.log(e)
},
touchEnd (e) {
console.log(e)
},
}
}
```
decimal 是否展示小数 默认false
value 当前滑块值
min 滑块最小值 默认0
max 滑块最大值 默认100
step 滑块步长 默认1
disable 是否禁用 默认false
disabled-opacity 禁用时透明度 默认0.7
range-bar-height 滑道高度 默认1
range-handle-height 滑块高度 默认20
@change 滑块滑动触犯事件 返回当前value值
@touchstart 滑块开始滑动事件
@touchEnd 滑块结束滑动事件
/**
* @Author think
* @Date 2020-07-20 16:47
*/
<template>
<section class="h-range">
<Range
:decimal="decimal" v-model.number="currentValue" :min="min" :max="max"
:maxHTML="maxHTML" :minHTML="minHTML"
:step="step" :disabled="disabled" :disabled-opacity="disabledOpacity" :range-bar-height="rangeBarHeight"
:range-handle-height="rangeHandleHeight" @on-change="change" @on-touchstart="touchStart" @on-touchend="touchEnd"/>
</section>
</template>
<script>
import {Range} from 'vux'
export default {
name: 'HRange',
components: {
Range,
},
props: {
decimal: {
type: Boolean,
default: false,
},
value: {
default: 0,
type: Number,
},
min: {
type: Number,
default: 0,
},
minHTML: {
type: String,
default: '',
},
maxHTML: {
type: String,
default: '',
},
max: {
type: Number,
default: 100,
},
step: {
type: Number,
default: 1,
},
disabled: {
type: Boolean,
default: false,
},
disabledOpacity: {
type: Number,
default: 0.7,
},
rangeBarHeight: {
type: Number,
default: 1,
},
rangeHandleHeight: {
type: Number,
default: 20,
},
},
data () {
return {
currentValue: 0,
}
},
created () {
this.currentValue = this.value
},
mounted () {
let vm = this
setTimeout(() => {
vm.$el.querySelector('.range-handle').style.width = `${vm.rangeHandleHeight}px`
vm.$el.querySelector('.range-handle').style.height = `${vm.rangeHandleHeight}px`
vm.$el.querySelector('.vux-range-input-box').style.marginRight = '40px'
vm.$el.querySelector('.vux-range-input-box').style.marginLeft = '40px'
}, 10)
},
methods: {
change (val) {
this.$emit('input', val)
this.$emit('change', val)
},
touchStart (e) {
this.$emit('touchstart', e)
},
touchEnd (e) {
this.$emit('touchend', e)
},
},
}
</script>
<style lang="less">
.h-range{
// height: 100%;
.range-handle{
height: 20px;
width: 20px;
}
}
</style>
<template>
<div :class="{'active': state == 1}" class="show-select-backdrop" @click="returnItem(-1)">
<h-content
<div :class="{'active': state == 1}" class="show-select-backdrop" @click.self="returnItem(-1)">
<div
ref="selectWrap"
:class="{'show-select-up': state == 1}"
class="show-select-wrapper">
<!-- <popup-header
......@@ -18,14 +19,31 @@
{{ confirmText }}
</div>
</h-header>
<Picker
:data="list"
v-model="tempValue"
:columns="3"
:key="index"
@on-change="onPickerChange"
/>
</h-content>
<h-content :cal-content="false" :style="{'height':contentHeight}" :class="{'select-content':multiple}">
<Picker
v-if="!multiple"
:data="list"
v-model="tempValue"
:columns="3"
:key="index"
@on-change="onPickerChange"
/>
<list-item
v-if="multiple" :item-height="35" @click.native.stop="stop">
<item/>
<input v-model="value" hidden>
<item
v-for="(item,index) in list" :key="index" :show-name="false" :class="{'selected':selectedIndex[index]}"
@click.native="selected($event,index,item)">
<div slot="content" class="select-item"><p>{{ item.name }}</p>
<input v-model="item.value" hidden>
</div>
<!--<i slot="right-icon" :class="{'selected':selectedIndex[index]}" class="icon ion-android-done"/>-->
</item>
<item/>
</list-item>
</h-content>
</div>
</div>
</template>
<style lang="less" scoped>
......@@ -55,7 +73,7 @@
width: 100%;
left: 0;
top: auto;
padding-top: 0px;
padding-top: 0;
background-color: #fff;
.h-header {
......@@ -63,15 +81,40 @@
color: #828282;
}
.h-header-right .h-header-btn {
color: #5D98F6;
color: #5d98f6;
}
}
.content{
background-color: #fff;
}
.select-content{
// display: flex;
// align-items: center;
}
}
.show-select-up {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hls-list-item{
.hls-item{
.add-content{
.select-item{
width: 100%;
text-align: center;
}
}
}
.selected{
.add-content{
p{
color: #5d98f6;
}
}
}
}
}
.modal-open [vum-show-select] {
......@@ -79,13 +122,14 @@
}
</style>
<script>
// eslint-disable-next-line import/no-extraneous-dependencies
import assign from 'object-assign'
import { Picker } from 'vux'
export default {
components: {
Picker
Picker,
},
data () {
return {
......@@ -94,18 +138,22 @@ export default {
list: [],
object: {},
index: 0,
multiple: false,
},
contentHeight: '380px',
multiple: false,
popupTitle: '',
cancelText: '取消',
confirmText: '确定',
code: '',
value: '',
name: '',
value: [],
name: [],
list: [],
object: {},
state: 0,
tempValue: [],
index: '',
selectedIndex: [],
callBack: null,
childs: {
index: '',
......@@ -129,22 +177,34 @@ export default {
methods: {
show (options) {
let vm = this
let _options = assign({}, this.defaultOptions, options)
this.code = _options.code
this.list = _options.list
this.object = _options.object
this.callBack = _options.callBack
this.multiple = _options.multiple
this.state = 1
this.list.forEach((item, index, array) => {
this.selectedIndex.push(0)
})
setTimeout(function () {
vm.contentHeight = vm.$refs.selectWrap.clientHeight - 44 + 'px'
}, 100)
},
returnItem (index) {
let vm = this
if (index > -1) {
let code = vm.code
if (!vm.multiple) {
let code = vm.code
let code_name = vm.code + '_n' // eslint-disable-line
vm.object[code] = vm.value
vm.object[code] = vm.value
vm.object[code_name] = vm.name // eslint-disable-line
vm.callBack(vm.index, vm.object, vm.childs)
vm.callBack(vm.index, vm.object, vm.childs)
} else {
vm.callBack(vm.value, vm.name)
}
}
this.state = 0
let wrapper = document.querySelector('[vum-show-select]')
......@@ -200,6 +260,13 @@ export default {
vm.value = val[0]
this.findIndex(vm.list, vm.value)
},
stop (e) {
},
selected (e, index, item) {
this.selectedIndex[index] = !this.selectedIndex[index]
this.value.includes(item.value) ? this.value = this.value.filter(n => n !== item.value) : this.value.push(item.value)
this.name.includes(item.name) ? this.name = this.name.filter(n => n !== item.name) : this.name.push(item.name)
},
},
}
</script>
......@@ -192,6 +192,7 @@ export default {
if (!this.width) {
this.width = 100
}
debugger
vm.$refs.pad.style.width = this.width + '%'
},
......
import VueLazyload from 'vue-lazyload'
import HView from './HView/index'
import HHeader from './HHeader/index'
import HContent from './HContent/index'
import Scroll from './Scroll/index.vue'
import NumberKeyboard from './NumberKeyboard/index.vue'
import ItemOption from './ItemOption/index'
import OptionButton from './ItemOption/OptionButton'
import HButton from './HButton/index'
import Swipe from './Swipe/index'
import SwipeItem from './Swipe/SwipeItem'
import ListItem from './ListItem/ListItem'
import Item from './ListItem/Item'
import Switch from './Switch/index'
import Spin from './Spin/index'
import TopTip from './TopTip/index'
import Notify from './Dialog/Notify'
import Stab from './STab/index'
import TabItem from './STab/tab-item'
import CheckBox from './CheckBox/index'
import RadioGroup from './Radio/index'
import Radio from './Radio/radio'
import HFile from './HFile/index'
import VueLazyload from 'vue-lazyload'
import errLoadingPic from '../common/picture/errloading.jpg'
const Modal = resolve => require.ensure([], () => { resolve(require('./Modal/Modal')) }, 'hModal')
const HView = resolve => require.ensure([], () => { resolve(require('./HView/index')) }, 'hView')
const HHeader = resolve => require.ensure([], () => { resolve(require('./HHeader/index')) }, 'hHeader')
const HContent = resolve => require.ensure([], () => { resolve(require('./HContent/index')) }, 'hcontent')
const Scroll = resolve => require.ensure([], () => { resolve(require('./Scroll/index.vue')) }, 'scroll')
const NumberKeyboard = resolve => require.ensure([], () => { resolve(require('./NumberKeyboard/index.vue')) }, 'numberKeyboard')
const ItemOption = resolve => require.ensure([], () => { resolve(require('./ItemOption/index')) }, 'itemOption')
const OptionButton = resolve => require.ensure([], () => { resolve(require('./ItemOption/OptionButton')) }, 'optionButton')
const HButton = resolve => require.ensure([], () => { resolve(require('./HButton/index')) }, 'hButton')
const Swipe = resolve => require.ensure([], () => { resolve(require('./Swipe/index')) }, 'swipe')
const SwipeItem = resolve => require.ensure([], () => { resolve(require('./Swipe/SwipeItem')) }, 'swipe')
const ListItem = resolve => require.ensure([], () => { resolve(require('./ListItem/ListItem')) }, 'Item')
const Item = resolve => require.ensure([], () => { resolve(require('./ListItem/Item')) }, 'Item')
const Switch = resolve => require.ensure([], () => { resolve(require('./Switch/index')) }, 'switch')
const Spin = resolve => require.ensure([], () => { resolve(require('./Spin/index')) }, 'spin')
const TopTip = resolve => require.ensure([], () => { resolve(require('./TopTip/index')) }, 'topTip')
const Notify = resolve => require.ensure([], () => { resolve(require('./Dialog/Notify')) }, 'notify')
const Stab = resolve => require.ensure([], () => { resolve(require('./STab/index')) }, 'stab')
const TabItem = resolve => require.ensure([], () => { resolve(require('./STab/tab-item')) }, 'tabItem')
const CheckBox = resolve => require.ensure([], () => { resolve(require('./CheckBox/index')) }, 'checkBox')
import BottomTab from './BottomTab/index'
import TabButton from './BottomTab/tab-button'
import Modal from './Modal/Modal'
import HLayout from './HLayout/index'
import CurrencyInput from './CurrencyInput/index'
const RadioGroup = resolve => require.ensure([], () => { resolve(require('./Radio/index')) }, 'radio')
const Radio = resolve => require.ensure([], () => { resolve(require('./Radio/radio')) }, 'radio')
const HFile = resolve => require.ensure([], () => { resolve(require('./HFile/index')) }, 'hFile')
import errLoadingPic from '../common/picture/errloading.jpg'
const BottomTab = resolve => require.ensure([], () => { resolve(require('./BottomTab/index')) }, 'bottomTab')
const TabButton = resolve => require.ensure([], () => { resolve(require('./BottomTab/tab-button')) }, 'tabButton')
const HLayout = resolve => require.ensure([], () => { resolve(require('./HLayout/index')) }, 'hLayout')
const CurrencyInput = resolve => require.ensure([], () => { resolve(require('./CurrencyInput/index')) }, 'currencyInput')
const HProgress = resolve => require.ensure([], () => { resolve(require('./Progress/index')) }, 'hProgress')
const HRange = resolve => require.ensure([], () => { resolve(require('./Range/index')) }, 'hRange')
export default (Vue) => {
Vue.use(VueLazyload, {
......@@ -63,4 +65,6 @@ export default (Vue) => {
Vue.component('h-file', HFile)
Vue.component('h-layout', HLayout)
Vue.component('currency-input', CurrencyInput)
Vue.component('h-progress', HProgress)
Vue.component('h-range', HRange)
}
......@@ -2,6 +2,7 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import FastClick from 'fastclick'
// eslint-disable-next-line import/no-extraneous-dependencies
import axios from 'axios'
import App from './App'
import router from './router/index'
......@@ -95,7 +96,7 @@ Vue.config.productionTip = false
vum.$vumPlatform.ready(function () {
if ((vum.Platform.isAndroid()) || (vum.Platform.isIOS())) {
cordova.plugins.Keyboard.disableScroll(true)
// cordova.plugins.Keyboard.disableScroll(true)
}
})
......
......@@ -47,6 +47,7 @@
</h-button>
<h-button class="button-class" type="primary" @click.native="showBigPicture">showBigPicture</h-button>
<h-button class="button-class" type="primary" @click.native="selectListOne">selectList 普通下拉框</h-button>
<h-button class="button-class" type="primary" @click.native="selectListMultiple">selectList 普通下拉框多选</h-button>
<h-button class="button-class" type="primary" @click.native="selectListTwo">selectList 二级联动</h-button>
<h-button class="button-class" type="primary" @click.native="selectList">selectList 三级联动</h-button>
......@@ -253,13 +254,13 @@
@input="onInput"
@delete="onDelete"/>-->
<h-modal ref="modal" v-model="showModalValue" position="bottom" cus-class="sign-modal">
<h-modal ref="modal" v-model="showModalValue" position="bottom" class="sign-modal">
<h-view>
<h-header style="height: 43px !important;padding-top:0px">
<div slot="left" class="h-header-btn">确定</div>
<div slot="right" class="h-header-btn">清除</div>
</h-header>
<h-content style="top:44px !important;">
<h-content :cal-content="false">
<div id="draw" class="draw"/>
</h-content>
</h-view>
......@@ -432,6 +433,57 @@ export default {
imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
})
},
selectListMultiple () {
var bpClassList = [
{
'code': 'NP',
'code_name': '个人',
}, {
'code': 'NP1',
'code_name': '个人1',
}, {
'code': 'NP2',
'code_name': '个人2',
},
{
'code': 'NP',
'code_name': '个人',
}, {
'code': 'NP1',
'code_name': '个人1',
}, {
'code': 'NP2',
'code_name': '个人2',
},
{
'code': 'NP',
'code_name': '个人',
}, {
'code': 'NP1',
'code_name': '个人1',
}, {
'code': 'NP2',
'code_name': '个人2',
},{
'code': 'NP',
'code_name': '个人',
}, {
'code': 'NP1',
'code_name': '个人1',
}, {
'code': 'NP2',
'code_name': '个人2',
},
]
this.hlsPopup.selectList({
list: bpClassList,
multiple: true,
returnItem: function (value, name) {
debugger
console.log('value:' + value + ',name:' + name)
},
})
},
selectListOne () {
var bpClassList = [
......@@ -725,16 +777,13 @@ export default {
}
.sign-modal {
top: 50%;
.modal {
top: 50%;
}
.content {
background-color: #fff;
}
}
}
.login-modal {
height: 50%;
top: 50%
}
</style>
......@@ -98,6 +98,14 @@
<input slot="content" type="text">
</item>
</list-item>
<h-range
:decimal="decimal" v-model="rangeValue" :min="min" :max="max"
:step="step" :disabled="disabled" :disabled-opacity="disabledOpacity" :range-bar-height="rangeBarHeight"
:range-handle-height="rangeHandleHeight" @change="change" @touchstart="touchStart" @touchend="touchEnd"/>
<h-progress :percent="70"/>
</h-content>
<!-- <s-tab>
<tab-item>Vue</tab-item>
......@@ -109,7 +117,11 @@
</template>
<script>
import {Range} from 'vux'
export default {
components: {
Range,
},
data () {
return {
userImg: window.localStorage.userImg || '',
......@@ -122,6 +134,15 @@ export default {
},
autosize: true,
height: '',
decimal: false,
rangeValue: 40,
min: 20,
max: 80,
step: 10,
disabled: true,
disabledOpacity: 0.5,
rangeBarHeight: 1,
rangeHandleHeight: 20,
}
},
watch: {},
......@@ -213,6 +234,17 @@ export default {
this.$refs.textarea.style.height = this.height + 'px'
},
change (val) {
// this.rangeValue = val
console.log(val)
},
touchStart (e) {
console.log(e)
},
touchEnd (e) {
console.log(e)
},
},
}
</script>
......
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home'
// test工具类
import HlsPopup from '@/pages/hlsPopup'
import Radio from '@/pages/radioTest'
import HFile from '@/pages/fileTest'
import Form from '@/pages/form'
const Home = resolve => require.ensure([], () => { resolve(require('@/pages/home')) }, 'home')
const HlsPopup = resolve => require.ensure([], () => { resolve(require('@/pages/hlsPopup')) }, 'hlsPopup')
const HFile = () => import(/* webpackChunkName:'HFile' */ '@/pages/fileTest')
Vue.use(Router)
export default new Router({
......@@ -22,7 +22,7 @@ export default new Router({
{path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
{path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}},
{path: '/HFile', component: HFile, name: 'HFile', meta: {keepAlive: true}},
{path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}}
{path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}},
],
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
......
......@@ -298,6 +298,7 @@ export default {
callBack: selectOption.returnItem,
code: selectOption.code,
object: selectOption.object,
multiple: selectOption.multiple,
})
}
})
......
......@@ -100,3 +100,10 @@
@swipeout-button-primary-bg-color:@headerColor;
@swipeout-button-warn-bg-color:#f96268;
@swipeout-button-default-bg-color:#c8c7cd;
/**
* Range
*/
@range-disabled-opacity: 0.5;
@range-bar-default-color: #a9acb1;
@range-bar-active-color: @theme-color;
File deleted
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