Skip to content

H
hls-easy-ui
Commit 5a1f8810 authored by JingChao's avatar JingChao
Browse files
Options

0.0.6

parent 4852700f
Show whitespace changes
Inline Side-by-side
Showing with 493 additions and 73 deletions
README.md
View file @ 5a1f8810
...@@ -531,7 +531,24 @@ showActionSheetButton() { ...@@ -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 ### 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 hls-easy-ui#0.0.5
[添加金额输入框 currency-input](/packages/components/CurrencyInput/README.md) [添加金额输入框 currency-input](/packages/components/CurrencyInput/README.md)
......
build/webpack.base.conf.js
View file @ 5a1f8810
...@@ -44,7 +44,7 @@ let webpackConfig = { ...@@ -44,7 +44,7 @@ let webpackConfig = {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader', loader: 'url-loader',
options: { options: {
limit: 10000, limit: 1000,
name: utils.assetsPath('img/[name].[hash:7].[ext]') name: utils.assetsPath('img/[name].[hash:7].[ext]')
} }
}, },
...@@ -52,7 +52,7 @@ let webpackConfig = { ...@@ -52,7 +52,7 @@ let webpackConfig = {
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader', loader: 'url-loader',
options: { options: {
limit: 10000, limit: 1000,
name: utils.assetsPath('media/[name].[hash:7].[ext]') name: utils.assetsPath('media/[name].[hash:7].[ext]')
} }
}, },
...@@ -60,7 +60,7 @@ let webpackConfig = { ...@@ -60,7 +60,7 @@ let webpackConfig = {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader', loader: 'url-loader',
options: { options: {
limit: 10000, limit: 1000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
} }
} }
......
build/webpack.prod.conf.js
View file @ 5a1f8810
...@@ -26,7 +26,7 @@ const webpackConfig = merge(baseWebpackConfig, { ...@@ -26,7 +26,7 @@ const webpackConfig = merge(baseWebpackConfig, {
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'), filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
}, },
plugins: [ plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html // http://vuejs.github.io/vue-loader/en/workflow/production.html
......
package.json
View file @ 5a1f8810
{ {
"name": "hls-easy-ui", "name": "hls-easy-ui",
"version": "0.0.5", "version": "0.0.6",
"description": "A Vue components project", "description": "A Vue components project",
"author": "JingChao <jingchao.wu@hand-china.com>", "author": "JingChao <jingchao.wu@hand-china.com>",
"private": false, "private": false,
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vux": "^2.9.2", "vux": "^2.9.2",
"vue-lazyload": "1.2.3" "vue-lazyload": "1.2.3",
"axios": "latest"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",
......
packages/components/HHeader/index.vue
View file @ 5a1f8810
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<h1 :style="{'flex':proportion[1] }" class="h-header-center"> <h1 :style="{'flex':proportion[1] }" class="h-header-center">
<slot name="center"/> <slot name="center"/>
</h1> </h1>
<!--右侧安装--> <!--右侧区域-->
<section :style="{'flex':proportion[2] }" class="h-header-right"> <section :style="{'flex':proportion[2] }" class="h-header-right">
<slot name="right"/> <slot name="right"/>
</section> </section>
...@@ -58,7 +58,7 @@ export default { ...@@ -58,7 +58,7 @@ export default {
box-sizing: content-box; box-sizing: content-box;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
z-index: 20; z-index: 5;
width: 100%; width: 100%;
.h-header-center { .h-header-center {
......
packages/components/Modal/Modal.vue
View file @ 5a1f8810
...@@ -25,6 +25,10 @@ export default { ...@@ -25,6 +25,10 @@ export default {
type: String, type: String,
default: '', default: '',
}, },
onClose: {
type: Boolean,
default: false,
},
}, },
data () { data () {
return { return {
...@@ -77,17 +81,19 @@ export default { ...@@ -77,17 +81,19 @@ export default {
}, },
start (e) { start (e) {
// e.stopPropagation() if (this.onClose) {
this.hideModal(null)
}
}, },
hideModal (e) { hideModal (e) {
if(!e){ if (!e) {
this.state = 3 this.state = 3
setTimeout(() => { setTimeout(() => {
this.state = 0 this.state = 0
this.showModal = false 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 this.state = 3
setTimeout(() => { setTimeout(() => {
this.state = 0 this.state = 0
......
packages/components/Progress/README.md 0 → 100644
View file @ 5a1f8810
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 当前进度背景色
packages/components/Progress/index.vue 0 → 100644
View file @ 5a1f8810
/**
* @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>
packages/components/Radio/index.vue
View file @ 5a1f8810
...@@ -19,6 +19,10 @@ export default { ...@@ -19,6 +19,10 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
value: {
type: String,
default: '',
},
}, },
data () { data () {
return { return {
......
packages/components/Range/README.md 0 → 100644
View file @ 5a1f8810
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 滑块结束滑动事件
packages/components/Range/index.vue 0 → 100644
View file @ 5a1f8810
/**
* @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>
packages/components/Select/select.vue
View file @ 5a1f8810
<template> <template>
<div :class="{'active': state == 1}" class="show-select-backdrop" @click="returnItem(-1)"> <div :class="{'active': state == 1}" class="show-select-backdrop" @click.self="returnItem(-1)">
<h-content <div
ref="selectWrap"
:class="{'show-select-up': state == 1}" :class="{'show-select-up': state == 1}"
class="show-select-wrapper"> class="show-select-wrapper">
<!-- <popup-header <!-- <popup-header
...@@ -18,15 +19,32 @@ ...@@ -18,15 +19,32 @@
{{ confirmText }} {{ confirmText }}
</div> </div>
</h-header> </h-header>
<h-content :cal-content="false" :style="{'height':contentHeight}" :class="{'select-content':multiple}">
<Picker <Picker
v-if="!multiple"
:data="list" :data="list"
v-model="tempValue" v-model="tempValue"
:columns="3" :columns="3"
:key="index" :key="index"
@on-change="onPickerChange" @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> </h-content>
</div> </div>
</div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.show-select-backdrop { .show-select-backdrop {
...@@ -55,7 +73,7 @@ ...@@ -55,7 +73,7 @@
width: 100%; width: 100%;
left: 0; left: 0;
top: auto; top: auto;
padding-top: 0px; padding-top: 0;
background-color: #fff; background-color: #fff;
.h-header { .h-header {
...@@ -63,8 +81,15 @@ ...@@ -63,8 +81,15 @@
color: #828282; color: #828282;
} }
.h-header-right .h-header-btn { .h-header-right .h-header-btn {
color: #5D98F6; color: #5d98f6;
}
} }
.content{
background-color: #fff;
}
.select-content{
// display: flex;
// align-items: center;
} }
} }
...@@ -72,6 +97,24 @@ ...@@ -72,6 +97,24 @@
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
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] { .modal-open [vum-show-select] {
...@@ -79,13 +122,14 @@ ...@@ -79,13 +122,14 @@
} }
</style> </style>
<script> <script>
// eslint-disable-next-line import/no-extraneous-dependencies
import assign from 'object-assign' import assign from 'object-assign'
import { Picker } from 'vux' import { Picker } from 'vux'
export default { export default {
components: { components: {
Picker Picker,
}, },
data () { data () {
return { return {
...@@ -94,18 +138,22 @@ export default { ...@@ -94,18 +138,22 @@ export default {
list: [], list: [],
object: {}, object: {},
index: 0, index: 0,
multiple: false,
}, },
contentHeight: '380px',
multiple: false,
popupTitle: '', popupTitle: '',
cancelText: '取消', cancelText: '取消',
confirmText: '确定', confirmText: '确定',
code: '', code: '',
value: '', value: [],
name: '', name: [],
list: [], list: [],
object: {}, object: {},
state: 0, state: 0,
tempValue: [], tempValue: [],
index: '', index: '',
selectedIndex: [],
callBack: null, callBack: null,
childs: { childs: {
index: '', index: '',
...@@ -129,22 +177,34 @@ export default { ...@@ -129,22 +177,34 @@ export default {
methods: { methods: {
show (options) { show (options) {
let vm = this
let _options = assign({}, this.defaultOptions, options) let _options = assign({}, this.defaultOptions, options)
this.code = _options.code this.code = _options.code
this.list = _options.list this.list = _options.list
this.object = _options.object this.object = _options.object
this.callBack = _options.callBack this.callBack = _options.callBack
this.multiple = _options.multiple
this.state = 1 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) { returnItem (index) {
let vm = this let vm = this
if (index > -1) { if (index > -1) {
if (!vm.multiple) {
let code = vm.code let code = vm.code
let code_name = vm.code + '_n' // eslint-disable-line 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.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 this.state = 0
let wrapper = document.querySelector('[vum-show-select]') let wrapper = document.querySelector('[vum-show-select]')
...@@ -200,6 +260,13 @@ export default { ...@@ -200,6 +260,13 @@ export default {
vm.value = val[0] vm.value = val[0]
this.findIndex(vm.list, vm.value) 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> </script>
packages/components/ShowPicture/showpicture.vue
View file @ 5a1f8810
...@@ -192,6 +192,7 @@ export default { ...@@ -192,6 +192,7 @@ export default {
if (!this.width) { if (!this.width) {
this.width = 100 this.width = 100
} }
debugger
vm.$refs.pad.style.width = this.width + '%' vm.$refs.pad.style.width = this.width + '%'
}, },
......
packages/components/component.js
View file @ 5a1f8810
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 VueLazyload from 'vue-lazyload'
import Radio from './Radio/radio' import errLoadingPic from '../common/picture/errloading.jpg'
import HFile from './HFile/index' 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' const RadioGroup = resolve => require.ensure([], () => { resolve(require('./Radio/index')) }, 'radio')
import TabButton from './BottomTab/tab-button' const Radio = resolve => require.ensure([], () => { resolve(require('./Radio/radio')) }, 'radio')
import Modal from './Modal/Modal' const HFile = resolve => require.ensure([], () => { resolve(require('./HFile/index')) }, 'hFile')
import HLayout from './HLayout/index'
import CurrencyInput from './CurrencyInput/index'
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) => { export default (Vue) => {
Vue.use(VueLazyload, { Vue.use(VueLazyload, {
...@@ -63,4 +65,6 @@ export default (Vue) => { ...@@ -63,4 +65,6 @@ export default (Vue) => {
Vue.component('h-file', HFile) Vue.component('h-file', HFile)
Vue.component('h-layout', HLayout) Vue.component('h-layout', HLayout)
Vue.component('currency-input', CurrencyInput) Vue.component('currency-input', CurrencyInput)
Vue.component('h-progress', HProgress)
Vue.component('h-range', HRange)
} }
src/main.js
View file @ 5a1f8810
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import Vue from 'vue'
import FastClick from 'fastclick' import FastClick from 'fastclick'
// eslint-disable-next-line import/no-extraneous-dependencies
import axios from 'axios' import axios from 'axios'
import App from './App' import App from './App'
import router from './router/index' import router from './router/index'
...@@ -95,7 +96,7 @@ Vue.config.productionTip = false ...@@ -95,7 +96,7 @@ Vue.config.productionTip = false
vum.$vumPlatform.ready(function () { vum.$vumPlatform.ready(function () {
if ((vum.Platform.isAndroid()) || (vum.Platform.isIOS())) { if ((vum.Platform.isAndroid()) || (vum.Platform.isIOS())) {
cordova.plugins.Keyboard.disableScroll(true) // cordova.plugins.Keyboard.disableScroll(true)
} }
}) })
......
src/pages/hlsPopup.vue
View file @ 5a1f8810
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
</h-button> </h-button>
<h-button class="button-class" type="primary" @click.native="showBigPicture">showBigPicture</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="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="selectListTwo">selectList 二级联动</h-button>
<h-button class="button-class" type="primary" @click.native="selectList">selectList 三级联动</h-button> <h-button class="button-class" type="primary" @click.native="selectList">selectList 三级联动</h-button>
...@@ -253,13 +254,13 @@ ...@@ -253,13 +254,13 @@
@input="onInput" @input="onInput"
@delete="onDelete"/>--> @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-view>
<h-header style="height: 43px !important;padding-top:0px"> <h-header style="height: 43px !important;padding-top:0px">
<div slot="left" class="h-header-btn">确定</div> <div slot="left" class="h-header-btn">确定</div>
<div slot="right" class="h-header-btn">清除</div> <div slot="right" class="h-header-btn">清除</div>
</h-header> </h-header>
<h-content style="top:44px !important;"> <h-content :cal-content="false">
<div id="draw" class="draw"/> <div id="draw" class="draw"/>
</h-content> </h-content>
</h-view> </h-view>
...@@ -432,6 +433,57 @@ export default { ...@@ -432,6 +433,57 @@ export default {
imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD', 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 () { selectListOne () {
var bpClassList = [ var bpClassList = [
...@@ -725,16 +777,13 @@ export default { ...@@ -725,16 +777,13 @@ export default {
} }
.sign-modal { .sign-modal {
.modal {
top: 50%; top: 50%;
}
.content { .content {
background-color: #fff; background-color: #fff;
} }
} }
} }
.login-modal {
height: 50%;
top: 50%
}
</style> </style>
src/pages/home.vue
View file @ 5a1f8810
...@@ -98,6 +98,14 @@ ...@@ -98,6 +98,14 @@
<input slot="content" type="text"> <input slot="content" type="text">
</item> </item>
</list-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> </h-content>
<!-- <s-tab> <!-- <s-tab>
<tab-item>Vue</tab-item> <tab-item>Vue</tab-item>
...@@ -109,7 +117,11 @@ ...@@ -109,7 +117,11 @@
</template> </template>
<script> <script>
import {Range} from 'vux'
export default { export default {
components: {
Range,
},
data () { data () {
return { return {
userImg: window.localStorage.userImg || '', userImg: window.localStorage.userImg || '',
...@@ -122,6 +134,15 @@ export default { ...@@ -122,6 +134,15 @@ export default {
}, },
autosize: true, autosize: true,
height: '', height: '',
decimal: false,
rangeValue: 40,
min: 20,
max: 80,
step: 10,
disabled: true,
disabledOpacity: 0.5,
rangeBarHeight: 1,
rangeHandleHeight: 20,
} }
}, },
watch: {}, watch: {},
...@@ -213,6 +234,17 @@ export default { ...@@ -213,6 +234,17 @@ export default {
this.$refs.textarea.style.height = this.height + 'px' 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> </script>
......
src/router/index.js
View file @ 5a1f8810
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Home from '@/pages/home'
// test工具类 // test工具类
import HlsPopup from '@/pages/hlsPopup'
import Radio from '@/pages/radioTest' import Radio from '@/pages/radioTest'
import HFile from '@/pages/fileTest'
import Form from '@/pages/form' 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) Vue.use(Router)
export default new Router({ export default new Router({
...@@ -22,7 +22,7 @@ export default new Router({ ...@@ -22,7 +22,7 @@ export default new Router({
{path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}}, {path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
{path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}}, {path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}},
{path: '/HFile', component: HFile, name: 'HFile', 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) { scrollBehavior (to, from, savedPosition) {
if (to.hash) { if (to.hash) {
......
src/scripts/hlsPopup.js
View file @ 5a1f8810
...@@ -298,6 +298,7 @@ export default { ...@@ -298,6 +298,7 @@ export default {
callBack: selectOption.returnItem, callBack: selectOption.returnItem,
code: selectOption.code, code: selectOption.code,
object: selectOption.object, object: selectOption.object,
multiple: selectOption.multiple,
}) })
} }
}) })
......
src/styles/variables.less
View file @ 5a1f8810
...@@ -100,3 +100,10 @@ ...@@ -100,3 +100,10 @@
@swipeout-button-primary-bg-color:@headerColor; @swipeout-button-primary-bg-color:@headerColor;
@swipeout-button-warn-bg-color:#f96268; @swipeout-button-warn-bg-color:#f96268;
@swipeout-button-default-bg-color:#c8c7cd; @swipeout-button-default-bg-color:#c8c7cd;
/**
* Range
*/
@range-disabled-opacity: 0.5;
@range-bar-default-color: #a9acb1;
@range-bar-active-color: @theme-color;
www.zip deleted 100644 → 0
View file @ 4852700f
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