1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<template>
    <div id="area">
        <a-form-item>
            <a-textarea ref="targetArea" :rows="4" v-model="visitorContent" :placeholder="this.$attrs.replyHolder"
                class="OwO-textarea" />
        </a-form-item>
        <span class="myTip fadeIn" v-if="showTip">现在你可以发送表情啦</span>
        <div ref="container" class="OwO fadeIn" v-show="init"></div>
    </div>
</template>
 
<script>
    import 'owo/dist/OwO.min.css';
    import OWO from '../../js/myOwO.js'
    import OwOjsonConfig from '../../assets/OwO.json'
 
    export default {
        props: {
            content: String
        },
        data() {
            return {
                init: false,
                showTip: false,
                visitorContent: '',
            }
        },
        watch: {
            visitorContent: function(newValue, oldValue) {
                if (newValue.length > 0) {
                    if (!this.init) {
                        this.showTip = true;
                        setTimeout(() => {
                            this.showTip = false;
                        }, 5000);
                    }
                    this.init = true;
                    this.initOwO();
                }
                this.$emit("update:content", newValue)
            },
        },
        methods: {
 
            initOwO() {
                var OwO_demo = new OwO({
                    logo: 'OωO表情',
                    // container: document.getElementsByClassName('OwO')[0],
                    // target: document.getElementsByClassName('OwO-textarea')[0],
                    container: this.$refs.container,
                    target: this.$refs.targetArea.$el,
                    // api: './OwO.json',
                    // api: 'http://diygod.github.io/OwO/demo/OwO.json',
                    jsonText: OwOjsonConfig,
                    position: 'down',
                    width: '100%',
                    maxHeight: '250px'
                });
            }
        }
    }
</script>
 
<style>
 
</style>