简单几步！豆包MarsCode 助我魔改前端组件 - 文章 - 开发者社区

picture.image

最近，PM 大大突然给我布置了一个任务，让我帮 Ta 做一个**“五颜六色的输入框”** ，要梦幻的，有活力的。

作为一名刚步入职场的非资深前端开发，我还记得上学时了解到的一个不错的前端组件库：https://element-plus.org，浏览一圈后，发现这里只有最基础的组件样式，实现不了 PM “梦幻活力渐变框”的需求。

picture.image

不过没关系，我想起了我的好帮手：豆包MarsCode AI 编程助手 ，看看 Ta 能不能帮我魔改输入框！

仓库运行

首先，我先本地 Clone 下来这个代码库。运行：


          
              

            Git  clone https://github.com/element-plus/element-plus

紧接着，我打开 package.json 文件，向豆包MarsCode 提问：“如何运行这个仓库”。

picture.image

按照 AI 助手的指示，我需要安装 pnpm 等，因为我环境已经安装好了，所以可以省略这步。不过我需要启动一下这个项目。运行：


          
              

            pnpm docs:dev

魔改输入框

运行起来后，我将对这个输入框下手了。

picture.image

首先我搜到了这个输入框的代码位置，在 /docs/examples/input/basic.vue 文件下。接着我来询问豆包MarsCode ：“如何让这个输入框的颜色变成渐变色”。

picture.image

按照 AI 示例，我尝试了一下，结果输入框的整个底色都变成了炫彩的。

看起来效果不太好，文字都看不清楚了，所以我继续做进一步的调整。

picture.image

我再次询问豆包MarsCode： “我想要的不是背景色渐变，是边框渐变色”。

picture.image

这一次有点那味儿了。

picture.image

“边框的颜色可以再丰富一些吗，加上黄色、白色” 。

“可以带上发光效果吗”？

“边框的渐变色能否亮度调低，透明度调高”。

……

一系列问题下去，终于，PM 大大说的“梦幻活力渐变框” 搞出来啦！

picture.image

代码附录

详细的代码如下👇，欢迎大家尝试给自己的输入框美美变装，点击阅读原文即可立即尝试！


            
<template>
            
  <el-input v-model="input" style="width: 240px" class="gradient-input" placeholder="快来梦幻活力输入框输入内容"
            
    :suffix-icon="Position" />
            
</template>
            

            
<script setup lang="ts">
            
import { ref } from 'vue'
            
import { Position } from '@element-plus/icons-vue'
            
</script>
            

            
<style scoped>
            
.gradient-input {
            
  /* 用你想要的颜色取代 red 和 blue。 */
            
  border: 1px solid transparent;
            
  border-image: linear-gradient(to right, rgba(0, 0, 255, 0.6), rgba(255, 0, 0, 0.6), rgba(255, 255, 255, 0.6), rgba(255, 255, 0, 0.5), rgba(255, 0, 255, 0.6));
            
  border-image-slice: 1;
            
  box-sizing: border-box;
            

            
  /* 增加发光效果 */
            
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
            
}
            
</style>

picture.image