From e7b6fe8b6376f48683c9f51018f5041ab651715c Mon Sep 17 00:00:00 2001
From: Clark Du <clark.duxin@gmail.com>
Date: Mon, 6 Nov 2017 11:16:23 +0800
Subject: [PATCH] feat: add element-ui example

---
 examples/with-element-ui/layouts/default.vue  |  10 ++
 examples/with-element-ui/nuxt.config.js       |  15 +++
 examples/with-element-ui/package.json         |  18 ++++
 examples/with-element-ui/pages/index.vue      | 100 ++++++++++++++++++
 .../with-element-ui/plugins/element-ui.js     |   7 ++
 5 files changed, 150 insertions(+)
 create mode 100644 examples/with-element-ui/layouts/default.vue
 create mode 100644 examples/with-element-ui/nuxt.config.js
 create mode 100644 examples/with-element-ui/package.json
 create mode 100644 examples/with-element-ui/pages/index.vue
 create mode 100644 examples/with-element-ui/plugins/element-ui.js

diff --git a/examples/with-element-ui/layouts/default.vue b/examples/with-element-ui/layouts/default.vue
new file mode 100644
index 000000000..184d6f6fd
--- /dev/null
+++ b/examples/with-element-ui/layouts/default.vue
@@ -0,0 +1,10 @@
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>Element Example</span>
+    </div>
+    <div>
+      <nuxt></nuxt>
+    </div>
+  </el-card>
+</template>
diff --git a/examples/with-element-ui/nuxt.config.js b/examples/with-element-ui/nuxt.config.js
new file mode 100644
index 000000000..643f79ee7
--- /dev/null
+++ b/examples/with-element-ui/nuxt.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  /*
+  ** Global CSS
+  */
+  css: [
+    'element-ui/lib/theme-default/index.css'
+  ],
+
+  /*
+  ** Add element-ui in our app, see plugins/element-ui.js file
+  */
+  plugins: [
+    '@/plugins/element-ui'
+  ]
+}
diff --git a/examples/with-element-ui/package.json b/examples/with-element-ui/package.json
new file mode 100644
index 000000000..d5696a30e
--- /dev/null
+++ b/examples/with-element-ui/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "with-element-ui",
+  "version": "1.0.0",
+  "license": "MIT",
+  "dependencies": {
+    "element-ui": "^1.4.9",
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  },
+  "devDependencies": {
+    "node-sass": "^4.6.0",
+    "sass-loader": "^6.0.6"
+  }
+}
diff --git a/examples/with-element-ui/pages/index.vue b/examples/with-element-ui/pages/index.vue
new file mode 100644
index 000000000..69c4a9277
--- /dev/null
+++ b/examples/with-element-ui/pages/index.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="elm-demo">
+    <el-form :model="account" :rules="formRules" ref="elm-demo" label-width="100px">
+      <el-row type="flex" justify="flex-start">
+        <el-col :xs="24" :sm="10">
+          <el-form-item label="Account Name" prop="name" required>
+            <el-input v-model="account.name"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="flex-start">
+        <el-col :xs="24" :sm="10">
+          <el-form-item label="Date" prop="date" required>
+            <el-date-picker v-model="account.date" style="width: 100%;"></el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="{span: 3, offset: 2}">
+          <el-form-item label="Subscribe" prop="subscribe">
+            <el-switch on-text="" off-text="" v-model="account.subscribe"></el-switch>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="flex-start">
+        <el-col :xs="24" :sm="10">
+          <el-form-item label="Rate" prop="rate">
+            <el-rate v-model="account.rate" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="{span: 10, offset: 2}">
+          <el-form-item label="Priority" prop="priority">
+            <el-radio-group v-model="account.priority">
+              <el-radio label="m">Medium</el-radio>
+              <el-radio label="h">High</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="center">
+        <el-button type="primary" @click="submit('elm-demo')">Create</el-button>
+        <el-button @click="reset('elm-demo')">Reset</el-button>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      account: {
+        name: '',
+        date: '',
+        subscribe: false,
+        priority: 'm',
+        rate: 5
+      },
+      formRules: {
+        name: [
+          { required: true, message: 'Account is required', trigger: 'blur' },
+          { min: 6, message: 'Account\'s length is at least 6', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$message.success('Create successfully !')
+          if (formName === 'popForm') {
+            this.popVisible = false
+          }
+          return false
+        } else {
+          this.$message.warning('Create failed')
+          return false
+        }
+      })
+    },
+    reset(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-select {
+  display: block
+}
+@media (max-width: 768px) {
+  .el-row {
+    flex-direction:column;
+    .el-button+.el-button {
+      margin-left: 0px;
+      margin-top: 15px;
+    }
+  }
+}
+</style>
diff --git a/examples/with-element-ui/plugins/element-ui.js b/examples/with-element-ui/plugins/element-ui.js
new file mode 100644
index 000000000..cb618add9
--- /dev/null
+++ b/examples/with-element-ui/plugins/element-ui.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Element from 'element-ui/lib/element-ui.common'
+import locale from 'element-ui/lib/locale/lang/en'
+
+export default () => {
+  Vue.use(Element, { locale })
+}