![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 74
butcher2000
一定要站在自己所热爱的世界里,闪闪发光
展开
-
vuedraggable实现组件拖拽,页面生成器?
使用H5的draggable="true"虽然可以实现拖拽,但如果是在vue中使用,我们需要去封装,虽然不难,但是有成熟的轮子为什么不用呢?在vue中实现拖拽可以使用vuedraggable实现。在vue2中的使用有一堆文章,但是在vue3中的使用还是比较少,这里使用vue3进行演示插件仓库地址:vuedraggable1、安装yarn add vuedraggable@next# 或者npm i -S vuedraggable@next2、使用import draggable fr.原创 2021-11-16 18:19:35 · 7447 阅读 · 2 评论 -
H5组件拖拽与放置
1、效果为了便于理解原理,这里举例在组件列表中拖拽一个按钮到容器中生成一个新按钮的案例,代码尽可能简洁,主要是说明清楚如何实现的拖拽,如下:2、原理使用H5自带的拖拽api实现组件拖拽生成,关键的点如下:1、被拖拽的目标组件(以下简称目标)上需要添加一个属性draggable="true"例如需要让一个按钮可以拖拽:<button id="btn" type="button" draggable="true">按钮</button>2、需要了解以下几个监听事件用于原创 2021-11-13 14:40:48 · 2967 阅读 · 0 评论 -
ant-design-vue+vite主题切换详细步骤(简单案例)
现在越来越多的网站支持主题切换,我们的也要!在这,我们要实现两个例子,主题切换与夜间模式!主题切换:夜间模式:1、准备工作,初始化一个简单的vite项目安装 ant-design-vue和lessyarn add ant-design-vue@nextyarn add less --save因为ant-design-vue是使用less开发的,所以既然用了它,咱最好还是用和它一致的less。在main.ts中全局引入antd组件与样式import { createApp }.原创 2021-11-09 22:29:41 · 5535 阅读 · 13 评论 -
Ant Design Vue中DatePicker日期选择框默认绑定dayjs对象数据格式问题
我的需求是选择日期后,提交的数据可以是我期望的格式。然而遇到的问题却是:代码:<template> <a-date-picker v-model:value="receive" /> {{ receive }}</template><script lang='ts'>import { defineComponent, reactive } from "vue";import dayjs from "dayjs";export def原创 2021-10-23 14:44:28 · 4713 阅读 · 2 评论 -
axios在vue3脚手架项目+ts中使用
1、安装依赖npm install --save axios2、配置一下axios在项目中的src目录下创建一个config目录,在其中创建一个http.ts的文件。import axios, {AxiosRequestConfig,AxiosResponse} from "axios";// 请求拦截axios.interceptors.request.use((config: AxiosRequestConfig) => { return config;})// 响应原创 2021-10-16 17:08:09 · 808 阅读 · 0 评论 -
创建自己的图标库,并在项目中使用
图标可以美化我们的页面,让用户更易识别我们功能的含义,很多前端框架都有自己的图标库,但是我们自己的项目如何使用图标库呢,这里推荐阿里巴巴官方的图标库:官网: https://www.iconfont.cn/进入需要登录,使用其中一种方式登录就可以了~1、收藏图标搜索找到你想要的图标:2、查看收藏的图标3、添加至项目注意如果你没有项目,就创建一个项目例如我这里的项目:我的添加后会自动跳转到你的项目,此时可以选择在线引用还是下载。注意:它这里对于图标的使用有三种方式Unicod.原创 2021-08-09 18:02:56 · 782 阅读 · 0 评论 -
node js 是服务器
前提是你已安装node.jsnode在安装的时候就内置了很多依赖,官方文档,当然node官方不可能做到尽善尽美,所以也有很多第三方的依赖,可以用,生态也很完善,几乎我们主流编程语言能干的事,都能用它做。1、http服务器首先编写一个http.js文件const http = require('http');// 引入nodejs内置http,相当于java的 import java.net.http;//创建一个http服务http.createServer(function(reque.原创 2021-07-29 11:47:53 · 149 阅读 · 0 评论 -
ECMAScript 6.0 let | const | module | promise | 箭头函数
1、不看系列ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。这标准从一开始就是针对 JavaScript 语言制定的但是之所以不叫 JavaScript,有两个原因。Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经原创 2021-07-26 17:50:49 · 109 阅读 · 0 评论 -
原生js的事件委托
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件委托</title> </head><body> <ul i原创 2021-06-22 00:24:50 · 929 阅读 · 1 评论