javascript - 将 jsColor lib 添加到 vue 组件

Question

我正在尝试添加简单的 jsColor lib对于我的 vuejs 项目，我正在 vueJS 中使用简单的 webpack。

所以我想将我的脚本添加到这个组件中:

<template>
    <div>
        <h3 class="text-center">Paragraph</h3>
        <div class="form-group">
            <label for="fontSize" class="control-label col-md-2">font-size</label>
            <div class="col-md-2">
                <input v-model="paragraph.fontSize" type="number" min="1" class="form-control">
            </div>
            <div class="col-md-1">
                <img class="changeColor" @click="alignment('left')" width="30" height="30" src="../../assets/left-alignment.png" />
            </div>
            <div class="col-md-1">
                <img class="changeColor" @click="alignment('center')" width="30" height="30" src="../../assets/center-alignment.png" />
            </div>
    
            <div class="col-md-1">
                <img class="changeColor" @click="alignment('right')" width="30" height="30" src="../../assets/right-alignment.png" />
            </div>
            <div class="col-md-1">
                <img class="changeColor" @click="alignment('justify')" width="30" height="30" src="../../assets/justify.png" />
            </div>
            <div class="col-md-1">
                <span>{{paragraph.align}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-2 col-md-6">
                Color:
                #<input class="jscolor" v-model="paragraph.color">
            </div>
        </div>
        <div class="form-group">
            <label for="paragraph" class="control-label col-md-2">Text</label>
            <div class="col-md-8">
                <textarea v-model="paragraph.text" class="form-control" rows="5" id="comment"></textarea>
            </div>
        </div>
        <div class="col-md-offset-2 col-md-8">
            <button @click.prevent="addParagraph()" class="btn btn-success btn-block">Add Paragraph</button>
        </div>
    </div>
</template>


<script>
import jsColor from '../../static/js/jscolor.js';
export default {
    data() {
        return {
            paragraph: {
                text: "",
                fontSize: 14,
                key: "Paragraph",
                align: "left",
                color: "000000",
                paragraph: {}
            }
        }
    },
    methods: {
        addParagraph() {
            var paragraph = {
                key: this.paragraph.key,
                text: this.paragraph.text,
                fontSize: this.paragraph.fontSize,
                align: this.paragraph.align,
            }
            this.$store.commit("appendToDocument", paragraph)
            var panelObj = {"section":"paragraph","color":"list-group-item-success","action":"added"};
            this.$store.commit("appendToPanel", panelObj);
        },
        alignment(option) {
            this.paragraph.align = option;
        }
    },
}
</script>

<style>
.margin-above {
    margin-top: 40px
}

.changeColor {
    padding: 5px;
}

.changeColor:hover {
    background-color: gray;
}
</style>

我已经尝试添加导入和要求，唯一有效的是使用 vuejs 生命周期内的 Mounted 函数，但问题是它只反射(reflect)在第一页加载上，如果再次打开组件脚本不工作。

有什么帮助吗？

Answer 1

以下是您可能感兴趣的示例组件:

https://gist.github.com/niveshsaharan/1c1567d8475b46d6886e387953596e9e

这是演示:https://codesandbox.io/s/6wolq8k4jz

<template>
<div class="input-control color-input">
    <input :value="value"
           :id="id"
           class="jscolor-input {hash:true,styleElement:'',onFineChange:'jsColorOnFineChange(this)'}"
           @change="onChange($event.target)"
           @input="onChange($event.target)"
           @focus="showColorPicker"
           @onFineChange="onFineChange"
           ref="color_input"
           maxlength="7"
    />
    <span class="color-value" ref="color_span" @click="showColorPicker"></span>
</div> 
</template>

<script>
import jscolor from './../plugins/jscolor/jscolor.js';
export default {
    name: 'jscolor',
    data(){
        return {
            color: '#000000'
        }
    },
    props: [
        'value',
        'id'
    ],
    methods: {
        onChange(target){
            this.color = target.jscolor.toHEXString();
            this.$refs.color_span.style.backgroundColor = this.color;
            this.$emit('input', this.color);
        },
        onFineChange(e){
            this.color = '#' + e.detail.jscolor;
            this.$refs.color_span.style.backgroundColor = this.color;
            this.$emit('input', this.color);
        },
        showColorPicker(){
            this.$refs.color_input.jscolor.show();
        }
    },
    mounted: function () {
        window.jscolor.installByClassName('jscolor-input');
        this.$refs.color_span.style.backgroundColor = this.value;
    },
    updated: function () {
        this.$refs.color_span.style.backgroundColor = this.value;
    }
}

window.jsColorOnFineChange = function(thisObj){
    thisObj.valueElement.dispatchEvent(new CustomEvent("onFineChange", {detail: {jscolor: thisObj}}));
}

用法:

    <jscolor id="colorThemeTextColor" v-model="theme_text_color"></jscolor>