basic

savokiss · Oct 15, 2016 · f46f408 · f46f408
1 parent bc4a283
commit f46f408
Show file tree

Hide file tree

Showing 16 changed files with 182 additions and 3,304 deletions.
diff --git a/README.md b/README.md
diff --git a/build/webpack.docs.conf.js b/build/webpack.docs.conf.js
@@ -0,0 +1,59 @@
+var config = require('../config')
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    loaders: utils.styleLoaders({ sourceMap: config.docs.productionSourceMap, extract: true })
+  },
+  devtool: config.docs.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.docs.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
+    publicPath: config.docs.assetsPublicPath
+  },
+  vue: {
+    loaders: utils.cssLoaders({
+      sourceMap: config.docs.productionSourceMap,
+      extract: true
+    })
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    // extract css into its own file
+    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : config.docs.index,
+      template: 'docs/index.jade',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      }
+    })
+  ]
+})
diff --git a/config/index.js b/config/index.js
@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: './',
+    assetsPublicPath: '/',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
@@ -16,6 +16,13 @@ module.exports = {
     productionGzip: false,
     productionGzipExtensions: ['js', 'css']
   },
+  docs: {
+    index: path.resolve(__dirname, 'gh-pages/index.html'),
+    assetsRoot: path.resolve(__dirname, 'gh-pages'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '',
+    productionSourceMap: true
+  },
   dev: {
     env: require('./dev.env'),
     port: 8088,

diff --git a/index.html b/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
-<head><title>pinyin</title>
-  <link href=./dist/static/css/app.4b3e0d51e2745de27bde2bc46541d2c8.css rel=stylesheet>
+<head>
+  <title>pinyin</title>
 </head>
+
 <body>
-<div id=app></div>
-<script type=text/javascript src=./dist/static/js/manifest.901189d3769700fc5114.js></script>
-<script type=text/javascript src=./dist/static/js/vendor.600f59d30fff71db42d5.js></script>
-<script type=text/javascript src=./dist/static/js/app.d9c2fe8d4d689048cf30.js></script>
+<div id="app"></div>
+<!-- built files will be auto injected -->
 </body>
+
 </html>
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "pinyin",
+  "name": "vue-cascading-address",
   "version": "1.0.0",
   "description": "A Vue.js project",
   "author": "savokiss <jaynaruto@qq.com>",

diff --git a/params.json b/params.json
diff --git a/src/App.vue b/src/App.vue
diff --git a/src/app.vue b/src/app.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="container">
+    <div class="row text-center">
+      <div class="col-md-12">
+        <h1> vue城市级联选择 </h1>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-4 col-md-offset-4">
+        <cascading-address @confirm="confirmCity"></cascading-address>
+      </div>
+
+    </div>
+    <div class="row">
+      <div class="col-md-4 col-md-offset-4">
+        <pre>{{ confirmData || 'confirm事件中的data将显示在此处' }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="babel">
+  import cascadingAddress from './cascadingAddress'
+  export default {
+    data(){
+      return {
+        confirmData : ''
+      }
+    },
+    components: {
+      cascadingAddress
+    },
+    methods: {
+      confirmCity(data){
+        this.confirmData = data;
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/cascadingAddress.vue → src/cascadingAddress.vue b/src/components/cascadingAddress.vue → src/cascadingAddress.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
-    <input v-model="all" @click="open('show')" type="text" class="form-control"
-           :class="{submmited : !p }" readonly="true"/>
+    <input v-model="model" @click="open()" type="text" class="form-control" :class="inputClass" readonly/>
 
     <div v-show="show" class="cascading-address">
       <ul>
@@ -26,12 +25,12 @@
         <label class="control-label text-success">
           <span class="text-muted">地址：</span>
           {{ p }} {{ c }} {{ a }} {{ d }}
-          <!--{{ p }} {{ c }}-->
         </label>
       </div>
 
       <div class="panel-footer text-right">
-        <button @click="clear()" class="btn btn-link btn-sm">清空</button>
+        <button @click="close()" class="btn btn-link btn-sm">关闭</button>
+        <button @click="clear()" class="btn btn-default btn-sm">清空</button>
         <button @click="confirm()" class="btn btn-success btn-sm" :disabled="!(p&&c) && p!='国外'">确定</button>
       </div>
     </div>
@@ -63,22 +62,16 @@
   .cascading-address .form-group {
     margin: 10px;
   }
-
-  .input.error {
-    border: solid 1px #a94442;
-  }
-
-  .text-danger {
-    position: relative;
-    left: -2px;
-  }
 </style>
 <script lang="babel">
   import addressData from './cascadingAddressData.json'
   export default{
+    props: {
+      inputClass: String
+    },
     data(){
       return {
-        all: '',
+        model: '',
         p: '',
         c: '',
         a: '',
@@ -119,7 +112,7 @@
         // 任何数据变动都更新完整地址
         this.$watch(function () {
           var address = (this.p + ' ' + this.c + ' ' + this.a + ' ' + this.d);
-          this.all = address.replace(/undefined *|   /g,'');
+          this.model = address.replace(/undefined *|   /g,'');
         }).bind(this)
       },
       clear(){
@@ -128,11 +121,19 @@
         this.a = '';
         this.d = '';
       },
-      open(action){
-        this.show = action === 'show';
+      open(){
+        this.show = true;
+      },
+      close(){
+        this.show = false;
       },
       confirm(){
         this.show = false;
+        this.$emit('confirm', {
+          province: this.p,
+          city: this.c,
+          area: this.a
+        })
       },
       setProvince(p){
         this.p = p;

diff --git a/src/components/cascadingAddressData.json → src/cascadingAddressData.json b/src/components/cascadingAddressData.json → src/cascadingAddressData.json
diff --git a/src/main.js b/src/main.js
@@ -2,11 +2,11 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import Resource from 'vue-resource'
-import App from './App'
+import App from './app'
 import 'bootstrap/dist/css/bootstrap.css'
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   render: h => h(App)
-})
+});
diff --git a/src/pinyin.json b/src/pinyin.json
diff --git a/static/demo.gif b/static/demo.gif