remove props map function, fix format source to data in init

README.md

@@ -40,7 +40,7 @@ var vm = new Vue({
     <vue-sina-emotion 
         :source="emotions"
         :map="map"
-        @click="emotion=arguments[0].phrase">    
+        @change="emotion=arguments[0].phrase">    
     </vue-sina-emotion>
 </div>
 
@@ -78,7 +78,7 @@ more see **example**
 
 ## Dev
 
-``` bash
+```
 # install dependencies
 npm install
 
@@ -90,4 +90,9 @@ npm run build
 
 # run mock serve
 npm run mock
-```
+```
+
+## Change Log
+
+### 0.1.1
+remove props map function, fix format source to data in init

build/base.js

@@ -35,5 +35,5 @@ module.exports = {
     performance: {
         hints: false
     },
-    devtool: '#eval-source-map'
+    devtool: 'source-map'
 }

build/index.js

@@ -12,11 +12,20 @@ options.module.rules.unshift({
             'js': 'babel-loader',
             'css': ExtractTextPlugin.extract({
                 use: 'css-loader',
-                fallback: 'vue-style-loader'
+                fallback: {
+                    loader: 'vue-style-loader',
+                    options: {sourceMap: false}
+                }
             }),
             'scss': ExtractTextPlugin.extract({
-                use: 'css-loader!sass-loader',
-                fallback: 'vue-style-loader'
+                use: [
+                    { loader: 'css-loader', options: {sourceMap: false} },
+                    { loader: 'sass-loader', options: {sourceMap: false} }
+                ],
+                fallback: {
+                    loader: 'vue-style-loader',
+                    options: {sourceMap: false}
+                }
             })
         }
     }
@@ -29,7 +38,7 @@ options.plugins = [
       }
     }),
     new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
+      sourceMap: false,
       compress: {
         warnings: false
       }

example/index.html

@@ -8,7 +8,7 @@
     <div id="app">
       <h1>{{ title }}</h1>
       <p>{{ emotion }} <img :src="emotionsMap[emotion]" alt=""></p>
-      <vue-sina-emotion :source="emotions" @click="emotion=arguments[0].phrase" :map="map"></vue-sina-emotion>
+      <vue-sina-emotion :source="emotions" @change="emotion=arguments[0].phrase"></vue-sina-emotion>
     </div>
     <script src="/vendor/build.js"></script>
   </body>

example/main.js

@@ -27,9 +27,11 @@ var vm = new Vue({
             emotionsMap: {}
         }
     },
-    methods: {
-        map: function(data){
-            this.emotionsMap = data;
+    watch: {
+        emotions(val){
+            var map = {};
+            val.forEach(emotion=>map[emotion.value]=emotion.url);
+            this.emotionsMap = map;
         }
     }
 })

mock/index.js

@@ -1,6 +1,7 @@
+const path = require('path');
 const jsonServer = require('json-server');
 const server = jsonServer.create();
-const router = jsonServer.router('db.json');
+const router = jsonServer.router(path.join(__dirname, './db.json'));
 const middlewares = jsonServer.defaults();
 const emotions = require('./emotions.json');
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-sina-emotion",
   "description": "新浪表情面板的vue组件",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "dist/vue-sina-emotion.js",
   "author": "packy <[email protected]>",
   "keywords": [

src/handle.js

@@ -1,12 +1,3 @@
-import axios from 'axios';
-
-export function getEmotions(source, language){
-    return axios.get('https://api.weibo.com/2/emotions.json?callback=?', {params:{
-        source,
-        language
-    }});
-};
-
 export function hashEmotions(emotions){
     var groups = {},
         categories = [],

src/index.js

@@ -1,2 +1,4 @@
 import VueSinaEmotion from './vue-sina-emotion';
+import { hashEmotions, paginator } from './handle';
+export { VueSinaEmotion, hashEmotions, paginator };
 export default VueSinaEmotion;

src/vue-sina-emotion.vue

@@ -13,7 +13,7 @@
         </header>
         <div class="sina-emotion-panel__content">
             <template v-for="emotion in emotions.data">
-                <a href="#" @click.prevent.stop="$emit('click', emotion)">
+                <a href="#" @click.prevent.stop="$emit('change', emotion)">
                     <img :src="emotion.icon" :alt="emotion.phrase">
                 </a>
             </template>
@@ -82,26 +82,21 @@
     }
 </style>
 <script>
-import { hashEmotions, getEmotions, paginator } from './handle';
+import { hashEmotions, paginator } from './handle';
 export default {
     name: 'vue-sina-emotion',
     props: {
         source: Array,
         pageRows: {
             type: Number,
             default: 0
-        },
-        map: {
-            type: Function,
-            default: function(){}
         }
     },
     watch: {
         source(val){
             this.storage = hashEmotions(val);
             this.categories = paginator(this.categories.currentPage, this.storage.categories, {pageRow: 5});
             this.emotions = paginator(this.emotions.currentPage, this.storage.groups[this.currentCate] || []);
-            this.map(this.storage.map);
         },
         currentCate(val){
             this.emotions = paginator(this.emotions.currentPage, this.storage.groups[val] || []);
@@ -114,7 +109,7 @@ export default {
         }
     },
     data(){
-        return {
+        const data = {
             storage: {},
             emotions: {
                 pageRow: 0,
@@ -133,7 +128,12 @@ export default {
                 data: []
             },
             currentCate: '默认'
-        }
+        };
+
+        data.storage = hashEmotions(this.source);
+        data.categories = paginator(data.categories.currentPage, data.storage.categories, {pageRow: 5});
+        data.emotions = paginator(data.emotions.currentPage, data.storage.groups[data.currentCate] || []);
+        return data;
     },
     methods:{
         next(){