用VUE封装一个仿知乎canvas

最新推荐文章于 2024-07-29 17:09:37 发布
最新推荐文章于 2024-07-29 17:09:37 发布
阅读量432 收藏
点赞数 1
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000009580795
版权

git地址

仿知乎首页canvas效果

话不多说，直接看效果

图片描述
彩色效果

图片描述
黑白效果

那么问题来了怎么用？

  1. npm install vue-atom-canvas(直接用淘宝的cnpm更快)

  2. import引入import引入

  3. 配置参数，看看你的页面

参数默认类型描述
dotsNum50Number圆点个数
isColortrueBoolean是否显示颜色
roundColor#999String圆点颜色
lineColor#cccString连接线颜色

ps:也可以直接clone项目里的canvas.vue文件

喜欢就来个闪亮的start

weixin_34185320
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue经典开源项目汇总
xiangzhihong8的专栏
01-31 1万+
Vue.js（读音 /vjuː/, 类似于 view）是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。 相比Angular.js来说，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，是初创项目的前端首选框架。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用...
Vue使用printJS导出网页为pdf、printJS导出pdf、空白页解决、自定义页脚
林中明月间丶
01-05 2669
需求：网页已经写成了pdf的样式，需要点击导出pdf按钮 调用浏览器系统预览-打印。,覆盖外面原有的样式,以去除一些打印时不需要的而原HTML中有的样式。在我们想打印内容的标签上添加id，如下。在想要引入的页面中添加如下代码。
Vue3.0+TS 仿知乎
11-09
仿知乎每天更新好文章，包括权威的时事解读、有趣的生活建议 　　更符合用户口味的「主题日报」，覆盖电影、财经、设计、体育等领域 　　长评优先展示 　　离线下载功能，及时缓存近期的 30 篇文章
VueNews一个基于vue全家桶开发的仿知乎日报单页应用
08-10
Vue-News 一个基于vue全家桶开发的仿知乎日报单页应用
Vue3实现canvas画布组件，自定义画板
最新发布
Circle_Key的博客
07-29 520
【代码】Vue3实现canvas画布组件，自定义画板。
电子签名手机-vue
weixin_46252229的博客
03-26 1088
电子签名手机-vue <template> <div class="signature" @touchmove.prevent> <div class="boardBox" ref="boardBox"> <div class="bar"> <!-- <div class="item" @click="goback">--> <!-- <div
封装canvas各种方法的vue组件
09-07
封装canvas各种方法的vue组件、文字、多行文字7矩形、图片功能的vue；canvas组件
vue3_zhihu:基于Vue3仿知乎
03-25
智虎 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
Vue组件汇总_小胖梅后台管理系统资料
2401_84446825的博客
04-29 826
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
Vue组件收集
m0_46199530的博客
06-10 1449
Vue组件收集 文章目录Vue组件收集UI组件开发框架实用库服务端辅助工具应用实例Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2
全站开发好用vue库、API、框架 等好用网站合集
D_evin_的博客
11-15 2901
1.Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 https://element.eleme.io/#/zh-CN/component/menu 2.Vant 有赞前端团队开源的基于vue的移动端组件库 https://vant-contrib.gitee.io/vant/#/zh-CN/swipe 3.Mint UI 基于vue的移动端框架 http://mint-ui.github.io/docs/#/zh-cn2 4.Bootstrap 最受欢迎
VUE仿知乎网站(一)项目分析与设计
weixin_44208883的博客
08-04 1798
vue低仿知乎日报
xujingguo58的博客
04-25 859
概述一个基于vue的仿知乎日报的前端项目。关于知乎日报：知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。主要功能每天更新好文章，包括权威的时事解读、有趣的生活建议 　　更符合用户口味的「主题日报」，覆盖电影、财经、设计、体育等领域 　　长评优先展示 　　离线下载功能，及时缓存近期的 30 篇文章 　　更多贴心小细节：多图及长文预警；支持一
一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端
热门推荐
mose-x
05-08 14万+
sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端; 同时支持重新签名，覆盖签名，下载，保存等 github地址：https://github.com/mose-x/vue-sign-canvas.git ...
Vue2.0—仿知乎日报总结
weixin_34192993的博客
05-05 327
Vue-News 一个基于vue全家桶开发的仿知乎日报单页应用 项目github地址:源码地址 项目在线地址:在线地址 (PC模式下推荐使用chrome移动端模式浏览去观看) 如果觉得做得还不错 , 或者项目源码对您有帮助 , 希望您小抬右手到右上角点一个star , 您的支持是作者长期更新维护的动力^_^ 项目起源 从二月份开始学习vu...
Vue3 仿知乎项目实战（一） —— 项目初始化、封装专栏列表 / 头部 / 下拉菜单组件、初次使用自定义函数
Lyrelion的博客
02-17 1954
文件结构和代码规范 vue create zhihu
Vue3/React-对比实现仿知乎专栏--01
qq_41580536的博客
10-30 1035
Vue3/React-对比实现仿知乎专栏–01 技术栈 Vue3：全家桶+TS+bootstrap React：React全家桶(函数式组件hooks)+TS+Redux+Antd 项目创建 React ：create-react-app react-version --template typescript Vue3 ： ​ npm install -g @vue/cli npm install -g @vue/cli-init ​ vue create vue3-version 初步文件结构 /as
Vue3 仿知乎项目实战（二） —— 抽象验证规则、vue2/3 自定义组件的 v-model 对比、使用 $attrs 支持默认属性、表单插槽、自定义组件父子传值 mitt
Lyrelion的博客
02-18 799
表单分析 ValidateInput - 抽象验证规则 RuleProp：单条验证规则，包含了： 类型（比如 空值检测、邮箱检测、密码检测等验证规则类型） 类型对应的错误时的提示信息 RulesProp：验证规则组，一个输入框可能不止一个验证规则，而输入框就应该接受 验证规则组类型的参数rules: Array as PropType<RulesProp> 比如：判断是否为空并且符合邮箱格式，这就是两个验证规则 inputRef：输入框的绑定信息，包含了： 输入框值 ...
vue-cli4+element-ui搭建知乎项目及总结
qq_45745643的博客
09-28 972
花几天时间和小伙伴做了个仿知乎官网的项目，下面是我整理的项目搭建流程及部署和总结，如有不足之处欢迎大家批评指正！ 先奉上项目地址和源码！源码地址 ， 项目地址 一、目录结构 本项目使用vue-cli4脚手架创建，目录结构也比之前的2版本要简洁许多，下面是本项目的目录结构。 1.public文件夹下的data和found放的是json数据和图片资源，本来想直接调用知乎的数据接口，奈何没有权限，于是只好将json数据保存在本地了～ 2.assets放的也是图片资源 3.components放的是一些组件，.
用vue写一个仿知乎的评论跟评论回复功能
06-02
以下是一个简单的仿知乎评论和回复功能的 Vue 组件示例，仅供参考： ```vue 评论区 (comment, index) in comments" :key="index"> <strong>{{ comment.username }}：</strong>{{ comment.content }} ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值