From fde12e8ef99a2c4520af8afd88a1debc778d8f72 Mon Sep 17 00:00:00 2001
From: "lei.jiang" <jianglei19940909@126.com>
Date: Sat, 16 Sep 2017 22:05:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9MdInput=E7=9A=84demo=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=BF=E4=B9=8B=E8=83=BD=E5=B1=95=E7=8E=B0=E9=AA=8C=E8=AF=81?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/mixin.vue | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/views/components/mixin.vue b/src/views/components/mixin.vue
index f78ab1e0..7c35f69b 100644
--- a/src/views/components/mixin.vue
+++ b/src/views/components/mixin.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="components-container">
     <div class='component-item'>
-      <md-input name="name" v-model="title" required :maxlength="100">
-        标题
-      </md-input>
+      <el-form :model="demo" :rules="demoRules">
+      <el-form-item prop="title">
+        <md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
+      </el-form-item>
+      </el-form>
       <code class='code-part'>Material Design 的input</code>
     </div>
 
@@ -22,18 +24,33 @@
 </template>
 
 <script>
-import MdInput from '@/components/MDinput'
 import PanThumb from '@/components/PanThumb'
+import MdInput from '@/components/MDinput'
 import waves from '@/directive/waves.js' // 水波纹指令
 
 export default {
-  components: { MdInput, PanThumb },
+  components: {
+    PanThumb,
+    MdInput
+  },
   directives: {
     waves
   },
   data() {
+    const validate = (rule, value, callback) => {
+      if (value.length !== 6) {
+        callback(new Error('请输入六个字符'))
+      } else {
+        callback()
+      }
+    }
     return {
-      title: ''
+      demo: {
+        title: ''
+      },
+      demoRules: {
+        title: [{ required: true, trigger: 'change', validator: validate }]
+      }
     }
   }
 }