![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 91
web秀
不仅仅是前端,还有更丰富的知识哦
展开
-
Electron+Vue3+TypeScript+Vite +Vue.Draggable 完成事务拖动
原文地址:《Electron+Vue3+TypeScript+Vite +Vue.Draggable 完成事务拖动》前言有了简单的框架,下面来点实际业务相关的操作吧,集成 Vue.Draggable,将每一项任务拖拽任务到每个分类吧。Vue.Draggable 已经提供了一些完美的示例,这是 Vue.Draggable 官方提供的示例,https://sortablejs.github.io/vue.draggable.next/#/two-lists是不是正是我们要的呢?集成 Vue.Dr原创 2022-05-16 17:51:32 · 564 阅读 · 0 评论 -
Electron+Vue3+TypeScript+Vite桌面应用TodoList UI架构
原文地址:https://www.webxiu.com.cn/post/10005242前言上一章节《Electron+Vue3+TypeScript+Vite桌面应用程序项目初始化》完成后,我们的桌面应用程序如上图,这次我们先美化一下界面,形成初步的UI框架。从这里开始需要书写css,我们选择SCSS工具,先安装:npm install sass -save-dev新建assets/scss/globalVariable.scss// 这里书写全局的css样式,或者方法等修改 vite原创 2022-05-13 16:57:38 · 601 阅读 · 0 评论 -
Electron+Vue3+TypeScript+Vite桌面应用程序项目初始化
https://www.webxiu.com.cn/post/10005241初始化vite项目yarn create vite todolist --template vue-tscd todolistyarnyarn dev浏览器访问3000端口安装Electronyarn add -D electron electron-builder rimraf vite-plugin-electron electron-devtools-installer如果觉得安装慢,可以改为淘宝原创 2022-05-12 11:45:18 · 1967 阅读 · 2 评论 -
原生JavaScript和Vue、小程序都是如何阻止事件冒泡的?
前言事件冒泡,可能有些同学还不是很清楚,什么是事件冒泡?来看个简单例子。<div onclick="alert('最外层')"> <div onclick="alert('中间层')"> <a id="ahref" href="http://www.javanx.cn" onclick="alert('最里层')&q原创 2018-11-21 12:07:07 · 444 阅读 · 0 评论 -
VUE开发一个组件——Vue list列表滑动删除
前言滑动删除,在很多APP软件里面可以见到,比如淘宝的订单列表,QQ微信的聊天记录等等,今天就来看看JavaScript是如何实现这个功能的,之所以说是vue,主要是框架是vue啦,主要还是JS+CSS部分。页面部分页面就超级简单咯,遍历一个列表,添加touchstart和touchend事件,并添加删除按钮。如果滑动就添加move类样式,向左滑动60px。<ul> <...原创 2018-11-30 14:12:58 · 3243 阅读 · 3 评论 -
VUE开发一个组件——Vue PC城市选择控件
前言前面用vue开发了三四个组件了,都是H5的,现在来看看PC是如何玩转组件的?其实和H5相同,样式不同而已。相关推荐《VUE开发一个组件——日历选择控件》 《VUE开发一个组件——移动端弹出层(IOS版)》 《VUE开发一个组件——Vue tree树形结构》都提供源码,可以去github上面获取。城市控件开始今天的课题,制作一个PC版的城市选择控件。样式制作...原创 2018-11-27 16:53:36 · 3268 阅读 · 5 评论 -
Vue全局指令:如何添加全局指令?(附2个常用自定义指令)
前言前面有专门的文字,讲过Vue指令,以及如何使用指令,今天就来讲讲如何添加全局指令,并且附上2个非常适用的例子。《Vue如何创建自定义指令?》如何添加全局指令?在上面文章中,提到过一种方法,在main.js(入口JS文件)中引入你已经写好的指令文件,可以省略文件后缀:// main.jsimport focus from 'xxx/directive'如果你有多个指令文件了?怎...原创 2019-05-30 17:51:47 · 15735 阅读 · 0 评论 -
Vuex+localStorage数据状态持久化
前言在前面文章中,我们详细的讲述了Vuex相关的知识,没有了解的小伙伴可以先去了解一波:《Vuex是什么?Vuex能做什么?Vuex怎么使用?》这篇文章主要是讲讲如何使Vuex数据持久化?顾名思义,浏览器想要数据持久化,必须用到localStorage或者sessionStorage,可能还有不知道这两个东西是干什么的小伙伴,简单的说一下:localStorage和sessionSto...转载 2019-06-18 15:18:20 · 1380 阅读 · 0 评论 -
Vue.js 如何使用 Socket.IO ?
在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能。1、什么是 Socket.IO?Socket.IO是一个WebSocket库,可以在浏览器和服务器之间实现实...原创 2019-07-23 15:53:39 · 2022 阅读 · 0 评论