vuelidate示例

Author: kongbin02

package-lock.json

@@ -23,7 +23,8 @@
     "vue-markdown": "^2.2.4",
     "vue-router": "^3.0.1",
     "vue-touch": "^2.0.0-beta.4",
-    "vuedraggable": "^2.23.0"
+    "vuedraggable": "^2.23.0",
+    "vuelidate": "^0.7.4"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

package.json

@@ -10,7 +10,7 @@ const left_menu_data = [
     to: '/vue_data_editor',
     img: '../../static/icon/vue_data_editor.png',
     title: '数据格式化编辑器',
-    description: '使用Brace插件实现代码高亮编辑器，方便你实现在线的数据格式化编辑与显示的工具。',
+    description: '数据格式化编辑器，方便你实现在线的数据格式化编辑与显示的工具。支持的数据格式包括：JSON、HTML、XML',
     url: '/vue_data_editor',
     course: ""
   },

src/layouts/left_menu_data.js

@@ -8,6 +8,7 @@ import './css/theme'
 import Clipboard from './plugins/clipboard'
 import Notify from './plugins/PpNotify'
 import VTouch from './plugins/vuetouch'
+import Vuelidate from './plugins/vuelidate'
 
 Vue.config.productionTip = false
 
@@ -22,7 +23,7 @@ const app = {
 };
 
 
-[Quasar, Clipboard, Notify, VTouch].forEach(plugin => plugin({
+[Quasar, Clipboard, Notify, VTouch, Vuelidate].forEach(plugin => plugin({
   app,
   router,
   Vue

src/main.js

@@ -0,0 +1,126 @@
+import {required} from 'vuelidate/lib/validators'
+
+export default {
+  name: 'vuelidate_index',
+  data: () => ({
+    model: {
+      login_name: null,
+      login_pwd: null,
+    },
+    remember_me: true,
+    error_msg: null
+  }),
+  validations: {
+    model: {
+      login_name: {required},
+      login_pwd: {required},
+    },
+  },
+  render(h) {
+    return h('div', {
+      staticClass: 'items-center col-grow',
+      style: {
+        marginTop: '100px'
+      }
+    }, [
+      h('div', {
+        staticClass: 'login-bg shadow-3 radius-3',
+        style: {
+          margin: '0 auto',
+          width: '310px',
+          height: '420px',
+          padding: '20px 25px',
+          zIndex: 3,
+          background: 'rgba(216, 220, 229, 0.5)'
+        }
+
+      }, [
+        h('div', {
+          staticClass: 'text-tertiary text-center',
+          style: {
+            fontSize: '25px',
+            fontWeight: '700',
+            margin: '20px 0 80px'
+          }
+        }, ['VUE组件库平台']),
+        h('q-input', {
+          staticClass: 'bg-white radius-3 font-13 q-pl-xs q-pr-sm shadow-1 q-mb-md',
+          style: {
+            height: '33px',
+            fontWeight: '400',
+            border: '1px solid white',
+
+          },
+          props: {
+            color: 'dark',
+            type: 'text',
+            hideUnderline: true,
+            value: this.model.login_name,
+            placeholder: '请输入账号',
+            before: [{
+              icon: 'person'
+            }]
+          },
+          on: {
+            input: (v) => this.model.login_name = v
+          }
+        }),
+        h('q-input', {
+          staticClass: 'bg-white radius-3 font-13 q-pl-xs q-pr-sm pp shadow-1 login-input',
+          style: {
+            height: '33px',
+            fontWeight: '400',
+          },
+          props: {
+            color: 'dark',
+            type: 'password',
+            hideUnderline: true,
+            value: this.model.login_pwd,
+            placeholder: '请输入密码',
+            clearable: true,
+            before: [{
+              icon: 'lock',
+            }]
+          },
+          on: {
+            input: (v) => this.model.login_pwd = v
+          }
+        }),
+        h('q-btn', {
+          staticClass: 'login-btn font-13 full-width shadow-1 radius-2',
+          style: {
+            marginTop: '10px',
+            height: '33px',
+            minHeight: '33px',
+            fontWeight: '400'
+          },
+          props: {
+            color: 'primary',
+          },
+          on: {
+            click: () => {
+              this.$v.model && this.$v.model.$touch();
+              if (this.$v.model.login_name.$error) {
+                this.error_msg = "提示：请输入账号"
+                return
+              }
+
+              if (this.$v.model.login_pwd.$error) {
+                this.error_msg = "提示：请输入密码"
+              }
+
+              console.log(this.$v.model)
+              if (!this.$v.model.$error) {
+                this.$q.ok("登录成功！")
+              }
+            },
+          }
+        }, '登 录'),
+
+        h('div', {
+          staticClass: 'text-negative text-left q-mt-sm font-13 text-weight-medium'
+        }, [this.error_msg]),
+      ])
+    ])
+  }
+}

src/pages/vuelidate/index.js

@@ -0,0 +1,5 @@
+import Vuelidate from 'vuelidate'
+
+export default ({Vue}) => {
+  Vue.use(Vuelidate)
+}

src/plugins/vuelidate.js

@@ -69,6 +69,13 @@ export default [
           page: () => import('../pages/vue_data_editor/index')
         }
       },
+      {
+        path: '/vuelidate',
+        components: {
+          left, header,
+          page: () => import('../pages/vuelidate/index')
+        }
+      },
     ]
   },
 ]