Skip to content

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

component demo

parent 8fa33570
Hide whitespace changes
Inline Side-by-side
Showing with 630 additions and 295 deletions
build/webpack.base.conf.js
View file @ b81c157d
...@@ -16,7 +16,7 @@ let webpackConfig = { ...@@ -16,7 +16,7 @@ let webpackConfig = {
}, },
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: '[name].js', filename: '[name][id].js',
publicPath: process.env.NODE_ENV === 'production' publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath ? config.build.assetsPublicPath
: config.dev.assetsPublicPath : config.dev.assetsPublicPath
......
build/webpack.lib.conf.js
View file @ b81c157d
...@@ -21,7 +21,7 @@ const webpackConfig = merge(baseWebpackConfig, { ...@@ -21,7 +21,7 @@ const webpackConfig = merge(baseWebpackConfig, {
}, },
output: { output: {
path: path.resolve(__dirname, '../lib'), path: path.resolve(__dirname, '../lib'),
filename: '[name].js', filename: '[name][id].js',
chunkFilename: utils.assetsPath('js/[name][id].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[name][id].[chunkhash].js'),
library: 'easyUI', library: 'easyUI',
libraryTarget: 'umd', libraryTarget: 'umd',
......
build/webpack.prod.conf.js
View file @ b81c157d
...@@ -25,8 +25,8 @@ const webpackConfig = merge(baseWebpackConfig, { ...@@ -25,8 +25,8 @@ const webpackConfig = merge(baseWebpackConfig, {
devtool: config.build.productionSourceMap ? config.build.devtool : false, devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'), filename: utils.assetsPath('js/[name][id].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') chunkFilename: utils.assetsPath('js/[name][id].[chunkhash].js')
}, },
plugins: [ plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html // http://vuejs.github.io/vue-loader/en/workflow/production.html
......
packages/common/styles/field.less 0 → 100644
View file @ b81c157d
@import "vue-1px";
.h-field {
width: 100%;
display: flex;
padding: 10px 15px;
background-color: #fff;
position: relative;
line-height: 24px;
&:after {
.setBottomLine();
left: 15px;
}
.field-icon {
// width: 16px;
font-size: 16px;
img {
width: 16px;
position: relative;
top: 2px;
}
}
.field-left-icon {
//line-height: 25px;
margin-right: 4px;
}
.field-right-icon {
//line-height: 25px;
margin-left: 4px;
}
.field-title {
line-height: 0.5rem;
font-size: 14px;
color: #333;
letter-spacing: 0;
margin-right: 12px;
}
.required {
&:before {
position: absolute;
left: 8px;
color: #D24E4E;
font-size: 14px;
content: '*';
}
}
.field-value {
position: relative;
overflow: hidden;
color: #666;
text-align: right;
vertical-align: middle;
.field-body {
display: flex;
align-items: center;
.field-control {
display: block;
box-sizing: border-box;
font-size: 14px;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
color: #666;
line-height: inherit;
background-color: transparent;
border: 0;
resize: none;
&-left {
text-align: left;
}
&-right {
text-align: right;
}
&-center {
text-align: center;
}
}
}
.field-control-error {
.field-control {
&,
&::placeholder {
color: #ee0a24;
-webkit-text-fill-color: currentColor;
}
}
}
.field-word-limit {
margin-top: 4px;
color: #646566;
font-size: 12px;
line-height: 16px;
text-align: right;
}
}
&-disabled {
.field-label {
color: #999;
}
.field-value {
.field-body {
.field-control {
color: #999;
}
}
}
}
}
packages/components/ActionSheet/demo.vue 0 → 100644
View file @ b81c157d
/**
* @Author think
* @Date 2020-09-02 16:46
*/
<template>
<h-view title="ActionSheet">
<h-header >
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">ActionSheet</div>
</h-header>
<h-content>
<h-button class="button-class" type="primary" @click.native="showActionSheet">普通sheet</h-button>
<h-button class="button-class" type="primary" @click.native="showActionSheetButton">区分颜色sheet</h-button>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'Demo',
data () {
return {}
},
methods: {
showActionSheet () {
let vm = this
vm.hlsPopup.showActionSheet({
titleText: '请选择照片',
buttonArray: ['拍照', '从相册取'],
callback: (index) => {
alert(index)
},
})
},
showActionSheetButton () {
let vm = this
vm.hlsPopup.showActionSheet({
titleText: '照片',
buttonArray: [{ text: '拍照', type: 'warn' }, { text: '从相册取', type: 'primary' }],
callback: (index) => {
alert(index)
},
})
},
},
}
</script>
<style scoped lang="less">
.button-class {
width: 90%;
margin: 10px 5%;
display: block;
}
</style>
packages/components/CheckBox/demo.vue 0 → 100644
View file @ b81c157d
/**
* @Author think
* @Date 2020-09-01 16:32
*/
<template>
<h-view title="Checkbox">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">CheckBox</div>
</h-header>
<h-content>
<list-item>
<item>
<section slot="name">启用</section>
<h-check slot="content" v-model="enabled"/>
</item>
<item>
<section slot="name">启用</section>
<h-check slot="content" v-model="enabled" :disable="true"/>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
enabled: true,
}
},
methods: {},
}
</script>
<style lang="less">
@check-box-bg:#48d2a0;
</style>
packages/components/CheckBox/index.vue
View file @ b81c157d
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<template> <template>
<label class="h-checkbox" @click="checked"> <label class="h-checkbox" @click="checked">
<label class="checkbox"> <label class="checkbox">
<input :checked="value" :disabled="disable" type="checkbox"> <input v-bind="$attrs" :checked="value" :disabled="disable" type="checkbox">
</label> </label>
</label> </label>
</template> </template>
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
<script> <script>
export default { export default {
name: 'CheckBox', name: 'CheckBox',
inheritAttrs: true,
props: { props: {
value: { value: {
type: Boolean, type: Boolean,
...@@ -56,14 +57,16 @@ export default { ...@@ -56,14 +57,16 @@ export default {
padding: 5px 5px; padding: 5px 5px;
input { input {
width: 22px; width: 20px;
height: 22px; height: 20px;
border-radius: 11px; border-radius: 10px;
&:after { &:after {
top: 32%; top: 35%;
left: 20%; left: 20%;
opacity: 1; opacity: 1;
width: 0.24rem;
height: 0.10rem;
border-width: 2px; /*no*/ border-width: 2px; /*no*/
} }
......
packages/components/CurrencyInput/demo.vue 0 → 100644
View file @ b81c157d
/**
* @Author think
* @Date 2020-09-01 16:03
*/
<template>
<h-view title="CurrencyInput">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">CurrencyInput</div>
</h-header>
<h-content>
<list-item>
<item>
<section slot="name">单价</section>
<currency-input slot="content" v-model="money"/>
</item>
<item>
<section slot="name">总价</section>
<currency-input slot="content" v-model="total" :disabled="true"/>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
money: 0,
total: 2000,
}
},
methods: {},
}
</script>
<style scoped lang="less">
</style>
packages/components/CurrencyInput/index.vue
View file @ b81c157d
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
import {formatNumber} from '../../../packages/common/utils' import {formatNumber} from '../../../packages/common/utils'
export default { export default {
name: 'CurrencyInput', name: 'CurrencyInput',
inheritAttrs: false, inheritAttrs: true,
props: { props: {
value: { value: {
type: Number | String, type: Number | String,
......
packages/components/DateField/README.md
View file @ b81c157d
...@@ -24,7 +24,7 @@ DateField 日期组建 ...@@ -24,7 +24,7 @@ DateField 日期组建
|proportion|字端明与字端占比|Array|N|[1,2]| |proportion|字端明与字端占比|Array|N|[1,2]|
|itemHeight|字端默认高度|Number|N|45| |itemHeight|字端默认高度|Number|N|45|
|hasBorder|是否有下边框|Boolean|N|true| |hasBorder|是否有下边框|Boolean|N|true|
|showIcon|右边下拉箭头|Boolean|N|true| |leftIcon|左边区域图标|String|N|-|
|rightIcon|自定义下拉箭头|String|N|-| |rightIcon|自定义下拉箭头|String|N|-|
|@onSelect|下拉框选中函数|Function|N|-| |@onSelect|下拉框选中函数|Function|N|-|
packages/components/DateField/demo.vue 0 → 100644
View file @ b81c157d
/**
* @Author think
* @Date 2020-09-01 17:18
*/
<template>
<h-view title="DateField">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">DateField</div>
</h-header>
<h-content>
<list-item>
<DateField v-model="startDate" :clearable="false" label="开始时间" required/>
<DateField v-model="endDate" label="结束时间" disabled/>
<DateField v-model="maxDate" label="最大值" required max-year="2021"/>
<DateField
v-model="leftDate" label="字体居左" placeholder="请输入时间" input-align="left"
@onSelect="onSelect"/>
<DateField
v-model="leftDate" label="选中与删除" placeholder="请输入时间" input-align="left"
format="YYYY-MM-DD HH:mm"
@onSelect="onSelect" @clean="clean"/>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
startDate: '',
endDate: '2020-12-22',
maxDate: '',
leftDate: '',
}
},
methods: {
onSelect (date) {
console.log(date)
},
clean () {
},
},
}
</script>
<style scoped lang="less">
</style>
packages/components/DateField/index.vue
View file @ b81c157d
...@@ -30,9 +30,10 @@ ...@@ -30,9 +30,10 @@
</template> </template>
<script> <script>
import { isDef } from '../../../packages/common/utils'
export default { export default {
name: 'DateField', name: 'DateField',
inheritAttrs: false, inheritAttrs: true,
props: { props: {
value: { value: {
default: null, default: null,
...@@ -84,10 +85,6 @@ export default { ...@@ -84,10 +85,6 @@ export default {
type: Number, type: Number,
default: 45, default: 45,
}, },
showIcon: {
type: Boolean,
default: true,
},
leftIcon: { leftIcon: {
type: String, type: String,
default: null, default: null,
...@@ -123,11 +120,8 @@ export default { ...@@ -123,11 +120,8 @@ export default {
let vm = this let vm = this
if (vm.disabled) { if (vm.disabled) {
return false return false
}
if (vm.clearable && (vm.value !== '' && vm.value !== undefined && vm.value !== null)) {
return true
} else { } else {
return !vm.showIcon return vm.clearable && isDef(this.value)
} }
}, },
...@@ -163,6 +157,7 @@ export default { ...@@ -163,6 +157,7 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "../../../packages/common/styles/field";
.h-date{ .h-date{
background-color: #fff; background-color: #fff;
position: relative; position: relative;
......
packages/components/Dialog/demo.vue 0 → 100644
View file @ b81c157d
/**
* @Author think
* @Date 2020-09-02 17:07
*/
<template>
<h-view title="DateField">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">Notify</div>
</h-header>
<h-content>
<h4 class="item-title">notify</h4>
<div class="local-region">
<notify v-model="show1" content="提示内容" type="success"/>
<notify v-model="show2" :time="3000" position="bottom" content="提示内容"/>
</div>
<h4 class="item-title">notify标签用法 (通常在局部显示时使用)</h4>
<h-button class="button-class" type="rimless" shadow @click.native="showNotifyAtTop">Notify (top)</h-button>
<h-button class="button-class" type="rimless" shadow @click.native="showNotifyAtBottom">Notify (bottom)</h-button>
<h4 class="item-title">notify 插件用法</h4>
<h-button class="button-class purple" type="rimless" shadow @click.native="handleNotify">NotifyPlugin</h-button>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
show1: false,
show2: false,
}
},
methods: {
// 标签用法
showNotifyAtTop () {
if (this.show1) return
this.show1 = true
},
showNotifyAtBottom () {
if (this.show2) return
this.show2 = true
},
handleNotify () {
this.hlsPopup.showNotify({
content: '提示内容',
position: 'top',
time: 2000,
type: 'warning',
})
},
},
}
</script>
<style lang="less">
.button-class {
width: 90%;
margin: 10px 5%;
display: block;
}
.local-region {
overflow: hidden;
position: relative;
height: 200px;
background-color: #eee;
width: 90%;
}
</style>
packages/components/Field/index.vue
View file @ b81c157d
...@@ -57,7 +57,7 @@ import { formatNumber, isDef, isObject } from '../../../packages/common/utils' ...@@ -57,7 +57,7 @@ import { formatNumber, isDef, isObject } from '../../../packages/common/utils'
export default { export default {
name: 'Field', name: 'Field',
inheritAttrs: false, inheritAttrs: true,
props: { props: {
value: { value: {
type: String | Number, type: String | Number,
...@@ -322,130 +322,5 @@ export default { ...@@ -322,130 +322,5 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "../../../packages/common/styles/vue-1px"; @import "../../../packages/common/styles/field";
.h-field {
width: 100%;
display: flex;
padding: 10px 15px;
background-color: #fff;
position: relative;
line-height: 24px;
&:after {
.setBottomLine();
left: 15px;
}
.field-icon {
// width: 16px;
font-size: 16px;
img {
width: 16px;
position: relative;
top: 2px;
}
}
.field-left-icon {
//line-height: 25px;
margin-right: 4px;
}
.field-right-icon {
//line-height: 25px;
margin-left: 4px;
}
.field-title {
line-height: 0.5rem;
font-size: 14px;
color: #333;
letter-spacing: 0;
margin-right: 12px;
}
.required {
&:before {
position: absolute;
left: 8px;
color: #D24E4E;
font-size: 14px;
content: '*';
}
}
.field-value {
position: relative;
overflow: hidden;
color: #666;
text-align: right;
vertical-align: middle;
.field-body {
display: flex;
align-items: center;
.field-control {
display: block;
box-sizing: border-box;
font-size: 14px;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
color: #666;
line-height: inherit;
background-color: transparent;
border: 0;
resize: none;
&-left {
text-align: left;
}
&-right {
text-align: right;
}
&-center {
text-align: center;
}
}
}
.field-control-error {
.field-control {
&,
&::placeholder {
color: #ee0a24;
-webkit-text-fill-color: currentColor;
}
}
}
.field-word-limit {
margin-top: 4px;
color: #646566;
font-size: 12px;
line-height: 16px;
text-align: right;
}
}
&-disabled {
.field-label {
color: #999;
}
.field-value {
.field-body {
.field-control {
color: #999;
}
}
}
}
}
</style> </style>
packages/components/ListItem/Item.vue
View file @ b81c157d
...@@ -188,8 +188,8 @@ export default { ...@@ -188,8 +188,8 @@ export default {
.h-checkbox{ .h-checkbox{
.checkbox { .checkbox {
input{ input{
width: 22px; width: 20px;
height: 22px; height: 20px;
} }
} }
} }
......
src/pages/radioTest.vue → packages/components/Radio/demo.vue
View file @ b81c157d
...@@ -4,7 +4,11 @@ ...@@ -4,7 +4,11 @@
*/ */
<template> <template>
<h-view title="CheckBox"> <h-view title="Radio">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">Radio</div>
</h-header>
<h-content> <h-content>
<list-item> <list-item>
<item> <item>
...@@ -21,28 +25,16 @@ ...@@ -21,28 +25,16 @@
<h-radio :checked="true" :disable="true" name="Japan" title="日本"/> <h-radio :checked="true" :disable="true" name="Japan" title="日本"/>
<h-radio name="Other" title="其他"/> <h-radio name="Other" title="其他"/>
</radio-group> </radio-group>
<list-item>
<item>
<h-check slot="left-icon" v-model="checkValue"/>
<section slot="content">CheckBox</section>
</item>
<item>
<div slot="name">switch滑块切换框</div>
<div slot="content"><h-switch v-model="switchValue"/></div>
</item>
</list-item>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
<script> <script>
export default { export default {
name: 'RadioTest', name: 'Demo',
data () { data () {
return { return {
radioValue: 'Japan', radioValue: 'Japan',
checkValue: false,
switchValue: false,
} }
}, },
watch: { watch: {
......
packages/components/Radio/radio.vue
View file @ b81c157d
...@@ -71,10 +71,10 @@ export default { ...@@ -71,10 +71,10 @@ export default {
align-items: center; align-items: center;
.radio-icon { .radio-icon {
width: 26px; width: 22px;
height: 26px; height: 22px;
.icon { .icon {
font-size: 26px; font-size: 22px;
} }
.ion-ios-circle-outline{ .ion-ios-circle-outline{
color: #d9d9d9; color: #d9d9d9;
......
packages/components/Select/README.md
View file @ b81c157d
...@@ -139,7 +139,6 @@ SelectField 下拉组建 ...@@ -139,7 +139,6 @@ SelectField 下拉组建
|proportion|字端明与字端占比|Array|N|[1,2]| |proportion|字端明与字端占比|Array|N|[1,2]|
|itemHeight|字端默认高度|Number|N|45| |itemHeight|字端默认高度|Number|N|45|
|hasBorder|是否有下边框|Boolean|N|true| |hasBorder|是否有下边框|Boolean|N|true|
|showIcon|右边下拉箭头|Boolean|N|true|
|rightIcon|自定义下拉箭头|String|N|-| |rightIcon|自定义下拉箭头|String|N|-|
|@onSelect|下拉框选中函数|Function|N|-| |@onSelect|下拉框选中函数|Function|N|-|
packages/components/Select/SelectField.vue
View file @ b81c157d
...@@ -32,9 +32,10 @@ ...@@ -32,9 +32,10 @@
<script> <script>
import VueSelect from './index' import VueSelect from './index'
import { isDef } from '../../../packages/common/utils'
export default { export default {
name: 'SelectField', name: 'SelectField',
inheritAttrs: false, inheritAttrs: true,
props: { props: {
value: { value: {
default: null, default: null,
...@@ -97,10 +98,6 @@ export default { ...@@ -97,10 +98,6 @@ export default {
type: String, type: String,
default: 'right', default: 'right',
}, },
showIcon: {
type: Boolean,
default: true,
},
leftIcon: { leftIcon: {
type: String, type: String,
default: null, default: null,
...@@ -151,11 +148,8 @@ export default { ...@@ -151,11 +148,8 @@ export default {
let vm = this let vm = this
if (vm.disabled) { if (vm.disabled) {
return false return false
}
if (vm.clearable && (vm.value !== '' && vm.value !== undefined && vm.value !== null)) {
return true
} else { } else {
return !vm.showIcon return vm.clearable && isDef(this.value)
} }
}, },
minHeight () { minHeight () {
...@@ -209,6 +203,7 @@ export default { ...@@ -209,6 +203,7 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "../../../packages/common/styles/field";
.h-select{ .h-select{
background-color: #fff; background-color: #fff;
position: relative; position: relative;
......
packages/components/Select/demo.vue 0 → 100644
View file @ b81c157d
/**
* @Author think
* @Date 2020-09-02 11:17
*/
<template>
<h-view title="SelectField">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">SelectField</div>
</h-header>
<h-content>
<list-item>
<SelectField
v-model="sex" :dataArray="sexList" :required="true" label="性别"
value-key="code_value"
value-name="code_value_name" @onSelect="select"/>
<SelectField
v-model="sex" :dataArray="sexList" disabled required
label="性别"
value-key="code_value"
value-name="code_value_name" @onSelect="select"/>
<SelectField
v-model="edu" :dataArray="eduList" label="学历"
@onSelect="select"/>
<SelectField
v-model="edu" :dataArray="eduList" :clearable="false" label="学历"
placeholder="请选中最高学历"
input-align="left"
@onSelect="select"/>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
sex: 0,
sexList: [{ 'code_value': 0, 'code_value_name': '女' }, { 'code_value': 1, 'code_value_name': '男' }],
edu: '',
eduList: [{code: 1, code_name: '小学'}, {code: 2, code_name: '中学'}, {code: 3, code_name: '大学'}],
}
},
methods: {
select (v1, v2, v3) {
console.log(v1 + ', ' + v2 + ', ' + v3)
},
},
}
</script>
<style scoped lang="less">
</style>
src/pages/Swipe/demo.vue → packages/components/Swipe/demo.vue
View file @ b81c157d
...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
.indicators { .indicators {
height: 14px; height: 14px;
width: 14px; width: 14px;
background-image: url('../../assets/image/logo.png'); background-image: url('../../../src/assets/image/logo.png');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
opacity: 0.5; opacity: 0.5;
......
packages/components/demoRoute.js 0 → 100644
View file @ b81c157d
const Header = resolve => require.ensure([], () => { resolve(require('./HHeader/demo')) }, 'header')
const Tab = resolve => require.ensure([], () => { resolve(require('./STab/index')) }, 'stab')
const Button = resolve => require.ensure([], () => { resolve(require('./HButton/demo')) }, 'button')
const Content = resolve => require.ensure([], () => { resolve(require('./HContent/demo')) }, 'content')
const Scroll = resolve => require.ensure([], () => { resolve(require('./Scroll/demo')) }, 'scroll')
const BottomTab = resolve => require.ensure([], () => { resolve(require('./BottomTab/demo')) }, 'BottomTab')
const Model = resolve => require.ensure([], () => { resolve(require('./Modal/demo')) }, 'model')
const Swipe = resolve => require.ensure([], () => { resolve(require('./Swipe/demo')) }, 'swipe')
const List = resolve => require.ensure([], () => { resolve(require('./ListItem/demo')) }, 'list')
const ItemOption = resolve => require.ensure([], () => { resolve(require('./ItemOption/demo')) }, 'option')
const File = resolve => require.ensure([], () => { resolve(require('./HFile/demo')) }, 'file')
const Field = resolve => require.ensure([], () => { resolve(require('./Field/demo')) }, 'field')
const Currency = resolve => require.ensure([], () => { resolve(require('./CurrencyInput/demo')) }, 'currency')
const Check = resolve => require.ensure([], () => { resolve(require('./CheckBox/demo')) }, 'check')
const DateField = resolve => require.ensure([], () => { resolve(require('./DateField/demo')) }, 'dateField')
const SelectField = resolve => require.ensure([], () => { resolve(require('./Select/demo')) }, 'selectField')
const Radio = resolve => require.ensure([], () => { resolve(require('./Radio/demo')) }, 'radio')
const ActionSheet = resolve => require.ensure([], () => { resolve(require('./ActionSheet/demo')) }, 'actionSheet')
const Dialog = resolve => require.ensure([], () => { resolve(require('./Dialog/demo')) }, 'dialog')
export default [
{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}},
{path: '/currency', component: Currency, name: 'Currency', meta: {keepAlive: false}},
{path: '/check', component: Check, name: 'Check', meta: {keepAlive: false}},
{path: '/dateField', component: DateField, name: 'DateField', meta: {keepAlive: false}},
{path: '/selectField', component: SelectField, name: 'SelectField', meta: {keepAlive: false}},
{path: '/radio', component: Radio, name: 'Radio', meta: {keepAlive: false}},
{path: '/actionSheet', component: ActionSheet, name: 'ActionSheet', meta: {keepAlive: false}},
{path: '/dialog', component: Dialog, name: 'Dialog', meta: {keepAlive: false}},
]
src/pages/demo.vue
View file @ b81c157d
...@@ -47,29 +47,23 @@ ...@@ -47,29 +47,23 @@
<router-link slot="name" to="/field">Field</router-link> <router-link slot="name" to="/field">Field</router-link>
</item> </item>
<item> <item>
<section slot="name">CurrencyInput</section> <router-link slot="name" to="/currency">CurrencyInput</router-link>
</item> </item>
<item> <item>
<section slot="name">CheckBox</section> <router-link slot="name" to="/check">CheckBox</router-link>
</item> </item>
<item> <item>
<section slot="name">DateField</section> <router-link slot="name" to="/dateField">DateField</router-link>
</item> </item>
<item> <item>
<section slot="name">selectField</section> <router-link slot="name" to="/selectField">selectField</router-link>
</item> </item>
<item> <item>
<section slot="name">CheckBox</section> <router-link slot="name" to="/radio">Radio</router-link>
</item>
<item>
<section slot="name">Radio</section>
</item> </item>
<item> <item>
<section slot="name">Switch</section> <section slot="name">Switch</section>
</item> </item>
<item>
<section slot="name">CheckBox</section>
</item>
<item> <item>
<section slot="name">Range</section> <section slot="name">Range</section>
</item> </item>
...@@ -83,10 +77,10 @@ ...@@ -83,10 +77,10 @@
<section slot="name">TopTips</section> <section slot="name">TopTips</section>
</item> </item>
<item> <item>
<section slot="name">Dialog</section> <router-link slot="name" to="/dialog">Dialog</router-link>
</item> </item>
<item> <item>
<section slot="name">ActionSheet</section> <router-link slot="name" to="/actionSheet">ActionSheet</router-link>
</item> </item>
<item> <item>
<section slot="name">NumberKeyboard</section> <section slot="name">NumberKeyboard</section>
......
src/pages/home.vue
View file @ b81c157d
...@@ -94,78 +94,78 @@ ...@@ -94,78 +94,78 @@
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
userImg: window.localStorage.userImg || '', userImg: window.localStorage.userImg || '',
message: [{ message: [{
'isFromeMe': false, 'isFromeMe': false,
'content': '小易7*24小时为您服务!', 'content': '小易7*24小时为您服务!',
}], }],
robot_message: { robot_message: {
question: null, question: null,
}, },
autosize: true, autosize: true,
height: '', height: '',
decimal: false, decimal: false,
rangeValue: 40, rangeValue: 40,
min: 20, min: 20,
max: 80, max: 80,
step: 10, step: 10,
disabled: false, disabled: false,
disabledOpacity: 0.5, disabledOpacity: 0.5,
rangeBarHeight: 1, rangeBarHeight: 1,
rangeHandleHeight: 20, rangeHandleHeight: 20,
sex: 0, sex: 0,
sexList: [{ 'code_value': 0, 'code_value_name': '女' }, { 'code_value': 1, 'code_value_name': '男' }], sexList: [{ 'code_value': 0, 'code_value_name': '女' }, { 'code_value': 1, 'code_value_name': '男' }],
number: 123.123, number: 123.123,
nowDate: '2020', nowDate: '2020',
leftIcon: require('@/assets/image/warning@2x.png'), leftIcon: require('@/assets/image/warning@2x.png'),
name: '', name: '',
age: null, age: null,
phone: null, phone: null,
password: 123456, password: 123456,
address: '安徽省芜湖市', address: '安徽省芜湖市',
homeAddress: '上海市青浦区', homeAddress: '上海市青浦区',
} }
}, },
watch: {}, watch: {},
created: function () { created: function () {
},
mounted () {
// this.height = this.$refs.textarea.clientHeight
},
methods: {
scrollBottom () {
let div = document.getElementById('home-content')
div.scrollTop = div.scrollHeight
}, },
mounted () { resetHeight () {
// this.height = this.$refs.textarea.clientHeight // this.$refs.textarea.clientHeight = this.height;
this.$refs.textarea.style.height = this.height + 'px'
}, },
methods: {
scrollBottom () {
let div = document.getElementById('home-content')
div.scrollTop = div.scrollHeight
},
resetHeight () {
// this.$refs.textarea.clientHeight = this.height;
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)
},
select (v1, v2, v3) { change (val) {
// this.rangeValue = val
console.log(val)
},
touchStart (e) {
console.log(e)
},
touchEnd (e) {
console.log(e)
},
}, select (v1, v2, v3) {
}, },
}
},
}
</script> </script>
<style lang="less" type="text/less"> <style lang="less" type="text/less">
#home { #home {
......
src/router/index.js
View file @ b81c157d
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import demoRouter from '../../packages/components/demoRoute'
// test工具类 // test工具类
import Radio from '@/pages/radioTest'
import Form from '@/pages/form' const Form = resolve => require.ensure([], () => { resolve(require('@/pages/form')) }, 'form')
const Demo = resolve => require.ensure([], () => { resolve(require('@/pages/demo')) }, 'demo') 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')
...@@ -11,50 +12,27 @@ const HlsPopup = resolve => require.ensure([], () => { resolve(require('@/pages/ ...@@ -11,50 +12,27 @@ const HlsPopup = resolve => require.ensure([], () => { resolve(require('@/pages/
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') let pagesRoute = [
const Tab = resolve => require.ensure([], () => { resolve(require('@/pages/STab/index')) }, 'stab') {
const Button = resolve => require.ensure([], () => { resolve(require('@/pages/Button/demo')) }, 'button') path: '/',
const Content = resolve => require.ensure([], () => { resolve(require('@/pages/Content/demo')) }, 'content') redirect: '/demo',
const Scroll = resolve => require.ensure([], () => { resolve(require('@/pages/Scroll/demo')) }, 'scroll') },
const BottomTab = resolve => require.ensure([], () => { resolve(require('@/pages/BottomTab/demo')) }, 'BottomTab') {path: '/demo', component: Demo, name: 'Demo', meta: {keepAlive: true}},
const Model = resolve => require.ensure([], () => { resolve(require('@/pages/Model/demo')) }, 'model') {path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}},
const Swipe = resolve => require.ensure([], () => { resolve(require('@/pages/Swipe/demo')) }, 'swipe') // test工具类
const List = resolve => require.ensure([], () => { resolve(require('@/pages/List/demo')) }, 'list') {path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
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) {path: '/HFile', component: HFile, name: 'HFile', meta: {keepAlive: true}},
{path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}},
{path: '/scrollTest', component: scrollTest, name: 'scrollTest', meta: {keepAlive: true}},
]
export default new Router({ let routes = new Set([...pagesRoute, ...demoRouter])
routes: [
{
path: '/',
redirect: '/demo',
},
{path: '/demo', component: Demo, name: 'Demo', meta: {keepAlive: true}},
{path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}},
// test工具类
{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: '/scrollTest', component: scrollTest, name: 'scrollTest', meta: {keepAlive: true}},
{path: '/header', component: Header, name: 'Header', meta: {keepAlive: false}}, Vue.use(Router)
{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}},
], export default new Router({
routes,
scrollBehavior (to, from, savedPosition) { scrollBehavior (to, from, savedPosition) {
if (to.hash) { if (to.hash) {
return { return {
......
yarn.lock
View file @ b81c157d
...@@ -527,6 +527,13 @@ axios@^0.15.3: ...@@ -527,6 +527,13 @@ axios@^0.15.3:
dependencies: dependencies:
follow-redirects "1.0.0" follow-redirects "1.0.0"
axios@latest:
version "0.20.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.20.0.tgz#057ba30f04884694993a8cd07fa394cff11c50bd"
integrity sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==
dependencies:
follow-redirects "^1.10.0"
babel-code-frame@^6.22.0, babel-code-frame@^6.26.0: babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
version "6.26.0" version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
...@@ -3265,7 +3272,7 @@ fast-levenshtein@~2.0.4: ...@@ -3265,7 +3272,7 @@ fast-levenshtein@~2.0.4:
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
fastclick@^1.0.6, "fastclick@https://hel.hand-china.com/easyUI/fastclick.git": fastclick@^1.0.6:
version "1.0.6" version "1.0.6"
resolved "https://hel.hand-china.com/easyUI/fastclick.git#8b4d3638e307b0c8bdb2ddae52598363701161e6" resolved "https://hel.hand-china.com/easyUI/fastclick.git#8b4d3638e307b0c8bdb2ddae52598363701161e6"
...@@ -3435,6 +3442,11 @@ follow-redirects@^1.0.0: ...@@ -3435,6 +3442,11 @@ follow-redirects@^1.0.0:
dependencies: dependencies:
debug "^3.2.6" debug "^3.2.6"
follow-redirects@^1.10.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
for-in@^1.0.1, for-in@^1.0.2: for-in@^1.0.1, for-in@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
......
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