Skip to content

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

field

parent cc240d47
Show whitespace changes
Inline Side-by-side
Showing with 128 additions and 181 deletions
packages/common/styles/ionic-public-style.less
View file @ b8f184eb
...@@ -112,14 +112,14 @@ ...@@ -112,14 +112,14 @@
margin-right: 0.2rem; margin-right: 0.2rem;
} }
.required { .required {
display: flex; position: relative;
} }
.required::after { .required::before {
content: '*'; position: absolute;
left: -8px;
color: #D24E4E; color: #D24E4E;
height: 0.16rem; font-size: 14px;
padding-top: 0.08rem; content: '*';
margin-left: 0.05rem;
} }
} }
.add-content { .add-content {
......
packages/common/styles/variables.less
View file @ b8f184eb
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
@divider-color:#fafafa; @divider-color:#fafafa;
@switch-box-bg:#48D2A0; @switch-box-bg:#48D2A0;
@check-box-bg:@theme-color; @check-box-bg:@theme-color;
@radio-box-bg:#ff00ff; @radio-box-bg:@theme-color;
/** /**
......
packages/components/DateField/index.vue
View file @ b8f184eb
...@@ -4,26 +4,35 @@ ...@@ -4,26 +4,35 @@
*/ */
<template> <template>
<section :style="{'min-height':minHeight}" class="h-date"> <div :style="{'min-height':minHeight}" :class="{'h-field-disabled':disabled}" class="h-field h-date">
<!--<section :style="{'min-height':minHeight}" :class="{'vue-1px-b':hasBorder}" class="date-border">--> <div v-if="showLeftIcon" class="field-icon field-left-icon" @click="onClickLeftIcon">
<section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section> <img v-if="!hasLeftIcon" :src="leftIcon">
<section :style="{'flex':proportion[1] }" class="date-content"> <slot name="left-icon"/>
</div>
<div v-if="label" :class="{'required': required}" :style="{'flex':proportion[0] }" class="field-title field-label">
<span>{{ label }}</span>
</div>
<div :style="{'flex':proportion[1] }" class="field-value">
<div class="field-body">
<input <input
v-model="value" :disabled="disabled" :placeholder="dataPlaceholder" type="text" v-bind="$attrs"
readonly v-model="value"
:disabled="disabled" :placeholder="dataPlaceholder" :class="('field-control-'+inputAlign)" class="field-control"
type="text" readonly
@click="showDate"> @click="showDate">
<!--<slot name="icon"/>--> <!--<slot name="icon"/>-->
<i v-if="showClean" class="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="selectIcon" class="icon" > <img v-if="!showClean" :src="rightIcon" class="field-right-icon date-field-icon" >
</section> </div>
</section> </div>
<!--</section>--> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'DateField', name: 'DateField',
inheritAttrs: false,
props: { props: {
value: { value: {
default: null, default: null,
...@@ -35,7 +44,7 @@ export default { ...@@ -35,7 +44,7 @@ export default {
}, },
clearable: { clearable: {
type: Boolean, type: Boolean,
default: false, default: true,
}, },
format: { format: {
default: 'YYYY-MM-DD', default: 'YYYY-MM-DD',
...@@ -62,6 +71,10 @@ export default { ...@@ -62,6 +71,10 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
inputAlign: {
type: String,
default: 'right',
},
proportion: { proportion: {
// name/content 横向面积比例 // name/content 横向面积比例
type: Array, type: Array,
...@@ -71,22 +84,22 @@ export default { ...@@ -71,22 +84,22 @@ export default {
type: Number, type: Number,
default: 45, default: 45,
}, },
hasBorder: {
type: Boolean,
default: true,
},
showIcon: { showIcon: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
leftIcon: {
type: String,
default: null,
},
rightIcon: { rightIcon: {
type: String, type: String,
default: '', default: require('./right-gray@2x.png'),
}, },
}, },
data () { data () {
return { return {
Icon: require('./right-gray@2x.png'),
} }
}, },
computed: { computed: {
...@@ -97,8 +110,11 @@ export default { ...@@ -97,8 +110,11 @@ export default {
return this.itemHeight + 'px' return this.itemHeight + 'px'
} }
}, },
selectIcon () { hasLeftIcon () {
return this.rightIcon ? this.rightIcon : this.Icon return !!this.$slots['left-icon']
},
showLeftIcon () {
return !!(this.leftIcon || this.$slots['left-icon'])
}, },
dataPlaceholder () { dataPlaceholder () {
return this.placeholder ? this.placeholder : '请输入' + this.label return this.placeholder ? this.placeholder : '请输入' + this.label
...@@ -148,60 +164,11 @@ export default { ...@@ -148,60 +164,11 @@ export default {
<style lang="less"> <style lang="less">
.h-date{ .h-date{
width: 100%;
display: flex;
align-items: center;
border: none;
padding: 0 0.3rem 0 0.3rem;
background-color: #fff; background-color: #fff;
position: relative; position: relative;
.field-value{
&:after{ .date-field-icon{
content: " ";
position: absolute;
left: 0.3rem;
bottom: 0;
right: 0;
height: 1px; /*no*/
border-bottom: 1px solid rgba(0,0,0,.1); /*no*/
color: rgba(0,0,0,.1);
transform-origin: 0 100%;
transform: scaleY(0.5);
}
.name{
line-height: 0.5rem;
font-size: 14px;
color: #333;
}
.required {
display: flex;
align-items: center;
}
.required::after {
content: '*';
color: #D24E4E;
//height: 0.16rem;
padding-top: 0.08rem;
margin-left: 0.05rem;
}
.date-content{
height: 100%;
width: 100%;
font-size: 14px;
color: #666;
display: flex;
align-items: center;
input{
font-size: 14px;
color: #666;
line-height: 0.4rem;
width: 100%;
text-align: right;
border: none;
}
.icon{
height: 0.25rem; height: 0.25rem;
margin-left: 4px
} }
} }
} }
......
packages/components/Field/index.vue
View file @ b8f184eb
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
*/ */
<template> <template>
<div :style="{'min-height':minHeight}" class="h-field"> <div :style="{'min-height':minHeight}" :class="{'h-field-disabled':disabled}" class="h-field">
<div v-if="showLeftIcon" class="field-icon field-left-icon" @click="onClickLeftIcon"> <div v-if="showLeftIcon" class="field-icon field-left-icon" @click="onClickLeftIcon">
<img v-if="!hasLeftIcon" :src="leftIcon"> <img v-if="!hasLeftIcon" :src="leftIcon">
<slot name="left-icon"/> <slot name="left-icon"/>
...@@ -102,7 +102,7 @@ export default { ...@@ -102,7 +102,7 @@ export default {
}, },
clearable: { clearable: {
type: Boolean, type: Boolean,
default: false, default: true,
}, },
format: { format: {
type: Boolean, type: Boolean,
...@@ -213,6 +213,10 @@ export default { ...@@ -213,6 +213,10 @@ export default {
}, },
mounted () { mounted () {
// this.onInput(this.value) // this.onInput(this.value)
if (this.wordLimit && this.maxlength) {
this.count = (this.value || '').length
}
this.$nextTick(this.adjustSize) this.$nextTick(this.adjustSize)
}, },
methods: { methods: {
...@@ -221,7 +225,9 @@ export default { ...@@ -221,7 +225,9 @@ export default {
if (isDef(maxlength) && value.length >= maxlength) { if (isDef(maxlength) && value.length >= maxlength) {
value = value.slice(0, maxlength) value = value.slice(0, maxlength)
} }
if (this.wordLimit && this.maxlength) {
this.count = (value || '').length this.count = (value || '').length
}
if (this.type === 'number') { if (this.type === 'number') {
value = formatNumber(value, decimal) value = formatNumber(value, decimal)
} }
...@@ -299,15 +305,12 @@ export default { ...@@ -299,15 +305,12 @@ export default {
<style lang="less"> <style lang="less">
@import "../../../packages/common/styles/vue-1px"; @import "../../../packages/common/styles/vue-1px";
.h-field { .h-field {
// height: 45px;
width: 100%; width: 100%;
display: flex; display: flex;
padding: 10px 15px; padding: 10px 15px;
background-color: #fff; background-color: #fff;
// align-items: center;
position: relative; position: relative;
line-height: 24px; line-height: 24px;
&:after { &:after {
.setBottomLine(); .setBottomLine();
left: 15px; left: 15px;
...@@ -317,6 +320,8 @@ export default { ...@@ -317,6 +320,8 @@ export default {
font-size: 16px; font-size: 16px;
img{ img{
width: 16px; width: 16px;
position: relative;
top:2px;
} }
} }
.field-left-icon{ .field-left-icon{
...@@ -335,9 +340,9 @@ export default { ...@@ -335,9 +340,9 @@ export default {
margin-right: 12px; margin-right: 12px;
} }
.required { .required {
&:after { &:before {
position: absolute; position: absolute;
margin-left: 4px; left: 8px;
color: #D24E4E; color: #D24E4E;
font-size: 14px; font-size: 14px;
content: '*'; content: '*';
...@@ -393,5 +398,18 @@ export default { ...@@ -393,5 +398,18 @@ export default {
text-align: right; 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 @ b8f184eb
...@@ -158,15 +158,15 @@ export default { ...@@ -158,15 +158,15 @@ export default {
} }
.required { .required {
display: flex; position: relative;
} }
.required::after { .required::before {
content: '*'; position: absolute;
left: -8px;
color: #D24E4E; color: #D24E4E;
height: 8px; font-size: 14px;
padding-top: 2px; content: '*';
margin-left: 2px;
} }
} }
......
packages/components/Select/SelectField.vue
View file @ b8f184eb
...@@ -4,20 +4,29 @@ ...@@ -4,20 +4,29 @@
*/ */
<template> <template>
<section :style="{'min-height':minHeight}" class="h-select"> <div :style="{'min-height':minHeight}" :class="{'h-field-disabled':disabled}" class="h-field h-select">
<!--<section :style="{'min-height':minHeight}" :class="{'vue-1px-b':hasBorder}" class="select-border">--> <div v-if="showLeftIcon" class="field-icon field-left-icon" @click="onClickLeftIcon">
<section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section> <img v-if="!hasLeftIcon" :src="leftIcon">
<section :style="{'flex':proportion[1] }" class="select-content"> <slot name="left-icon"/>
</div>
<div v-if="label" :class="{'required': required}" :style="{'flex':proportion[0] }" class="field-title field-label">
<span>{{ label }}</span>
</div>
<div :style="{'flex':proportion[1] }" class="field-value">
<div class="field-body">
<input <input
v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" type="text" v-bind="$attrs"
v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" :class="('field-control-'+inputAlign)"
type="text" class="field-control"
readonly readonly
@click="showSelect"> @click="showSelect">
<input v-model="value" type="text" hidden> <input v-model="value" type="text" hidden>
<i v-if="showClean" class="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="selectIcon" class="icon" > <img v-if="!showClean" :src="rightIcon" class="field-right-icon date-field-icon" >
</section> </div>
</section> </div>
</div>
<!--</section>--> <!--</section>-->
</template> </template>
...@@ -25,6 +34,7 @@ ...@@ -25,6 +34,7 @@
import VueSelect from './index' import VueSelect from './index'
export default { export default {
name: 'SelectField', name: 'SelectField',
inheritAttrs: false,
props: { props: {
value: { value: {
default: null, default: null,
...@@ -36,7 +46,7 @@ export default { ...@@ -36,7 +46,7 @@ export default {
}, },
clearable: { clearable: {
type: Boolean, type: Boolean,
default: false, default: true,
}, },
dataArray: { dataArray: {
type: Array, type: Array,
...@@ -83,25 +93,34 @@ export default { ...@@ -83,25 +93,34 @@ export default {
type: Number, type: Number,
default: 45, default: 45,
}, },
hasBorder: { inputAlign: {
type: Boolean, type: String,
default: true, default: 'right',
}, },
showIcon: { showIcon: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
leftIcon: {
type: String,
default: null,
},
rightIcon: { rightIcon: {
type: String, type: String,
default: '', default: require('./right-gray@2x.png'),
}, },
}, },
data () { data () {
return { return {
Icon: require('./right-gray@2x.png'),
} }
}, },
computed: { computed: {
hasLeftIcon () {
return !!this.$slots['left-icon']
},
showLeftIcon () {
return !!(this.leftIcon || this.$slots['left-icon'])
},
codeName () { codeName () {
let vm = this let vm = this
let name let name
...@@ -146,9 +165,6 @@ export default { ...@@ -146,9 +165,6 @@ export default {
return this.itemHeight + 'px' return this.itemHeight + 'px'
} }
}, },
selectIcon () {
return this.rightIcon ? this.rightIcon : this.Icon
},
selectPlaceholder () { selectPlaceholder () {
return this.placeholder ? this.placeholder : '请选择' + this.label return this.placeholder ? this.placeholder : '请选择' + this.label
}, },
...@@ -194,67 +210,11 @@ export default { ...@@ -194,67 +210,11 @@ export default {
<style lang="less"> <style lang="less">
.h-select{ .h-select{
width: 100%;
display: flex;
align-items: center;
border: none;
padding: 0 0.3rem 0 0.3rem;
background-color: #fff; background-color: #fff;
position: relative; position: relative;
&:after{ .field-value{
content: " "; .date-field-icon{
position: absolute;
left: 0.3rem;
bottom: 0;
right: 0;
height: 1px; /*no*/
border-bottom: 1px solid rgba(0,0,0,.1); /*no*/
color: rgba(0,0,0,.1);
transform-origin: 0 100%;
transform: scaleY(0.5);
}
/*.select-border{
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 0 0.3rem 0 0;
min-height: 45px;
}*/
.name{
line-height: 0.5rem;
font-size: 14px;
color: #333;
}
.required {
display: flex;
align-items: center;
}
.required::after {
content: '*';
color: #D24E4E;
//height: 0.16rem;
padding-top: 0.08rem;
margin-left: 0.05rem;
}
.select-content{
height: 100%;
width: 100%;
font-size: 14px;
color: #666;
display: flex;
align-items: center;
input{
font-size: 14px;
color: #666;
line-height: 0.4rem;
width: 100%;
text-align: right;
border: none;
}
.icon{
height: 0.25rem; height: 0.25rem;
margin-left: 4px
} }
} }
} }
......
src/pages/home.vue
View file @ b8f184eb
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<h-content> <h-content>
<list-item> <list-item>
<item> <item>
<section slot="name">姓名</section> <section slot="name" class="required">姓名</section>
<input slot="content" type="text"> <input slot="content" type="text">
</item> </item>
<item> <item>
...@@ -67,13 +67,15 @@ ...@@ -67,13 +67,15 @@
clearable error clearable error
required label="年龄"/> required label="年龄"/>
<h-field <h-field
v-model="phone" v-model="phone" :left-icon="leftIcon"
type="tel" type="tel"
required label="手机号"/> required label="手机号"/>
<h-field <h-field
v-model="password" v-model="password"
type="password" type="password"
required label="密码"/> required label="密码">
<i slot="left-icon" class="field-icon field-right-icon icon ion-close-circled"/>
</h-field>
<h-field <h-field
v-model="address" :autosize="true" v-model="address" :autosize="true"
type="textarea" type="textarea"
...@@ -82,7 +84,7 @@ ...@@ -82,7 +84,7 @@
error error
required label="通讯地址"/> required label="通讯地址"/>
<h-field <h-field
v-model="homeAddress" :left-icon="leftIcon" v-model="homeAddress"
:autosize="true" :autosize="true"
:word-limit="true" type="textarea" maxlength="50" :word-limit="true" type="textarea" maxlength="50"
inputAlign="left" inputAlign="left"
......
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