VUE实现box-shadow生成器

最终效果：

Html结构

 一层结构

 二层结构

    Horizontal Shadow :
     


    Vertical Shadow :
    


    Blur Radius :
    


    Spread Radius :
    


    Border Radius :
    


    Shadow Opacity :
    



    Inset Shadow :
    



     Color Shadow :
    


{{style}}

{{btn_text}}

功能实现

1.修改box的样式

为input标签绑定v-modle，来实现双向绑定。

为box绑定内联样式

 我们知道input的color只有rgb而没有rgba，所以我们需要写一个函数来生成rgba。

HexToRGBA(color,opacity){
    const r = parseInt(color.substr(1,2),16);
    const g = parseInt(color.substr(3,2),16);
    const b = parseInt(color.substr(5,2),16);
    this.fin_color = `rgba(${r},${g},${b},${opacity})`
},

 2.更新文本区的代码

UpdataStyle(){
    //{{style}}
    this.style = `box-shadow:${this.isInset ? 'inset':' ' } ${this.xshadow}px ${this.yshadow}px ${this.blur}px ${this.spread}px ${this.fin_color};\nborder-radius:${this.border};`
},

3.复制文本

copyStyle(){
    var area = document.querySelector("#styles");
    area.select();
    document.execCommand('copy');
    this.btn_text = "Copy!"
    setTimeout(()=>{
    this.btn_text = "Copy Styles"},3000)
}

完整代码