other / mew-iview

Commit 184dba1c8e585682c79b0bd0a932802547269982

Authored by 梁灏
1 parent 9dbff364

update Form 

update Form
Showing 4 changed files with 113 additions and 7 deletions   Show diff stats
Inline Side-by-side
src/components/form/form-item.vue
  Show/Hide comments   View file @184dba1
1 <template> 1 <template>
2 <div :class="classes"> 2 <div :class="classes">
3 <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label">{{ label }}</label> 3 <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label">{{ label }}</label>
4 - <div :style="contentStyles"> 4 + <div :class="[prefixCls + '-content']" :style="contentStyles">
5 <slot></slot> 5 <slot></slot>
6 <div transition="fade" :class="[prefixCls + '-error']" v-if="validateState === 'error'">{{ validateMessage }}</div> 6 <div transition="fade" :class="[prefixCls + '-error']" v-if="validateState === 'error'">{{ validateMessage }}</div>
7 </div> 7 </div>
src/components/form/form.vue
  Show/Hide comments   View file @184dba1
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 </template> 3 </template>
4 <script> 4 <script>
5 // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form.vue 5 // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form.vue
  6 + import { oneOf } from '../../utils/assist';
6 7
7 const prefixCls = 'ivu-form'; 8 const prefixCls = 'ivu-form';
8 9
@@ -18,6 +19,12 @@ @@ -18,6 +19,12 @@
18 labelWidth: { 19 labelWidth: {
19 type: Number 20 type: Number
20 }, 21 },
  22 + labelPosition: {
  23 + validator (value) {
  24 + return oneOf(value, ['left', 'right', 'top']);
  25 + },
  26 + default: 'right'
  27 + },
21 inline: { 28 inline: {
22 type: Boolean, 29 type: Boolean,
23 default: false 30 default: false
@@ -32,6 +39,7 @@ @@ -32,6 +39,7 @@
32 classes () { 39 classes () {
33 return [ 40 return [
34 `${prefixCls}`, 41 `${prefixCls}`,
  42 + `${prefixCls}-label-${this.labelPosition}`,
35 { 43 {
36 [`${prefixCls}-inline`]: this.inline 44 [`${prefixCls}-inline`]: this.inline
37 } 45 }
src/styles/components/form.less
  Show/Hide comments   View file @184dba1
1 -@form-prefix-cls: ~"@{css-prefix}form";  
2 \ No newline at end of file 1 \ No newline at end of file
  2 +@form-prefix-cls: ~"@{css-prefix}form";
  3 +@form-item-prefix-cls: ~"@{form-prefix-cls}-item";
  4 +
  5 +.@{form-prefix-cls} {
  6 + .@{form-item-prefix-cls}-label {
  7 + text-align: right;
  8 + vertical-align: middle;
  9 + float: left;
  10 + font-size: @font-size-small;
  11 + color: @text-color;
  12 + line-height: 1;
  13 + padding: 10px 12px 10px 0;
  14 + box-sizing: border-box;
  15 + }
  16 + &-label-left .@{form-item-prefix-cls}-label {
  17 + text-align: left;
  18 + }
  19 + &-label-top .@{form-item-prefix-cls}-label {
  20 + float: none;
  21 + display: inline-block;
  22 + padding: 0 0 10px 0;
  23 + }
  24 + &-inline{
  25 + .@{form-item-prefix-cls} {
  26 + display: inline-block;
  27 + margin-right: 10px;
  28 + vertical-align: top;
  29 + }
  30 + }
  31 +}
  32 +
  33 +.@{form-item-prefix-cls} {
  34 + margin-bottom: 24px;
  35 + vertical-align: top;
  36 + .clearfix();
  37 + &-content {
  38 + position: relative;
  39 + line-height: 32px;
  40 + font-size: @font-size-small;
  41 + }
  42 +
  43 + &-required {
  44 + .@{form-item-prefix-cls}-label:before {
  45 + content: '*';
  46 + display: inline-block;
  47 + margin-right: 4px;
  48 + line-height: 1;
  49 + font-family: SimSun;
  50 + font-size: @font-size-small;
  51 + color: @error-color;
  52 + }
  53 + }
  54 + &-error {
  55 + // todo
  56 + }
  57 +}
3 \ No newline at end of file 58 \ No newline at end of file
test/routers/form.vue
  Show/Hide comments   View file @184dba1
1 <template> 1 <template>
2 - <div>  
3 - <i-form>  
4 - 2 + <div style="width: 400px">
  3 + <i-form v-ref:form :model="form" :rules="rules" :label-width="50" label-position="right">
  4 + <form-item label="邮箱" prop="mail">
  5 + <i-input :value.sync="form.mail" placeholder="请输入邮箱">
  6 + <Icon type="ios-email-outline" slot="prepend"></Icon>
  7 + </i-input>
  8 + </form-item>
  9 + <form-item label="密码" prop="passwd">
  10 + <i-input type="password" :value.sync="form.passwd" placeholder="请输入密码">
  11 + <Icon type="ios-locked-outline" slot="prepend"></Icon>
  12 + </i-input>
  13 + </form-item>
  14 + <form-item>
  15 + <i-button type="primary" @click="onSubmit('form')">提交</i-button>
  16 + </form-item>
5 </i-form> 17 </i-form>
6 </div> 18 </div>
7 </template> 19 </template>
@@ -9,9 +21,40 @@ @@ -9,9 +21,40 @@
9 export default { 21 export default {
10 props: {}, 22 props: {},
11 data () { 23 data () {
12 - return {} 24 + return {
  25 + form: {
  26 + mail: '',
  27 + passwd: ''
  28 + },
  29 + rules: {
  30 + mail: [
  31 + {
  32 + required: true, message: '请输入邮箱', trigger: 'blur'
  33 + },
  34 + {
  35 + min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'
  36 + }
  37 + ],
  38 + passwd: [
  39 + {
  40 + required: true, message: '请输入密码', trigger: 'blur'
  41 + }
  42 + ]
  43 + }
  44 + }
13 }, 45 },
14 computed: {}, 46 computed: {},
15 - methods: {} 47 + methods: {
  48 + onSubmit (formName) {
  49 + this.$refs[formName].validate((valid) => {
  50 + if (valid) {
  51 + this.$Message.success('submit!');
  52 + } else {
  53 + this.$Message.error('error submit!');
  54 + return false;
  55 + }
  56 + });
  57 + }
  58 + }
16 }; 59 };
17 </script> 60 </script>
18 \ No newline at end of file 61 \ No newline at end of file