Skip to content

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

field

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