将 jsColor 库添加到 vue 组件

Posted 2023-02-23

【中文标题】将 jsColor 库添加到 vue 组件

【英文标题】：Add jsColor lib to vue component

【发布时间】：2018-01-15 20:08:07

【问题描述】：

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

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

<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')"   src="../../assets/left-alignment.png" />
            </div>
            <div class="col-md-1">
                <img class="changeColor" @click="alignment('center')"   src="../../assets/center-alignment.png" />
            </div>
    
            <div class="col-md-1">
                <img class="changeColor" @click="alignment('right')"   src="../../assets/right-alignment.png" />
            </div>
            <div class="col-md-1">
                <img class="changeColor" @click="alignment('justify')"   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>

我已经尝试添加 import 和 require，唯一有效的是在 vuejs 生命周期中使用 mount 函数，但问题是它只反映在第一页加载，如果再次打开组件脚本不工作。

有什么帮助吗？

【参考方案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>