vue-sina-emotion新浪表情面板的vue組件

vue-sina-emotion

新浪表情面板的vue組件 傳送門

setup

npm install lpreterite/vue-sina-emotion

use

# js
import Vue from 'vue';
import VueSinaEmotion from 'vue-sina-emotion';
// or import no babel code
// import VueSinaEmotion from 'vue-sina-emotion/src/';
Vue.component('vue-sina-emotion', VueSinaEmotion);

var vm = new Vue({
    el: '#app',
    data: function(){
        return {
            emotions: [],
            emotion: '[表情]',
            emotionsMap: {}
        }
    },
    methods: {
        map: function(data){
            this.emotionsMap = data;
        }
    }
})

# html
<div id="app">
    <p>{{ emotion }} <img :src="emotionsMap[emotion]" alt=""></p>
    <vue-sina-emotion 
        :source="emotions"
        :map="map"
        @click="emotion=arguments[0].phrase">    
    </vue-sina-emotion>
</div>

#emotion modal
{
    "phrase": "[壞笑]",
    "type": "face",
    "url": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png",
    "hot": false,
    "common": true,
    "category": "",
    "icon": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_thumb.png",
    "value": "[壞笑]",
    "picid": ""
}

more see example

style

.sina-emotion-panel{}
.sina-emotion-panel__header{}
.sina-emotion-panel__content{}
.sina-emotion-panel__footer{}

.sina-emotion-panel .btn{ /** <,>,prev,next button style **/ }
.sina-emotion-panel .tabs{}
.sina-emotion-panel .tabs__item{}
.sina-emotion-panel .tabs__item--action{}
.sina-emotion-panel .tabsTools{}
.sina-emotion-panel .tabsToolsButton{}

Dev

# install dependencies
npm install

# serve with hot reload at localhost:8081
npm run dev

# build for production with minification
npm run build

# run mock serve
npm run mock