前端开发们最喜欢使用的一款快速吸色软件----ColorSnapper

日常开发过程中,前端开发经常是需要在开发页面之前,能具体知道UI设计页面的色值啊,宽高啊,大小啊等等。那么我们其实是要麻烦UI小姐姐的,这难道不是是一个前端开发该有的基本技能吗?还需要麻烦UI小哥哥小姐姐们吗?

当然,目前简单的吸色方法,大家基本上都能说出来几个,比方:QQ截图吸色,PS吸色,MarkMan等等。这些方法都是有些许缺陷的,QQ截图吸色需要打开QQ,而且吸取的色值有色差;PS吸色要打开PS特别庞大的工程,很大;MarkMan吸色需要打开图片文件或者截图复制进去,也有色差的问题。PS:解决色差是因为需要psd源文件。

好了,废话说这么多,走进正题,我给大家介绍一款非常棒的Mac软件:ColorSnapper。

一、下载安装:

http://xclient.info/?_=1099d6343ab1a76762db2763521cea1d

下载应用进到一个百度网盘,然后输入网站自动跳出来的密码去网盘里面下载,下载完成后的解压密码xclient.info。安装都是小白傻瓜式安装。


二、如何使用:

1. 打开ColorSnapper,按下option+command+C,鼠标就会出现吸色的大圈圈,

2. 鼠标点击一次就可以选择色值模式,可以选择rgb的,也可以选择#ffffff这种的,点击选择后就可以直接复制了。

3. 如果按下option+command+C的话,然后鼠标长按,就能看到选色器还能放大,哈哈哈哈哈


三、可以设置开机自启动:

右上角菜单栏,右键Preferences,选择 Launch on system startup



好了,好喜欢,你们也会喜欢的。



  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的登录页面的代码示例: ```html <template> <div class="login-container"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login">登录</el-button> </el-form-item> </el-form> </div> </template> <script> import { reactive } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { name: 'LoginPage', components: { ElForm, ElFormItem, ElInput, ElButton, }, setup() { const loginForm = reactive({ username: '', password: '', }); const loginRules = { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }], }; const login = () => { // TODO: 登录逻辑 console.log('登录'); }; return { loginForm, loginRules, login, }; }, }; </script> <style scoped> .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .login-form { width: 400px; } </style> ``` 此示例使用了 Vue3 和 Element-UI,通过 reactive API 实现数据的响应式,使用 ElForm、ElFormItem、ElInput、ElButton 组件构建登录表单。需要注意的是,这里的代码仅为一个简单示例,实际开发中还需要处理表单校验、登录逻辑等方面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值