文章库ARTICLE COLUMN

  • Composition Api封装业务hook思路示例分享

    Composition Api封装业务hook思路示例分享

      在近期的工作中有些知识总结分享就是使用 uniapp 的 Vue3 版进行开发。这样可以在开发中遇到业务场景相同的,就分装了一个hook 来减少代码,易于维护。  hook的场景  上图中已经很详细为我们展示3处使用到了获取列表的功能。分别是: 我的收藏、已投...

    34037718643403771864 评论0 收藏0
  • 详解Vue3 Composition API优雅封装第三方组件

    详解Vue3 Composition API优雅封装第三方组件

      我们时常会想在保持第三方组件原有功能(属性props、事件events、插槽slots、方法methods)的基础上,这些功能如何优化的实现?  以Element Plus的el-input为例:  在封装一个MyInput组件,把要使用的属性props、事件events和插槽slots、方法meth...

    34037718643403771864 评论0 收藏0
  • 在前端框架中封装Vue第三方组件的三个小技巧

    在前端框架中封装Vue第三方组件的三个小技巧

      这篇就是带大家一起学习下在封装第三方组件中,通过封装的组件去使用第三方组件的Attributes(属性)、Events(自定义事件)、Methods(方法)、Slots(插槽)以及优化技巧。  一、使用第三方组件的属性  封装一个elementUI的el-input输入框组件称为myInput,...

    34037718643403771864 评论0 收藏0
  • 元素选择器功能用实现Javascript

    元素选择器功能用实现Javascript

      本篇内容主要就是元素选择器功能用Javascript实现。  首先说下什么是元素选择器?  想必大家对于jquery很了解,知道它有对元素的查找功能,解释来说就是通过jquery的api获取页面元素的过程,该过程只需提供一个元素选择的条件字符串即可获取相应的满...

    34037718643403771864 评论0 收藏0
  • 时间选择器用JS来实现

    时间选择器用JS来实现

      本文主主要讲时间选择器用JS来实现,具体内容如下  dateTime.js  functionwithData(param){   returnparam<10?&#39;0&#39;+param:&#39;&#39;+param;   }   functiongetLoopArray(start,end){   varstart=start||0;   ...

    34037718643403771864 评论0 收藏0
  • 简化until封装watch常用逻辑代码

    简化until封装watch常用逻辑代码

      有对回调进行控制的watchWithFilter,有适用于当watch的值为真值时触发回调的whenever,还有只触发一次的watchOnce和最多触发一定次数的watchAtMost。怎么样?是不是很多相似场景都有用到,主要是被观察的变量在满足某个具体条件时则触发回调,本篇文章un...

    34037718643403771864 评论0 收藏0
  • 知识解读:JS属性scrollTop clientHeight scrollHeight

    知识解读:JS属性scrollTop clientHeight scrollHeight

      现在关于讲述scrollTop、clientHeight、 scrollHeight 的内容讲的都不深,这篇文章就深入了解下。这篇文章主要给大家讲述下这些概念的理解,并总结了这些概念彼此之间的数量关系和应用场景。  1.clientWidth、clientHeight、clientLeft、clientTop  1...

    34037718643403771864 评论0 收藏0
  • Vue+Mockjs模拟curd实现接口请求

    Vue+Mockjs模拟curd实现接口请求

      当你遇见前端页面开发完成,可后端接口还没好,I这样就直接无法联调,这时候我们用到mock数据。  先说说curd接口模拟  注:这边可以和后端先约定好接口路径以及入参返参的字段,避免二次修改  1.我们先看看下面代码,在安装,新建js文件,在文件中...

    34037718643403771864 评论0 收藏0
  • React实现轮播图效果的代码

    React实现轮播图效果的代码

       React实现轮播图效果如下:  终于可以用上react-slick组件,安装:  npminstallreact-slick--save   npminstallslick-carousel  当安装完后,就要导入css文件,主要是为了使用轮播图的页面上:  importSliderfrom&#39;react-slick&#39;;   ...

    34037718643403771864 评论0 收藏0
  • 利用js实现轮播图自动切换

    利用js实现轮播图自动切换

      实现轮播图自动切换就用JS,先看效果图  第一种  //点击按钮,序号变化   showIdx++;   if(showIdx==imgArr.length){   showIdx=0;   }   //所有盒子左移动   for(leti=0;i<items.length;i++){   items[i].style.left=parseFloat(items...

    34037718643403771864 评论0 收藏0
  • JavaScript实现左右点击切换图片具体代码

    JavaScript实现左右点击切换图片具体代码

      项目中要求实现左右点击切换图片,先看看想要展示效果:  效果:  HTML  <!DOCTYPEhtml>   <html>   <head>   <metacharset="utf-8">   <title>xxx——空间相册</title>   <linkrel="styleshee...

    34037718643403771864 评论0 收藏0
  • 原生JavaScript实现购物车示例演示

    原生JavaScript实现购物车示例演示

      本篇文章主要向大家介绍关于JavaScript实现购物车效果的具体代码,直接看下面:  HTML:  <!DOCTYPEhtml>   <html>   <head>   <metacharset="utf-8">   <title></title>   <styletype="text...

    34037718643403771864 评论0 收藏0
  • 用Vue3管理后台项目实现高德地图的选点

    用Vue3管理后台项目实现高德地图的选点

      现在客户来了一个项目简况:有一个业务场景是添加门店的地址和经纬度,地址可以输入,参考用经纬度当然不行,目前有最好方式就是让用户在地图上搜索或者直接点击获取点的经纬度等详细信息。现在我们就看具体的内容。  登录高德开放平台  创建应用,添...

    34037718643403771864 评论0 收藏0
  • 关于ahooks封装cookie localStorage sessionStorage方法

    关于ahooks封装cookie localStorage sessionStorage方法

      之所以讲这篇文章主要是为了加深对 React hooks 的理解。  因此,先要学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。  且培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择。  现在看下ahooks 是怎么封装 cookie/localSt...

    34037718643403771864 评论0 收藏0
  • 利用js来实现简单图片切换

    利用js来实现简单图片切换

      利用js来实现简单图片切换怎么做?直奔主题吧。  我们要说下代码的主要思路:  1、先给下一张和上一张两个按钮绑定单击响应事件;  2、获取img标签对象,用于修改src属性的值,实现图片的切换;  3、切换图片实质上就是修改img标签里面sr...

    34037718643403771864 评论0 收藏0
  • 详解Javascript的作用域、作用域链以及闭包

    详解Javascript的作用域、作用域链以及闭包

      一、我们先说说javascript的作用域  ①全局变量-函数体外部进行声明  ②局部变量-函数体内部进行声明  1)函数级作用域  javascript语言中局部变量不同于C#、Java等高级语言,在这些高级语言内部,采用的块级作用域中会声明新的变量,这些变量不会...

    34037718643403771864 评论0 收藏0
  • 用Vue.js实现点击左右按钮图片切换代码演示

    用Vue.js实现点击左右按钮图片切换代码演示

      本篇文章就是讲述Vue.js实现点击左右按钮图片切换的具体代码,具体内容如下:  从多种角度实现展示给大家。  效果:  html  通过v-for循环展示图片列表itemlist,将图片路径保存在data中的itemlist中,添加上下按钮的点击事件。  <template>  ...

    34037718643403771864 评论0 收藏0
  • 如何用Vue来接入hls/m3u8的直播视频演示

    如何用Vue来接入hls/m3u8的直播视频演示

      现在直播很流行,心里痒痒就试试。  互联网网络流媒体简介  不讲多,我们只需要知道常见的几种流媒体格式就行,至于发展与演变,里面的专业知识,主要的流媒体格式有RTSP,RTMP,HLS,WebRtc,这对于开发就足够。  播放HLS格式的视频  为什么要选择H...

    34037718643403771864 评论0 收藏0
  • 演示在小程序中实现excel数据的批量导入的具体代码

    演示在小程序中实现excel数据的批量导入的具体代码

      其实我们本篇文章主要讲述的就是需要将采集的数据积累下来,变成企业的数字资产。  积累数据最好的方式就是把数据存入数据库,低码工具除了有可视化编程的便利外,不仅如此还有提供了线上的文档型数据库。文档数据库相比传统数据库,文档数据库的返回结...

    34037718643403771864 评论0 收藏0
  • 详实注解原生JS以后也支持类型意义

    详实注解原生JS以后也支持类型意义

      知道吗?在布达佩斯2022 JSConf会议上,tc39(ES标准委员会)成员Gil Tayar介绍了一份当前仍处于stage 1阶段的提案 ——Type Annotations,意在让原生JS支持类型注解。  很多现在盼到了,在.ts文件将后缀改为.js后就能直接在浏览器中运行。  一份tc39...

    34037718643403771864 评论0 收藏0
  • 用实现小程序中读取腾讯文档的表格数据

    用实现小程序中读取腾讯文档的表格数据

      项目开发要考虑的实用,比如在日常生活中我们使用腾讯文档在线的收集各类数据,数据收集是比较方便,但我们也考虑到对数据进行维护或者后续统计分析还是不方便的。本文我们讲的就是具体实现:  1 创建连接器  如果希望接入腾讯文档的功能,需要创建连...

    34037718643403771864 评论0 收藏0
  • 使用JS实现点击button按钮切换图片具体代码

    使用JS实现点击button按钮切换图片具体代码

      不废话,直奔主题,使用JS实现点击button按钮切换图片,实现效果如图:  很容易实现吧,这个是用Dreamweaver写的,现在我们就用JS的一个入门案列。  其实很多时候想法与实际有差距。我们先做了一个简单的图片切换。  body部分:  <body>   <h1>...

    34037718643403771864 评论0 收藏0
  • 用javascript实现图片轮播简单版示例

    用javascript实现图片轮播简单版示例

      这篇文章简而言之就是说用javascript实现图片轮播简单效果的具体代码,直接放代码:  这里是css样式  *{   margin:0;   padding:0;   }   ul,   li{   list-style:none;   }   img{   display:block;   /*vertical-align:middle;...

    34037718643403771864 评论0 收藏0
  • 用ASP.NET实现Repeater控件的数据绑定演示

    用ASP.NET实现Repeater控件的数据绑定演示

      我们先讲讲Repeater基础。我们可以在aspx文件中融入Repeater 控件,也可以在<ItemTemplate></ItemTemplate>包含的范围融入自己的代码,当然这里也要使用到变量<%# Eval("SellerName")%>;注意两侧的引号。  .aspx:  <asp:RepeaterID="Sel...

    34037718643403771864 评论0 收藏0
  •  用js实现点击切换和自动播放的轮播图示例

     用js实现点击切换和自动播放的轮播图示例

      js实现点击切换和自动播放的轮播图,其实十分简单,话不多说,我们直接看示例:  轮播图案例  <!DOCTYPEhtml>   <html>   <head>   <metacharset="UTF-8">   <metaname="viewport"content="width=devic...

    34037718643403771864 评论0 收藏0

热门文章

<