Skip to content

H
hls-easy-ui
Commit 01a193c4 authored by JingChao's avatar JingChao
Browse files
Options

demo文档

parent b8f184eb
Hide whitespace changes
Inline Side-by-side
Showing with 1327 additions and 78 deletions
README.md
View file @ 01a193c4
...@@ -544,7 +544,8 @@ showActionSheetButton() { ...@@ -544,7 +544,8 @@ showActionSheetButton() {
### Note ### Note
hls-easy-ui#0.0.6 hls-easy-ui#0.0.6
[时间组件 Field](/packages/components/Field/README.md)
[时间组件 DateField](/packages/components/DataField/README.md) [时间组件 DateField](/packages/components/DataField/README.md)
[下拉框组建 SelectField](/packages/components/Select/README.md) [下拉框组建 SelectField](/packages/components/Select/README.md)
......
build/webpack.base.conf.js
View file @ 01a193c4
...@@ -38,7 +38,7 @@ let webpackConfig = { ...@@ -38,7 +38,7 @@ let webpackConfig = {
{ {
test: /\.js$/, test: /\.js$/,
loader: 'babel-loader', loader: 'babel-loader',
include: [resolve('src'), resolve('test'),resolve('packages')] include: [resolve('src'), resolve('test'), resolve('packages')]
}, },
{ {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
...@@ -68,7 +68,6 @@ let webpackConfig = { ...@@ -68,7 +68,6 @@ let webpackConfig = {
} }
} }
module.exports = vuxLoader.merge(webpackConfig, { module.exports = vuxLoader.merge(webpackConfig, {
plugins: [ plugins: [
'vux-ui', 'vux-ui',
...@@ -76,7 +75,7 @@ module.exports = vuxLoader.merge(webpackConfig, { ...@@ -76,7 +75,7 @@ module.exports = vuxLoader.merge(webpackConfig, {
{ {
name: 'duplicate-style', name: 'duplicate-style',
options: { options: {
cssProcessorOptions : { cssProcessorOptions: {
safe: true, safe: true,
zindex: false, zindex: false,
autoprefixer: { autoprefixer: {
...@@ -89,6 +88,6 @@ module.exports = vuxLoader.merge(webpackConfig, { ...@@ -89,6 +88,6 @@ module.exports = vuxLoader.merge(webpackConfig, {
} }
} }
}, },
{name: 'less-theme', path: 'src/styles/variables.less'} { name: 'less-theme', path: 'src/styles/variables.less' }
] ]
}) })
packages/components/Field/README.md 0 → 100755
View file @ 01a193c4
Field 输入框
```html
<h-field v-model="number" label="金额"/>
<h-field
v-model="number" format type="number"
clearable error
required label="金额"/>
<h-field
v-model="name"
clearable
required label="姓名"/>
<h-field
v-model="age"
:decimal="false"
type="number"
clearable error
required label="年龄"/>
<h-field
v-model="phone" :left-icon="leftIcon"
type="tel"
required label="手机号"/>
<h-field
v-model="password"
type="password"
required label="密码">
<i slot="left-icon" class="field-icon field-right-icon icon ion-close-circled"/>
</h-field>
<h-field
v-model="address" :autosize="true"
type="textarea"
inputAlign="left"
rows="1"
error
required label="通讯地址"/>
<h-field
v-model="homeAddress"
:autosize="true"
:word-limit="true" type="textarea" maxlength="50"
inputAlign="left"
clearable error
required label="家庭地址"/>
```
|字段名称 |字段说明 |类型 |必填 |默认 |
| ----|------|-------|------|------|
|value|当前值|String|Y|-|
|type|输入类型|String|N|text|
|decimal|是否支持小数（type=number有效）|Boolean|N|false|
|proportion|label与value比例|Array|N|[1,2]|
|required|是否必填|Boolean|N|false|
|readonly|只读属性|Boolean|N|false|
|disabled|禁用属性|Boolean|N|false|
|itemHeight|字端默认高度|Number|N|45|
|label|输入框左侧文本|String|Y|-|
|leftIcon|左侧图标名称或图片链接|String|N|-|
|rightIcon|右侧图标名称或图片链接|String|N|-|
|clearable|是否启用清除图标，点击清除图标后会清空输入框|Boolean|false|-|
|clearTrigger|显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示|String|N|focus|
|format|是否启用金额千分位化（type=number有效）|Boolean|false|-|
|maxlength|输入的最大字符数|Number,String|false|-|
|inputAlign|输入框对齐方式，可选值为 center left|String|false|right|
|placeholder|输入框默认提示|String|N|请输入+label|
|showPlaceholder|是否显示placeholder|Boolean|N|true|
|error|必输校验后输入框标红|Boolean|N|false|
|autosize|是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px|Boolean,Object|N|-|
|wordLimit|是否显示字数统计，需要设置maxlength属性|Boolean|N|false|
packages/components/Field/index.vue
View file @ 01a193c4
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
ref="fieldInput" ref="fieldInput"
v-bind="$attrs" v-bind="$attrs"
:readonly="readonly" :disabled="disabled" :placeholder="placehold" :value="value" :readonly="readonly" :disabled="disabled" :placeholder="placehold" :value="value"
:type="type" :class="('field-control-'+inputAlign)" class="field-control" @input="onInput($event.target.value)" :type="type" :class="('field-control-'+inputAlign)" class="field-control"
@input="onInput($event.target.value)"
@focus="onFocus" @focus="onFocus"
@blur="onBlur"> @blur="onBlur">
<input <input
...@@ -34,7 +35,8 @@ ...@@ -34,7 +35,8 @@
v-if="type==='textarea'" v-if="type==='textarea'"
ref="fieldInput" v-bind="$attrs" ref="fieldInput" v-bind="$attrs"
:readonly="readonly" :disabled="disabled" :placeholder="placehold" :value="value" :readonly="readonly" :disabled="disabled" :placeholder="placehold" :value="value"
:type="type" :class="('field-control-'+inputAlign)" class="field-control" @input="onInput($event.target.value)" :type="type" :class="('field-control-'+inputAlign)" class="field-control"
@input="onInput($event.target.value)"
@focus="onFocus" @focus="onFocus"
@blur="onBlur"/> @blur="onBlur"/>
<i v-if="showCancel" class="field-icon field-right-icon icon ion-close-circled" @touchstart="cleanValue"/> <i v-if="showCancel" class="field-icon field-right-icon icon ion-close-circled" @touchstart="cleanValue"/>
...@@ -43,13 +45,16 @@ ...@@ -43,13 +45,16 @@
<slot name="right-icon"/> <slot name="right-icon"/>
</div> </div>
</div> </div>
<div v-if="wordLimit && maxlength" class="field-word-limit"><span class="field-word-num">{{ count }}</span>/{{ maxlength }}</div> <div v-if="wordLimit && maxlength" class="field-word-limit"><span class="field-word-num">{{ count }}</span>/{{
maxlength }}
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {formatNumber, isDef, isObject} from '../../../packages/common/utils' import { formatNumber, isDef, isObject } from '../../../packages/common/utils'
export default { export default {
name: 'Field', name: 'Field',
inheritAttrs: false, inheritAttrs: false,
...@@ -64,7 +69,7 @@ export default { ...@@ -64,7 +69,7 @@ export default {
}, },
decimal: { decimal: {
type: Boolean, type: Boolean,
default: true, default: false,
}, },
proportion: { proportion: {
// name/content 横向面积比例 // name/content 横向面积比例
...@@ -102,7 +107,11 @@ export default { ...@@ -102,7 +107,11 @@ export default {
}, },
clearable: { clearable: {
type: Boolean, type: Boolean,
default: true, default: false,
},
clearTrigger: {
type: String,
default: 'focus',
}, },
format: { format: {
type: Boolean, type: Boolean,
...@@ -116,6 +125,10 @@ export default { ...@@ -116,6 +125,10 @@ export default {
type: String, type: String,
default: 'right', default: 'right',
}, },
showPlaceholder: {
type: Boolean,
default: true,
},
placeholder: { placeholder: {
type: String, type: String,
default: null, default: null,
...@@ -162,7 +175,9 @@ export default { ...@@ -162,7 +175,9 @@ export default {
return !!(this.rightIcon || this.$slots['right-icon']) return !!(this.rightIcon || this.$slots['right-icon'])
}, },
placehold () { placehold () {
return this.placeholder ? this.placeholder : '请输入' + this.label if (this.showPlaceholder) {
return this.placeholder ? this.placeholder : '请输入' + this.label
}
}, },
inputType () { inputType () {
if (this.type === 'number' && this.decimal) { if (this.type === 'number' && this.decimal) {
...@@ -181,8 +196,12 @@ export default { ...@@ -181,8 +196,12 @@ export default {
showCancel () { showCancel () {
if (this.clearable && !this.readonly && !this.disabled) { if (this.clearable && !this.readonly && !this.disabled) {
const hasValue = isDef(this.value) if (this.clearTrigger === 'focus') {
return hasValue && this.focused const hasValue = isDef(this.value)
return hasValue && this.focused
} else {
return isDef(this.value)
}
} }
}, },
...@@ -251,7 +270,7 @@ export default { ...@@ -251,7 +270,7 @@ export default {
// 检验输入的合法性 // 检验输入的合法性
validate () { validate () {
const { fieldInput } = this.$refs const { fieldInput } = this.$refs
const {required, error} = this const { required, error } = this
if (required && error) { if (required && error) {
this.hasError = !isDef(fieldInput.value) this.hasError = !isDef(fieldInput.value)
} }
...@@ -304,6 +323,7 @@ export default { ...@@ -304,6 +323,7 @@ export default {
<style lang="less"> <style lang="less">
@import "../../../packages/common/styles/vue-1px"; @import "../../../packages/common/styles/vue-1px";
.h-field { .h-field {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -311,27 +331,33 @@ export default { ...@@ -311,27 +331,33 @@ export default {
background-color: #fff; background-color: #fff;
position: relative; position: relative;
line-height: 24px; line-height: 24px;
&:after { &:after {
.setBottomLine(); .setBottomLine();
left: 15px; left: 15px;
} }
.field-icon{
// width: 16px; .field-icon {
// width: 16px;
font-size: 16px; font-size: 16px;
img{
img {
width: 16px; width: 16px;
position: relative; position: relative;
top:2px; top: 2px;
} }
} }
.field-left-icon{
.field-left-icon {
//line-height: 25px; //line-height: 25px;
margin-right: 4px; margin-right: 4px;
} }
.field-right-icon{
.field-right-icon {
//line-height: 25px; //line-height: 25px;
margin-left: 4px; margin-left: 4px;
} }
.field-title { .field-title {
line-height: 0.5rem; line-height: 0.5rem;
font-size: 14px; font-size: 14px;
...@@ -339,6 +365,7 @@ export default { ...@@ -339,6 +365,7 @@ export default {
letter-spacing: 0; letter-spacing: 0;
margin-right: 12px; margin-right: 12px;
} }
.required { .required {
&:before { &:before {
position: absolute; position: absolute;
...@@ -348,16 +375,19 @@ export default { ...@@ -348,16 +375,19 @@ export default {
content: '*'; content: '*';
} }
} }
.field-value{
.field-value {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
color: #666; color: #666;
text-align: right; text-align: right;
vertical-align: middle; vertical-align: middle;
.field-body{
.field-body {
display: flex; display: flex;
align-items: center; align-items: center;
.field-control{
.field-control {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
...@@ -370,17 +400,21 @@ export default { ...@@ -370,17 +400,21 @@ export default {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
resize: none; resize: none;
&-left{
&-left {
text-align: left; text-align: left;
} }
&-right{
&-right {
text-align: right; text-align: right;
} }
&-center{
&-center {
text-align: center; text-align: center;
} }
} }
} }
.field-control-error { .field-control-error {
.field-control { .field-control {
&, &,
...@@ -390,6 +424,7 @@ export default { ...@@ -390,6 +424,7 @@ export default {
} }
} }
} }
.field-word-limit { .field-word-limit {
margin-top: 4px; margin-top: 4px;
color: #646566; color: #646566;
...@@ -399,13 +434,14 @@ export default { ...@@ -399,13 +434,14 @@ export default {
} }
} }
&-disabled{ &-disabled {
.field-label{ .field-label {
color: #999; color: #999;
} }
.field-value { .field-value {
.field-body { .field-body {
.field-control{ .field-control {
color: #999; color: #999;
} }
} }
......
packages/components/HFile/index.vue
View file @ 01a193c4
...@@ -124,13 +124,11 @@ export default { ...@@ -124,13 +124,11 @@ export default {
.catch(vm.resetInput) .catch(vm.resetInput)
} }
} }
vm.fileRead(files) vm.fileRead(toArray(files))
}, },
fileRead (files) { fileRead (files) {
const oversize = isOversize(files, this.maxSize) const oversizeFiles = isOversize(files, this.maxSize)
if (oversize) {
files = files.filter(file => file.size <= this.maxSize)
}
if (Array.isArray(files)) { if (Array.isArray(files)) {
const maxCount = this.maxCount - this.fileList.length const maxCount = this.maxCount - this.fileList.length
...@@ -144,17 +142,18 @@ export default { ...@@ -144,17 +142,18 @@ export default {
content: contents[index], content: contents[index],
})) }))
this.onAfterRead(fileList, oversize) this.onAfterRead(fileList, oversizeFiles)
}) })
} else { } else {
readFile(files, this.resultType).then(content => { readFile(files, this.resultType).then(content => {
this.onAfterRead({ file: files, content: content }, oversize) this.onAfterRead({ file: files, content: content }, oversizeFiles)
}) })
} }
}, },
onAfterRead (files, oversize) { onAfterRead (files, oversizeFiles) {
if (oversize) { if (oversizeFiles.length) {
this.$emit('oversize', toArray(files)) this.$emit('oversize', toArray(oversizeFiles))
files = files.filter(file => file.size <= this.maxSize)
// return // return
} }
this.resetInput() this.resetInput()
......
packages/components/HFile/utils.js
View file @ 01a193c4
...@@ -23,7 +23,7 @@ export function readFile (file, resultType) { ...@@ -23,7 +23,7 @@ export function readFile (file, resultType) {
} }
export function isOversize (files, maxSize) { export function isOversize (files, maxSize) {
return toArray(files).some(file => file.size > maxSize) return toArray(files).filter(file => file.size > maxSize)
} }
export function isImageDataUrl (dataUrl) { export function isImageDataUrl (dataUrl) {
......
packages/components/ItemOption/OptionButton.vue
View file @ 01a193c4
<template> <template>
<div :class="type" class="function">{{ text }}</div> <div :class="type" class="function" @touchstart="itemClick">{{ text }}</div>
</template> </template>
<script> <script>
...@@ -22,8 +22,9 @@ export default { ...@@ -22,8 +22,9 @@ export default {
this.$parent && this.$parent.optionItem.splice(this.$parent.optionItem.indexOf(this), 1) this.$parent && this.$parent.optionItem.splice(this.$parent.optionItem.indexOf(this), 1)
}, },
methods: { methods: {
buttonClick (e) { itemClick (e) {
this.$emit('press', this.type) e.preventDefault()
this.$parent && this.$parent.reset()
}, },
}, },
} }
......
packages/components/ItemOption/index.vue
View file @ 01a193c4
<template> <template>
<div :class="cusClass" class="swipeout-list"> <div :class="cusClass" class="swipeout-list">
<div ref="item" :class="bottomBorder" class="item" data-type="0"> <div ref="optionItem" :class="bottomBorder" class="option-item" data-type="0">
<div <div
class="list-box" class="list-box"
@touchstart.capture="touchStart" @touchstart.capture="touchStart"
...@@ -62,7 +62,7 @@ export default { ...@@ -62,7 +62,7 @@ export default {
}, },
methods: { methods: {
touchStart (ev) { touchStart (ev) {
this.$refs.item.style.transform = 'translate3d(0px,0px,0px)' this.$refs.optionItem.style.transform = 'translate3d(0px,0px,0px)'
this.reset() this.reset()
ev = ev || event ev = ev || event
// tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕 // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
...@@ -88,7 +88,7 @@ export default { ...@@ -88,7 +88,7 @@ export default {
}, },
// 判断当前是否有滑块处于滑动状态 // 判断当前是否有滑块处于滑动状态
checkSlide () { checkSlide () {
let listItems = this.$refs.item let listItems = this.$refs.optionItem
for (let i = 0; i < listItems.length; i++) { for (let i = 0; i < listItems.length; i++) {
if (listItems[i].dataset.type === '1') { if (listItems[i].dataset.type === '1') {
return true return true
...@@ -106,10 +106,10 @@ export default { ...@@ -106,10 +106,10 @@ export default {
}) })
}, },
reset () { reset () {
let l = document.getElementsByClassName('item').length let l = document.getElementsByClassName('option-item').length
for (let i = 0; i < l; i++) { for (let i = 0; i < l; i++) {
document.getElementsByClassName('item')[i].style.transform = 'translate3d(0px,0px,0px)' document.getElementsByClassName('option-item')[i].style.transform = 'translate3d(0px,0px,0px)'
document.getElementsByClassName('item')[i].dataset.type = '0' document.getElementsByClassName('option-item')[i].dataset.type = '0'
} }
}, },
}, },
...@@ -124,14 +124,14 @@ export default { ...@@ -124,14 +124,14 @@ export default {
overflow: visible; overflow: visible;
padding: 0 0 0 15px; padding: 0 0 0 15px;
width: 100%; width: 100%;
.item[data-type="0"] { .option-item[data-type="0"] {
transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
transition: all 0.4s; transition: all 0.4s;
} }
.item[data-type="1"] { .option-item[data-type="1"] {
transition: all 1s; transition: all 1s;
} }
.item { .option-item {
overflow: visible; overflow: visible;
position: relative; position: relative;
height: 100%; height: 100%;
......
packages/components/STab/index.vue
View file @ 01a193c4
...@@ -83,7 +83,7 @@ export default { ...@@ -83,7 +83,7 @@ export default {
throw 'tab index out of bound exception' throw 'tab index out of bound exception'
} else { } else {
this.defaultActive === value this.defaultActive === value
this.setTabActive(value) // this.setTabActive(value)
} }
}, },
}, },
......
packages/components/Scroll/Bubble/index.vue
View file @ 01a193c4
...@@ -13,7 +13,7 @@ export default { ...@@ -13,7 +13,7 @@ export default {
data () { data () {
return { return {
width: 50, width: 50,
height: 80, height: 60,
} }
}, },
computed: { computed: {
...@@ -33,10 +33,10 @@ export default { ...@@ -33,10 +33,10 @@ export default {
this.ratio = 1 this.ratio = 1
this.width *= this.ratio this.width *= this.ratio
this.height *= this.ratio this.height *= this.ratio
this.initRadius = 18 * this.ratio this.initRadius = 11 * this.ratio // 外面阴影
this.minHeadRadius = 12 * this.ratio this.minHeadRadius = 12 * this.ratio
this.minTailRadius = 5 * this.ratio this.minTailRadius = 5 * this.ratio
this.initArrowRadius = 10 * this.ratio this.initArrowRadius = 6 * this.ratio // 里面的刷新
this.minArrowRadius = 6 * this.ratio this.minArrowRadius = 6 * this.ratio
this.arrowWidth = 3 * this.ratio this.arrowWidth = 3 * this.ratio
this.maxDistance = 40 * this.ratio this.maxDistance = 40 * this.ratio
......
packages/components/Scroll/index.vue
View file @ 01a193c4
...@@ -36,7 +36,8 @@ ...@@ -36,7 +36,8 @@
:bubbleY="bubbleY" :bubbleY="bubbleY"
name="pulldown" name="pulldown"
> >
<div v-if="pullDown" ref="pulldown" :style="pullDownStyle" :class="c('__pulldown')"> <div
v-if="pullDown" ref="pulldown" :style="pullDownStyle" :class="c('__pulldown')">
<div v-if="pullDownBefore" :class="c('__pulldown__before')"> <div v-if="pullDownBefore" :class="c('__pulldown__before')">
<Bubble :y="bubbleY"/> <Bubble :y="bubbleY"/>
</div> </div>
...@@ -113,8 +114,8 @@ export default { ...@@ -113,8 +114,8 @@ export default {
// 下拉刷新配置 // 下拉刷新配置
type: Object, type: Object,
default: () => ({ default: () => ({
threshold: 90, // 触发 pullingDown 的距离 threshold: 40, // 触发 pullingDown 的距离
stop: 40, // pullingDown 正在刷新 hold 时的距离 stop: 20, // pullingDown 正在刷新 hold 时的距离
txt: '刷新成功', txt: '刷新成功',
}), }),
}, },
...@@ -223,7 +224,7 @@ export default { ...@@ -223,7 +224,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) || -100 this.pullDownInitTop = parseInt(this.$refs.pulldown && getComputedStyle(this.$refs.pulldown).top) || -60
await this.$nextTick() await this.$nextTick()
this.initScroll() this.initScroll()
...@@ -499,7 +500,7 @@ export default { ...@@ -499,7 +500,7 @@ export default {
&__pulldown { &__pulldown {
position absolute position absolute
left 0 left 0
top -50px; /*no*/ top 0; /*no*/
width 100% width 100%
display flex display flex
justify-content center justify-content center
......
packages/components/ShowPicture/showpicture.vue
View file @ 01a193c4
...@@ -192,7 +192,6 @@ export default { ...@@ -192,7 +192,6 @@ 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 + '%'
}, },
......
src/App.vue
View file @ 01a193c4
...@@ -36,7 +36,7 @@ export default { ...@@ -36,7 +36,7 @@ export default {
this.$router.isBack = true this.$router.isBack = true
this.pathList = [] this.pathList = []
} }
this.$el.className = 'home-skeleton' //this.$el.className = 'home-skeleton'
let isBack = this.$router.isBack let isBack = this.$router.isBack
if (isBack) { if (isBack) {
this.transitionName = 'router-slide-right' this.transitionName = 'router-slide-right'
...@@ -80,4 +80,11 @@ export default { ...@@ -80,4 +80,11 @@ export default {
background: url("assets/skeleton.svg") no-repeat fixed; background: url("assets/skeleton.svg") no-repeat fixed;
background-size: contain; background-size: contain;
} }
h4{
font-size: 16px;
margin-left: 15px;
}
p{
padding: 15px;
}
</style> </style>
src/components/index.js 0 → 100644
View file @ 01a193c4
import Return from './return'
export default {
install: Vue => {
Vue.component('h-return', Return)
},
}
src/components/return.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-26 09:39
*/
<template>
<div class="h-header-btn">
<i class="ion-ios-arrow-back"/>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
},
}
</script>
src/main.js
View file @ 01a193c4
...@@ -11,6 +11,9 @@ import flexible from './common/ydui.flexible' ...@@ -11,6 +11,9 @@ import flexible from './common/ydui.flexible'
import {componentInstall, appStyle} from '../packages/index' import {componentInstall, appStyle} from '../packages/index'
import component from './components/index'
Vue.use(component)
/** /**
* 指令 * 指令
*/ */
......
src/pages/BottomTab/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-25 17:34
*/
<template>
<h-view>
<h-header class="bar-custom">
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">BottomTab</div>
</h-header>
<bottom-tab :showDivider="true">
<tab-button>返回</tab-button>
<tab-button>退出<img src="@/assets/image/warning@2x.png"></tab-button>
</bottom-tab>
</h-view>
</template>
<script>
export default {
name: 'BottomTabdemo',
data () {
return {}
},
methods: {},
}
</script>
<style scoped lang="less">
.h-bottom-tab{
.bottom-tab-button{
img{
height: 20px;
}
}
}
</style>
src/pages/Button/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-25 16:43
*/
<template>
<h-view>
<h-header class="bar-custom">
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">button</div>
</h-header>
<h-content>
<h4 class="item-title">按钮类型</h4>
<h-button class="button-class" type="rimless">rimless 按钮</h-button>
<h-button class="button-class" type="default">default 按钮</h-button>
<h-button class="button-class" type="primary">primary 按钮</h-button>
<h-button class="button-class" type="safety">safety 按钮</h-button>
<h-button class="button-class" type="warning">warning 按钮</h-button>
<h-button class="button-class" type="danger">danger 按钮</h-button>
<h4 class="item-title">按钮尺寸</h4>
<h-button class="button-class" size="mini">mini 按钮</h-button>
<h-button class="button-class" size="small">small 按钮</h-button>
<h-button class="button-class" size="normal">normal 按钮</h-button>
<h-button class="button-class" size="large">large 按钮</h-button>
<h-button class="button-class" size="huge">huge 按钮</h-button>
<h4 class="item-title">自定义圆角 (直接通过class设置)</h4>
<h-button class="button-class radius-small">rimless 按钮</h-button>
<h-button class="button-class radius-normal">default 按钮</h-button>
<h-button class="button-class radius-large">primary 按钮</h-button>
<h2 class="item-title">默认点击效果</h2>
<h-button class="button-class radius-small" type="rimless">基础按钮(无边框)</h-button>
<h-button class="button-class radius-small" type="rimless" shadow>基础按钮(无边框、有阴影效果)</h-button>
<h-button class="button-class radius-small purple">基础按钮(有背景色)</h-button>
<h4 class="item-title">禁用效果</h4>
<h-button class="button-class radius-small" disabled>基础按钮(禁用)</h-button>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'ButtonDemo',
data () {
return {}
},
methods: {},
}
</script>
<style scoped lang="less">
.button-class {
width: 90%;
margin: 10px 5%;
display: block;
&.image {
width: auto;
margin-right: 0;
display: inline-block;
}
&.radius-small {
border-radius: 6px;
}
&.radius-normal {
border-radius: 16px;
}
&.radius-large {
border-radius: 40px;
}
.spin {
vertical-align: middle;
}
.text {
font-size: 28px;
margin-left: 16px;
vertical-align: middle;
}
}
.purple {
color: #fff;
background-color: #7e57c2;
border: 1px solid #7e57c2;
}
.button {
background-color: @theme-color;
color: #ffffff;
height: 100px;
width: 600px;
border: 20px;
margin-top: 20px;
}
</style>
src/pages/Content/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-25 16:53
*/
<template>
<h-view>
<h-header class="bar-custom">
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">content</div>
</h-header>
<h-content>
<h4>文字内容</h4>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'ContentDemo',
data () {
return {}
},
methods: {},
}
</script>
<style scoped lang="less">
.content{
//background-color: #cfcfcf;
}
</style>
src/pages/Field/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-26 15:36
*/
<template>
<h-view class="form" title="Field">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">Field</div>
</h-header>
<h-content>
<h4>不同格式</h4>
<h-field
v-model="area"
label="地区"/>
<h-field
v-model="number" type="number" placeholder="请输入金额"
label="金额"/>
<h-field
v-model="phone"
type="tel"
label="手机号"/>
<h-field
v-model="password"
type="password"
label="密码"/>
<h4>文字左对其</h4>
<h-field
v-model="area" inputAlign="left"
label="地区"/>
<h4>只读</h4>
<h-field
v-model="readonly"
readonly label="只读效果"/>
<h4>禁用</h4>
<h-field
v-model="disabled"
disabled label="禁用效果"/>
<h4>聚焦时显示删除按钮</h4>
<h-field
v-model="clearable" clearable
label="删除按钮"/>
<h4>永远显示删除按钮</h4>
<h-field
v-model="clearable" clearable clearTrigger="always"
label="删除按钮"/>
<h4>必填</h4>
<h-field
v-model="required" :show-placeholder="false" required
label="必填"/>
<h4>必填校验</h4>
<h-field
v-model="required" placeholder="请输入内容" error required
label="必填"/>
<h4>只能输入整数</h4>
<h-field
v-model="number" type="number"
clearable error placeholder="请输入整数金额"
required label="金额"/>
<h4>可以输入小数</h4>
<h-field
v-model="number" :decimal="true" type="number"
clearable error placeholder="请输入金额"
required label="金额"/>
<h4>格式化金额</h4>
<h-field
v-model="number" :decimal="true" type="number" format
clearable error placeholder="请输入金额"
required label="金额"/>
<h4>行高自适应</h4>
<h-field
v-model="address" :autosize="true"
type="textarea"
inputAlign="left"
rows="1"
error
required label="通讯地址"/>
<h4>显示字数统计</h4>
<h-field
v-model="homeAddress"
:autosize="true"
:word-limit="true" type="textarea" maxlength="50"
inputAlign="left"
clearable error
required label="家庭地址"/>
<h4>左右侧图标</h4>
<h-field
v-model="area"
label="地区">
<i slot="left-icon" class="field-icon field-left-icon icon ion-android-favorite"/>
<i slot="right-icon" class="field-icon field-right-icon icon ion-android-arrow-forward"/>
</h-field>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'FieldDemo',
data () {
return {
area: '',
number: null,
readonly: '只读效果',
disabled: '禁用效果',
clearable: '',
required: '',
leftIcon: require('@/assets/image/warning@2x.png'),
name: '',
age: null,
phone: null,
password: 123456,
address: '安徽省芜湖市',
homeAddress: '上海市青浦区',
}
},
methods: {},
}
</script>
<style scoped lang="less">
</style>
src/pages/HFile/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-26 14:40
*/
<template>
<h-view title="HFile">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">HFile</div>
</h-header>
<h-content>
<h4>文件选择</h4>
<h-file
:fileList="fileList" v-model="fileList" :upload="upload"
:uploadConfig="uploadConfig" :disabled="disable" :accept="accept" :beforeRead="beforeRead"
:afterRead="afterRead" :maxCount="maxCount" :max-size="maxSize" :previewImage="previewImage"
:deleteImage="deleteImage"
:result-type="resultType"
@upload="uploaded"
@delete="deletePic"
@oversize="oversize"/>
<h4>自定义上传</h4>
<h-file
:fileList="fileList" v-model="fileList" :upload="upload"
:uploadConfig="uploadConfig" :disabled="disable" :accept="accept" :beforeRead="beforeRead"
:afterRead="afterRead" :maxCount="maxCount" :max-size="maxSize" :previewImage="previewImage"
:deleteImage="deleteImage"
:result-type="resultType"
@upload="uploaded"
@delete="deletePic"
@oversize="oversize">
<div class="file-chose">
文件上传 <i class="icon ion-ios-cloud-upload"/>
</div>
</h-file>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'FileDemo',
data () {
return {
fileList: [], // 文件数组 必填
disable: false, // 是否禁用文件上传 默认false 可选
accept: 'image/png,image/jpeg', // 接受的文件类型 可选
upload: false, // 选取完成是否自动上传 默认 false 可选
maxSize: 5000000, // 文件大小限制，单位为byte 可选 超过大小的文件会自动取消
maxCount: 5, // 文件上传数量限制 可选超过数量自动隐藏选择按钮
deleteImage: true, // 是否删除文件 默认true 可选
previewImage: true, // 是否在选取完成后展示预览图 默认true 可选
resultType: 'dataUrl', // 文件读取结果类型 dataUrl 可选值为text
uploadConfig: { // 文件上传配置
uploadUrl: $config.rootPath + '/app/fileUploadSvc?sysName=HLS_APP&apiName=attachment_upload', // 上传的URL
params: { // 上传的额外参数
user_id: 1,
source_type: 'HLS_DOC_FILE_TEMPLET',
pkvalue: 42,
},
uploadSuccess: this.fileSuccess, // 上传成功后的回调函数 用于给文件添加服务端唯一标示或其他
},
money: null,
}
},
methods: {
/**
* email事件 可选
* 删除文件后触发 返回当前文件以及 对应的index
* @param file
* @param index
*/
deletePic (file, index) {
// debugger
},
/**
* 可选
* 文件选择完成后读取前触发 返回当前选择的文件数组
* 返回 ture 或者promise对象 标示继续读取，否则终止 操作
* @param files 选择的文件数组
* @returns {boolean}
*/
beforeRead (files) {
files.forEach((file, index) => {
console.log(file.size)
})
return true
},
/**
* 可选
* 文件读取成功后触发添加了文件的content内容
* @param files 选择的文件数组
* @returns {boolean}
*/
afterRead (files) {
files.forEach((item, index) => {
console.log(item.file.name)
})
return true
},
/**
* email事件 可选
* 全部文件上传成功后触发
* @param fileList 全部文件数组
*/
uploaded (fileList) {
debugger
},
/**
* email事件 可选
* 文件大小超过配置的大小
* @param files
*/
oversize (files) {
debugger
},
/**
* 每个文件上传成功后的回调 可选配置
* @param fileList 文件数组
* @param result 上传返回结果
*/
fileSuccess (fileList, result) {
this.fileList = fileList
debugger
this.fileList.forEach((itemFile, index) => {
if (result.response && itemFile.file && !itemFile.attachment_id && result.response.fileName === itemFile.file.name) {
itemFile.attachment_id = result.response.attachment_id
}
})
},
},
}
</script>
<style scoped lang="less">
.content{
.h-file{
.file-chose{
width: 110px;
height: 44px;
background-color: #07c160;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 4px;
.icon{
margin-left: 10px;
font-size: 20px;
//color: #fff;
}
}
}
}
</style>
src/pages/Header/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-25 15:31
*/
<template>
<h-view>
<h-header class="bar-custom">
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">header</div>
</h-header>
<h4>基本用法</h4>
<h-header>
<div slot="center">header</div>
</h-header>
<h4>左侧按钮、右侧按钮</h4>
<h-header>
<div slot="left" class="h-header-btn">左侧</div>
<div slot="center">中间title</div>
<div slot="right" class="h-header-btn">右侧</div>
</h-header>
</h-view>
</template>
<script>
export default {
name: 'HeaderDemo',
data () {
return {}
},
methods: {
click(e){
debugger
}
},
}
</script>
<style lang="less">
</style>
src/pages/ItemOption/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-26 14:09
*/
<template>
<h-view title="ItemOption" class="option-demo">
<h-header class="bar-custom">
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">ItemOption</div>
</h-header>
<h-content>
<h4>左滑删除</h4>
<list-item>
<item v-for="(color,index) in colors" :showName="false" :key="index">
<item-option
ref="option"
class="mySlider">
<div>{{ color.name }}</div>
<div>{{ color.hex }}</div>
<div slot="buttons">
<option-button type="default" text="默认"/>
<option-button type="primary" text="编辑"/>
<option-button type="warn" text="删除" @click.native="deleteFun(index)"/>
</div>
</item-option>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'ItemOptiondemo',
data () {
return {
colors: [{ name: 'Yellow', hex: '#f4d03f' }, { name: 'Green', hex: '#229954' }, {
name: 'Purple',
hex: '#9b59b6',
}],
}
},
methods: {
deleteFun (index) {
this.colors.remove(index)
// this.$refs.option[index].reset()
this.colors.sort()
},
},
}
</script>
<style lang="less">
.option-demo{
.hls-item{
padding: 0;
.contents{
padding: 0;
}
&.activated{
opacity: 1;
}
}
}
</style>
src/pages/List/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-26 09:38
*/
<template>
<h-view title="List" class="list-demo">
<h-header class="bar-custom">
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">List</div>
</h-header>
<h-content>
<h4>基础用法</h4>
<list-item :item-height="55" class="wx-list">
<item>
<img slot="left-icon" src="@/assets/image/friend@2x.png" class="left-icon">
<div slot="name">朋友圈</div>
<img slot="right-icon" src="@/assets/image/right-arrow@2x.png" style="width: 8px" class="right-icon">
</item>
</list-item>
<list-item :item-height="55" class="wx-list">
<item>
<img slot="left-icon" src="@/assets/image/shak@2x.png" class="left-icon">
<div slot="name">扫一扫</div>
<img slot="right-icon" src="@/assets/image/right-arrow@2x.png" style="width: 8px" class="right-icon">
</item>
</list-item>
<h4>input用法</h4>
<list-item>
<item>
<img slot="left-icon" src="@/assets/image/warning@2x.png" class="left-icon">
<div slot="name" class="required">检查更新</div>
<div slot="content">检查更新</div>
<img slot="right-icon" src="@/assets/image/arrow-down@2x.png" style="width: 8px" class="right-icon">
</item>
<item>
<img slot="left" src="@/assets/image/warning@2x.png" class="left-icon">
<div slot="name" class="required">字数测试</div>
<div slot="content">我是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字</div>
</item>
<item :showArrow="true">
<div slot="name" class="required">客户名称</div>
<input slot="content" v-model="bp_name" type="text" placeholder="请输入">
</item>
</list-item>
<h4>列表用法</h4>
<list-item :item-height="80">
<item
v-for="(list,index) in [1,2,3,4]" :key="index" :proportion="[5,1]">
<img slot="left-icon" src="@/assets/image/item@2x.png" class="left-icon">
<div slot="name" class="text">
<div class="cont-name" style="font-size: 16px;color: #5D98F6">合同编号</div>
<div class="cont-type" style="color: #8C8C8C;">承租人名称</div>
</div>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'ListDemo',
data () {
return {
bp_name: '张三',
}
},
methods: {},
}
</script>
<style lang="less">
.list-demo {
.hls-item {
.contents {
.add-name {
.left-icon {
width: 28px;
}
.text {
margin-left: 15px;
.cont {
margin-top: 5px;
font-size: 13px;
line-height: 18px;
&:first-child {
margin-top: 0;
}
}
.cont-num {
margin-top: 8px;
font-size: 15px;
line-height: 21px;
color: #5D98F6;
}
}
}
}
}
.wx-list{
.contents{
.add-name{
font-size: 16px;
.left-icon {
width: 24px;
}
}
}
}
}
</style>
src/pages/Model/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-25 17:47
*/
<template>
<h-view class="modal-demo">
<h-header class="bar-custom">
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">Model</div>
</h-header>
<h-content>
<p>position默认top 可选 bottom left right。需结合class model属性从写样式</p>
<h-button class="button-class" size="normal" @click.native="showModel">model</h-button>
</h-content>
<h-modal ref="model" v-model="show" :positon="position">
<h-content>
<h4>model内容</h4>
<h-button class="button-class" size="normal" @click.native="hideModel">hideModel</h-button>
</h-content>
</h-modal>
</h-view>
</template>
<script>
export default {
name: 'ModelDemo',
data () {
return {
show: false,
position: 'top',
}
},
methods: {
showModel () {
this.show = true
},
hideModel () {
this.$refs.model.hideModal()
},
},
}
</script>
<style lang="less">
.modal-demo {
.button-class {
width: 90%;
margin: 10px 5%;
display: block;
}
.modal {
top: 50%;
}
}
</style>
src/pages/STab/index.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-25 15:46
*/
<template>
<h-view title="tab">
<h-header class="bar-custom">
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">tab</div>
</h-header>
<h4>基础用法</h4>
<s-tab>
<tab-item>app</tab-item>
<tab-item>vue</tab-item>
</s-tab>
<h4>自定义图标</h4>
<s-tab>
<tab-item><img src="@/assets/image/warning@2x.png"></tab-item>
<tab-item><img src="@/assets/image/logo.png"></tab-item>
<tab-item>angular</tab-item>
<tab-item>react</tab-item>
</s-tab>
<h4>下边框和分割线</h4>
<s-tab :has-border="true" :show-divider="true">
<tab-item><img src="@/assets/image/warning@2x.png"></tab-item>
<tab-item><img src="@/assets/image/logo.png"></tab-item>
<tab-item>angular</tab-item>
<tab-item>react</tab-item>
</s-tab>
<h4>默认显示及点击事件</h4>
<s-tab :has-border="true" :show-divider="true" v-model="index" @tabClick="tabClick">
<tab-item><img src="@/assets/image/warning@2x.png"></tab-item>
<tab-item><img src="@/assets/image/logo.png"></tab-item>
<tab-item>angular</tab-item>
<tab-item>react</tab-item>
<tab-item>ionic</tab-item>
<tab-item>jquery</tab-item>
<tab-item>react</tab-item>
</s-tab>
</h-view>
</template>
<script>
export default {
name: 'Tab',
data () {
return {
hasBorder: true,
showDivider: true,
index: 2,
}
},
methods: {
tabClick (index) {
console.log(index)
},
},
}
</script>
<style scoped lang="less">
img {
height: 16px;
}
</style>
src/pages/Scroll/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-25 17:03
*/
<template>
<h-view title="scroll">
<h-header class="bar-custom">
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">scroll</div>
</h-header>
<scroll
ref="scroll" :pullUp="true" :pull-down="true" @pullingUp="loadMore"
@pullingDown="loadMore">
<list-item>
<item v-for="item in list" :key="item">
<i slot="left-icon" class="icon ion-ios-arrow-back"/>
<p slot="name">{{ item }}</p>
</item>
</list-item>
</scroll>
</h-view>
</template>
<script>
export default {
name: 'ScrollDemo',
data () {
return {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
page: 1,
}
},
methods: {
loadMore () {
let vm = this
if (vm.page <= 5) {
setTimeout(() => {
for (let i = 1; i <= 10; i++) {
vm.list.push(vm.page * 10 + i)
}
vm.page += 1
vm.$refs.scroll.update(false)
}, 500)
} else {
vm.$refs.scroll.update(true)
}
},
},
}
</script>
<style scoped lang="less">
</style>
src/pages/ScrollTest.vue
View file @ 01a193c4
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<scroll ref="scroll" :pullUp="true" @pullingUp="loadMore"> <scroll ref="scroll" :pullUp="true" @pullingUp="loadMore">
<list-item> <list-item>
<item v-for="item in list" :key="item"> <item v-for="item in list" :key="item">
<i slot="left-icon" class="icon ion-ios-arrow-back"></i> <i slot="left-icon" class="icon ion-ios-arrow-back"/>
<p slot="name">{{ item }}</p> <p slot="name">{{ item }}</p>
</item> </item>
</list-item> </list-item>
......
src/pages/Swipe/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-26 09:23
*/
<template>
<h-view>
<h-header class="bar-custom">
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">Swipe</div>
</h-header>
<h-content>
<h4 class="item-title">Swipe基础使用</h4>
<swipe
:interval="5000" @start="start" @move="move"
@change="change">
<swipe-item>
<div :style="{'background': bgColor[0]}" class="item-bg">0</div>
</swipe-item>
<swipe-item>
<div :style="{'background': bgColor[1]}" class="item-bg">1</div>
</swipe-item>
<swipe-item>
<div :style="{'background': bgColor[2]}" class="item-bg">2</div>
</swipe-item>
</swipe>
<h4 class="item-title">纵向滚动</h4>
<swipe :vertical="true" style="height: 200px">
<swipe-item v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}">
<div class="item-bg">{{ key-1 }}</div>
</swipe-item>
</swipe>
<h4 class="item-title">定制indicators</h4>
<swipe :index.sync="index">
<swipe-item v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}">
<div class="item-bg">{{ key-1 }}</div>
</swipe-item>
<div v-for="key in count" slot="indicators" :key="key" :class="['indicators', {'active': key-1 === index}]"/>
</swipe>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'SwipeDemo',
data () {
return {
count: 3,
index: 1,
colors: [{ name: 'Yellow', hex: '#f4d03f' }, { name: 'Green', hex: '#229954' }, {
name: 'Purple',
hex: '#9b59b6',
}],
bgColor: ['#5D98F6', '#1aad19', '#eebe41'],
}
},
methods: {
start (i) {
console.log(`start: ${i}`)
},
move (i) {
console.log(`move: ${i}`)
},
change (i) {
// console.log(`change: ${i}`)
},
},
}
</script>
<style scoped lang="less">
.item-bg {
height: 200px;
line-height: 200px;
text-align: center;
font-size: 20px;
font-weight: 500;
}
.indicators {
height: 14px;
width: 14px;
background-image: url('../../assets/image/logo.png');
background-position: center;
background-size: cover;
opacity: 0.5;
&.active {
opacity: 1;
}
}
</style>
src/pages/demo.vue 0 → 100644
View file @ 01a193c4
/**
* @Author think
* @Date 2020-08-25 15:04
*/
<template>
<h-view title="demo">
<h-header>
<div slot="center">demo</div>
</h-header>
<h-content>
<list-item>
<item>
<router-link slot="name" to="/header">header</router-link>
</item>
<item>
<router-link slot="name" to="/tab">STab</router-link>
</item>
<item>
<router-link slot="name" to="/button">HButton</router-link>
</item>
<item>
<router-link slot="name" to="/content">HContent</router-link>
</item>
<item>
<router-link slot="name" to="/scroll">Scroll</router-link>
</item>
<item>
<router-link slot="name" to="/bottomTab">底部按钮BottomTab</router-link>
</item>
<item>
<router-link slot="name" to="/model">Modal</router-link>
</item>
<item>
<router-link slot="name" to="/swipe">Swipe</router-link>
</item>
<item>
<router-link slot="name" to="/list">List</router-link>
</item>
<item>
<router-link slot="name" to="/option">itemOption</router-link>
</item>
<item>
<router-link slot="name" to="/file">HFile</router-link>
</item>
<item>
<router-link slot="name" to="/field">Field</router-link>
</item>
<item>
<section slot="name">CurrencyInput</section>
</item>
<item>
<section slot="name">CheckBox</section>
</item>
<item>
<section slot="name">DateField</section>
</item>
<item>
<section slot="name">selectField</section>
</item>
<item>
<section slot="name">CheckBox</section>
</item>
<item>
<section slot="name">Radio</section>
</item>
<item>
<section slot="name">Switch</section>
</item>
<item>
<section slot="name">CheckBox</section>
</item>
<item>
<section slot="name">Range</section>
</item>
<item>
<section slot="name">Progress</section>
</item>
<item>
<section slot="name">Spin</section>
</item>
<item>
<section slot="name">TopTips</section>
</item>
<item>
<section slot="name">Dialog</section>
</item>
<item>
<section slot="name">ActionSheet</section>
</item>
<item>
<section slot="name">NumberKeyboard</section>
</item>
<item>
<section slot="name">Select</section>
</item>
<item>
<section slot="name">ShowPicture</section>
</item>
<item>
<section slot="name">Toast</section>
</item>
<item>
<section slot="name">Alert</section>
</item>
<item>
<section slot="name">Confirm</section>
</item>
<item>
<section slot="name">Loading</section>
</item>
<item>
<section slot="name">Datetime</section>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'Demo',
data () {
return {}
},
methods: {},
}
</script>
<style lang="less">
h4{
font-size: 20px;
margin-left: 15px;
}
a{
width: 100%;
}
</style>
src/pages/fileTest.vue
View file @ 01a193c4
...@@ -6,9 +6,7 @@ ...@@ -6,9 +6,7 @@
<template> <template>
<h-view title="HFile"> <h-view title="HFile">
<h-header> <h-header>
<div slot="left" class="h-header-btn" @click="$routeGo()"> <h-return slot="left" @click.native="$routeGo()"/>
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">HFile</div> <div slot="center">HFile</div>
</h-header> </h-header>
<h-content> <h-content>
......
src/pages/form.vue
View file @ 01a193c4
...@@ -6,9 +6,7 @@ ...@@ -6,9 +6,7 @@
<template> <template>
<h-view class="form" title="From"> <h-view class="form" title="From">
<h-header> <h-header>
<div slot="left" class="h-header-btn" @click="$hlsExit()"> <h-return slot="left" @click.native="$routeGo()"/>
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">From</div> <div slot="center">From</div>
<div slot="right" class="h-header-btn">右边</div> <div slot="right" class="h-header-btn">右边</div>
</h-header> </h-header>
......
src/pages/hlsPopup.vue
View file @ 01a193c4
<template> <template>
<h-view class="public-style hls-popup" style="height: 100%" title="封装测试"> <h-view class="public-style hls-popup" style="height: 100%" title="封装测试">
<h-header class="bar-custom"> <h-header class="bar-custom">
<div slot="left" class="h-header-btn" @click="$routeGo()"> <h-return slot="left" @click.native="$routeGo()"/>
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">封装测试</div> <div slot="center">封装测试</div>
<div slot="right" class="h-header-btn"> <div slot="right" class="h-header-btn">
操作 操作
......
src/pages/home.vue
View file @ 01a193c4
<template> <template>
<h-view id="home" class="public-style" title="小易"> <h-view id="home" class="public-style" title="小易">
<h-header :has-border="false" class="bar-custom"> <h-header :has-border="false" class="bar-custom">
<div slot="left" class="h-header-btn" @click="$hlsExit()"> <h-return slot="left" @click.native="$routeGo()"/>
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">小易</div> <div slot="center">小易</div>
</h-header> </h-header>
<s-tab> <s-tab>
......
src/router/index.js
View file @ 01a193c4
...@@ -5,19 +5,34 @@ import Router from 'vue-router' ...@@ -5,19 +5,34 @@ import Router from 'vue-router'
import Radio from '@/pages/radioTest' import Radio from '@/pages/radioTest'
import Form from '@/pages/form' import Form from '@/pages/form'
const Demo = resolve => require.ensure([], () => { resolve(require('@/pages/demo')) }, 'demo')
const Home = resolve => require.ensure([], () => { resolve(require('@/pages/home')) }, 'home') const Home = resolve => require.ensure([], () => { resolve(require('@/pages/home')) }, 'home')
const HlsPopup = resolve => require.ensure([], () => { resolve(require('@/pages/hlsPopup')) }, 'hlsPopup') const HlsPopup = resolve => require.ensure([], () => { resolve(require('@/pages/hlsPopup')) }, 'hlsPopup')
const HFile = () => import(/* webpackChunkName:'HFile' */ '@/pages/fileTest') const HFile = () => import(/* webpackChunkName:'HFile' */ '@/pages/fileTest')
const scrollTest = resolve => require.ensure([], () => { resolve(require('@/pages/scrollTest')) }, 'scroll') const scrollTest = resolve => require.ensure([], () => { resolve(require('@/pages/scrollTest')) }, 'scroll')
const Header = resolve => require.ensure([], () => { resolve(require('@/pages/Header/demo')) }, 'header')
const Tab = resolve => require.ensure([], () => { resolve(require('@/pages/STab/index')) }, 'stab')
const Button = resolve => require.ensure([], () => { resolve(require('@/pages/Button/demo')) }, 'button')
const Content = resolve => require.ensure([], () => { resolve(require('@/pages/Content/demo')) }, 'content')
const Scroll = resolve => require.ensure([], () => { resolve(require('@/pages/Scroll/demo')) }, 'scroll')
const BottomTab = resolve => require.ensure([], () => { resolve(require('@/pages/BottomTab/demo')) }, 'BottomTab')
const Model = resolve => require.ensure([], () => { resolve(require('@/pages/Model/demo')) }, 'model')
const Swipe = resolve => require.ensure([], () => { resolve(require('@/pages/Swipe/demo')) }, 'swipe')
const List = resolve => require.ensure([], () => { resolve(require('@/pages/List/demo')) }, 'list')
const ItemOption = resolve => require.ensure([], () => { resolve(require('@/pages/ItemOption/demo')) }, 'option')
const File = resolve => require.ensure([], () => { resolve(require('@/pages/HFile/demo')) }, 'file')
const Field = resolve => require.ensure([], () => { resolve(require('@/pages/Field/demo')) }, 'field')
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/',
redirect: '/home', redirect: '/demo',
}, },
{path: '/demo', component: Demo, name: 'Demo', meta: {keepAlive: true}},
{path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}}, {path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}},
// test工具类 // test工具类
{path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}}, {path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
...@@ -25,6 +40,20 @@ export default new Router({ ...@@ -25,6 +40,20 @@ export default new Router({
{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}},
{path: '/scrollTest', component: scrollTest, name: 'scrollTest', meta: {keepAlive: true}}, {path: '/scrollTest', component: scrollTest, name: 'scrollTest', meta: {keepAlive: true}},
{path: '/header', component: Header, name: 'Header', meta: {keepAlive: false}},
{path: '/tab', component: Tab, name: 'Tab', meta: {keepAlive: false}},
{path: '/button', component: Button, name: 'Button', meta: {keepAlive: false}},
{path: '/content', component: Content, name: 'Content', meta: {keepAlive: false}},
{path: '/scroll', component: Scroll, name: 'Scroll', meta: {keepAlive: false}},
{path: '/bottomTab', component: BottomTab, name: 'BottomTab', meta: {keepAlive: false}},
{path: '/model', component: Model, name: 'Model', meta: {keepAlive: false}},
{path: '/swipe', component: Swipe, name: 'Swipe', meta: {keepAlive: false}},
{path: '/list', component: List, name: 'List', meta: {keepAlive: false}},
{path: '/option', component: ItemOption, name: 'ItemOption', meta: {keepAlive: false}},
{path: '/file', component: File, name: 'File', meta: {keepAlive: false}},
{path: '/field', component: Field, name: 'Field', meta: {keepAlive: false}},
], ],
scrollBehavior (to, from, savedPosition) { scrollBehavior (to, from, savedPosition) {
if (to.hash) { if (to.hash) {
......
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