Skip to content

H
hls-easy-ui
Commit 3cd28181 authored by nature's avatar nature
Browse files
Options

demo

parent 11228a4c
Show whitespace changes
Inline Side-by-side
Showing with 391 additions and 209 deletions
packages/common/styles/hField.less 0 → 100644
View file @ 3cd28181
@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/CheckBox/README.md
View file @ 3cd28181
...@@ -15,6 +15,7 @@ h-check checkBox ...@@ -15,6 +15,7 @@ h-check checkBox
data() { data() {
return { return {
radioValue: false, radioValue: false,
checkValue: true
} }
}, },
methods: { methods: {
......
packages/components/DateField/index.vue
View file @ 3cd28181
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<!--<slot name="icon"/>--> <!--<slot name="icon"/>-->
<i v-if="showClean" class="field-icon field-right-icon icon ion-close-circled" @click="cleanValue"/> <i v-if="showClean" class="field-icon field-right-icon icon ion-close-circled" @click="cleanValue"/>
<!--<slot name="icon"/>--> <!--<slot name="icon"/>-->
<img v-if="!showClean" :src="rightIcon" class="field-right-icon date-field-icon" > <img v-if="!showClean && showIcon" :src="rightIcon" class="field-right-icon date-field-icon" >
</div> </div>
</div> </div>
</div> </div>
...@@ -62,6 +62,10 @@ export default { ...@@ -62,6 +62,10 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
readonly: {
type: Boolean,
default: false,
},
label: { label: {
type: String, type: String,
default: '', default: '',
...@@ -116,17 +120,19 @@ export default { ...@@ -116,17 +120,19 @@ export default {
return !!(this.leftIcon || this.$slots['left-icon']) return !!(this.leftIcon || this.$slots['left-icon'])
}, },
dataPlaceholder () { dataPlaceholder () {
return this.placeholder ? this.placeholder : '请输入' + this.label return this.placeholder ? this.placeholder : this.label ? '请输入' + this.label : ''
}, },
showClean () { showClean () {
let vm = this let vm = this
if (vm.disabled) { if (vm.showIcon) {
if (vm.disabled || vm.readonly) {
return false return false
} }
if (vm.clearable && (vm.value !== '' && vm.value !== undefined && vm.value !== null)) { if (vm.clearable && (vm.value !== '' && vm.value !== undefined && vm.value !== null)) {
return true return true
}
} else { } else {
return !vm.showIcon return vm.showIcon
} }
}, },
...@@ -138,10 +144,10 @@ export default { ...@@ -138,10 +144,10 @@ export default {
}, },
showDate () { showDate () {
let vm = this let vm = this
if (!vm.disabled) { if (!vm.disabled && !vm.readonly) {
let date = new Date().format('yyyy-MM-dd') let date = new Date().format('yyyy-MM-dd')
if (vm.value) { if (vm.value) {
date = vm.value date = new Date(vm.value).format('yyyy-MM-dd')
} }
vm.$vux.datetime.show({ vm.$vux.datetime.show({
cancelText: '取消', cancelText: '取消',
...@@ -162,6 +168,7 @@ export default { ...@@ -162,6 +168,7 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "../../../packages/common/styles/hField";
.h-date{ .h-date{
background-color: #fff; background-color: #fff;
position: relative; position: relative;
......
packages/components/Field/index.vue
View file @ 3cd28181
...@@ -175,7 +175,7 @@ export default { ...@@ -175,7 +175,7 @@ export default {
}, },
placehold () { placehold () {
if (this.showPlaceholder) { if (this.showPlaceholder) {
return this.placeholder ? this.placeholder : '请输入' + this.label return this.placeholder ? this.placeholder : this.label ? '请输入' + this.label : ''
} }
}, },
inputType () { inputType () {
...@@ -321,130 +321,5 @@ export default { ...@@ -321,130 +321,5 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "../../../packages/common/styles/vue-1px"; @import "../../../packages/common/styles/hField";
.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/Select/SelectField.vue
View file @ 3cd28181
...@@ -166,7 +166,7 @@ export default { ...@@ -166,7 +166,7 @@ export default {
} }
}, },
selectPlaceholder () { selectPlaceholder () {
return this.placeholder ? this.placeholder : '请选择' + this.label return this.placeholder ? this.placeholder : this.label ? '请输入' + this.label : ''
}, },
}, },
methods: { methods: {
...@@ -209,6 +209,7 @@ export default { ...@@ -209,6 +209,7 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "../../../packages/common/styles/hField";
.h-select{ .h-select{
background-color: #fff; background-color: #fff;
position: relative; position: relative;
......
src/pages/CheckBox/demo.vue 0 → 100644
View file @ 3cd28181
/**
* @Author think
* @Date 2021-02-20 16:04
*/
<template>
<h-view class="form" title="CheckBox">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">CheckBox</div>
</h-header>
<h-content>
<list-item>
<item>
<h-check slot="left-icon" v-model="radioValue" @checkClick="checkClick"/>
<section slot="content">CheckBox</section>
</item>
<item>
<section slot="name">只读</section>
<h-check slot="content" v-model="checkValue" :disable="true" @checkClick="checkClick"/>
</item>
</list-item>
<!--<h-check slot="left-icon" v-model="checkValue" :disable="true" @checkClick="checkClick"/>-->
</h-content>
</h-view>
</template>
<script>
export default {
name: 'CheckBox',
data () {
return {
radioValue: true,
checkValue: true,
}
},
methods: {
checkClick (value) {
this.radioValue = value
},
},
}
</script>
<style scoped lang="less">
</style>
src/pages/CurrencyInput/demo.vue 0 → 100644
View file @ 3cd28181
/**
* @Author think
* @Date 2021-02-20 15:48
*/
<template>
<h-view class="form" title="CurrentInput">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">CurrentInput</div>
</h-header>
<h-content>
<list-item>
<item>
<div slot="name">基础用法</div>
<currency-input slot="content" v-model="money" :decimal="false"/>
<div slot="right-icon">¥</div>
</item>
<item>
<div slot="name">小数</div>
<currency-input slot="content" v-model="money1" />
<div slot="right-icon">¥</div>
</item>
<item>
<div slot="name">只读</div>
<currency-input slot="content" v-model="money2" readonly/>
<div slot="right-icon">¥</div>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'CurrentInput',
data () {
return {
money: 0,
money1: 12.23,
money2: 12345.54,
}
},
methods: {},
}
</script>
<style scoped lang="less">
</style>
src/pages/DateField/demo.vue 0 → 100644
View file @ 3cd28181
/**
* @Author think
* @Date 2021-02-20 16:13
*/
<template>
<h-view class="form" title="DateField">
<h-header>
<h-return slot="left" @click.native="$routeGo()"/>
<div slot="center">DateField</div>
</h-header>
<h-content>
<DateField
v-model="nowDate" label="时间" required @onSelect="select"/>
<DateField
v-model="currentDate" label="时分" format="YYYY-MM-DD HH:mm"/>
<DateField
v-model="readonlyDate" label="只读" readonly/>
<DateField
v-model="newDate" inputAlign="left" placeholder="请输入时间"/>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
nowDate: new Date(),
currentDate: null,
readonlyDate: '2021-02-12',
newDate: '',
}
},
methods: {
select (value) {
console.log(value)
},
},
}
</script>
<style lang="less">
</style>
src/pages/HFile/demo.vue
View file @ 3cd28181
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
文件上传 <i class="icon ion-ios-cloud-upload"/> 文件上传 <i class="icon ion-ios-cloud-upload"/>
</div> </div>
</h-file> </h-file>
<a v-if="fileList.length" @click="preView(fileList[0].content)">预览</a>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
...@@ -45,12 +46,12 @@ export default { ...@@ -45,12 +46,12 @@ export default {
return { return {
fileList: [], // 文件数组 必填 fileList: [], // 文件数组 必填
disable: false, // 是否禁用文件上传 默认false 可选 disable: false, // 是否禁用文件上传 默认false 可选
accept: 'image/png,image/jpeg', // 接受的文件类型 可选 accept: 'application/pdf', // 接受的文件类型 可选
upload: false, // 选取完成是否自动上传 默认 false 可选 upload: false, // 选取完成是否自动上传 默认 false 可选
maxSize: 5000000, // 文件大小限制，单位为byte 可选 超过大小的文件会自动取消 maxSize: 5000000, // 文件大小限制，单位为byte 可选 超过大小的文件会自动取消
maxCount: 5, // 文件上传数量限制 可选超过数量自动隐藏选择按钮 maxCount: 5, // 文件上传数量限制 可选超过数量自动隐藏选择按钮
deleteImage: true, // 是否删除文件 默认true 可选 deleteImage: true, // 是否删除文件 默认true 可选
previewImage: true, // 是否在选取完成后展示预览图 默认true 可选 previewImage: false, // 是否在选取完成后展示预览图 默认true 可选
resultType: 'dataUrl', // 文件读取结果类型 dataUrl 可选值为text resultType: 'dataUrl', // 文件读取结果类型 dataUrl 可选值为text
uploadConfig: { // 文件上传配置 uploadConfig: { // 文件上传配置
uploadUrl: $config.rootPath + '/app/fileUploadSvc?sysName=HLS_APP&apiName=attachment_upload', // 上传的URL uploadUrl: $config.rootPath + '/app/fileUploadSvc?sysName=HLS_APP&apiName=attachment_upload', // 上传的URL
...@@ -130,6 +131,15 @@ export default { ...@@ -130,6 +131,15 @@ export default {
} }
}) })
}, },
preView (content) {
let string = content
let iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
let x = window.open()
x.document.open()
x.document.write(iframe)
x.document.close()
},
}, },
} }
</script> </script>
......
src/pages/demo.vue
View file @ 3cd28181
...@@ -47,20 +47,17 @@ ...@@ -47,20 +47,17 @@
<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="/currencyInput">CurrencyInput</router-link>
</item> </item>
<item> <item>
<section slot="name">CheckBox</section> <router-link slot="name" to="/checkBox">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> <section slot="name">selectField</section>
</item> </item>
<item>
<section slot="name">CheckBox</section>
</item>
<item> <item>
<section slot="name">Radio</section> <section slot="name">Radio</section>
</item> </item>
......
src/pages/home.vue
View file @ 3cd28181
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
userImg: window.localStorage.userImg || '', userImg: window.localStorage.userImg || '',
...@@ -165,7 +165,7 @@ ...@@ -165,7 +165,7 @@
}, },
}, },
} }
</script> </script>
<style lang="less" type="text/less"> <style lang="less" type="text/less">
#home { #home {
......
src/router/index.js
View file @ 3cd28181
...@@ -23,6 +23,9 @@ const List = resolve => require.ensure([], () => { resolve(require('@/pages/List ...@@ -23,6 +23,9 @@ const List = resolve => require.ensure([], () => { resolve(require('@/pages/List
const ItemOption = resolve => require.ensure([], () => { resolve(require('@/pages/ItemOption/demo')) }, 'option') const ItemOption = resolve => require.ensure([], () => { resolve(require('@/pages/ItemOption/demo')) }, 'option')
const File = resolve => require.ensure([], () => { resolve(require('@/pages/HFile/demo')) }, 'file') const File = resolve => require.ensure([], () => { resolve(require('@/pages/HFile/demo')) }, 'file')
const Field = resolve => require.ensure([], () => { resolve(require('@/pages/Field/demo')) }, 'field') const Field = resolve => require.ensure([], () => { resolve(require('@/pages/Field/demo')) }, 'field')
const CurrencyInput = resolve => require.ensure([], () => { resolve(require('@/pages/CurrencyInput/demo')) }, 'currencyInput')
const CheckBox = resolve => require.ensure([], () => { resolve(require('@/pages/CheckBox/demo')) }, 'checkBox')
const DateField = resolve => require.ensure([], () => { resolve(require('@/pages/DateField/demo')) }, 'dateField')
Vue.use(Router) Vue.use(Router)
...@@ -53,6 +56,10 @@ export default new Router({ ...@@ -53,6 +56,10 @@ export default new Router({
{path: '/option', component: ItemOption, name: 'ItemOption', meta: {keepAlive: false}}, {path: '/option', component: ItemOption, name: 'ItemOption', meta: {keepAlive: false}},
{path: '/file', component: File, name: 'File', meta: {keepAlive: false}}, {path: '/file', component: File, name: 'File', meta: {keepAlive: false}},
{path: '/field', component: Field, name: 'Field', meta: {keepAlive: false}}, {path: '/field', component: Field, name: 'Field', meta: {keepAlive: false}},
{path: '/currencyInput', component: CurrencyInput, name: 'CurrencyInput', meta: {keepAlive: false}},
{path: '/checkBox', component: CheckBox, name: 'CheckBox', meta: {keepAlive: false}},
{path: '/dateField', component: DateField, name: 'DateField', meta: {keepAlive: false}},
], ],
scrollBehavior (to, from, savedPosition) { scrollBehavior (to, from, savedPosition) {
......
yarn.lock
View file @ 3cd28181
...@@ -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@^0.21.1:
version "0.21.1"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
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.2"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.2.tgz#dd73c8effc12728ba5cf4259d760ea5fb83e3147"
integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
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