栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

写一个炫酷的 Vuejs 点赞组件

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

写一个炫酷的 Vuejs 点赞组件

参考:https://github.com/OYsun/VueStar/tree/master/src

分析一下这个组件已经实现的功能:

  1. 点赞的图标可定制
  2. 点赞的动画可定制

我们会在此基础上做一些改进:

  1. 可以把图标指定为激活状态
  2. 可以把图标替换为图片
  3. 支持点赞完成的后续操作

接下来,开始:

一、下载模板

首先,用 vue-cli 下载一个 Vuejs 模板。

https://github.com/savoygu/vue-component-template

与官网模板下载方式一致:

# 下载模板
vue init savoygu/vue-component-template i-vue-star

项目目录:

二、运行项目
# 进入到依赖中
cd i-vue-star
# 安装依赖,下载慢的话,用 cnpm
npm install
# 运行项目
npm run demo:dev

说一下这个模板怎么使用:通过 npm run demo:dev 是把“开发示例”运行起来了,在 example/src/main.js 中注册了 src/components/Hello.vue组件,在 example/src/App.vue中使用了 src/components/Hello.vue组件,所以当我们编写 src/component/Hello.vue 时,就能看到当前组件编写的效果。

三、开发组件

再开发之前,先修改一下组件文件名字,修改 Hello.vue为 Star.vue,修改这些文件:

  • src/components/Hello.vue
  • src/index.js
  • example/src/main.js

总而言之,就是把 Hello 改为 Star, 把 hello 改为 star。

拷贝代码:

说明:报错的话,重新运行一下项目。

详细代码参考:https://github.com/savoygu/i-vue-star

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241132.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号