- 博客(24)
- 资源 (1)
- 收藏
- 关注
原创 H5标签之datalist
datalist标签:是一种用来为文本输入框提供选项列表的标签。不表示任何内容,仅作展示。可用其轻松实现模糊查询的效果,减少js的编写。可以在既定的数据源中实现模糊搜索,省去filter等js代码的编写。不用编写datalist框的样式及定位,不占用页面空间。来表示控件可选值的。标签一样 可以通过包裹。"香蕉balabala"标签的id属性进行绑定。标签的list属性和。
2023-07-10 14:49:45
556
转载 --save-dev 和--save的区别
使用 npm install 安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件,分别是:npm install xxx –-save / npm i xxx -S //写入到 dependencies 对象npm install xxx –-save-dev / npm i xxx -D //写入到 devDependencies 对象devDependencies 里面的插件只用于开发环境,上线后非必需,比如:webpack,gulp等压缩打包工具、各种l
2022-01-11 17:23:41
109
原创 【vue-preview 图片预览插件】
1.安装npm i vue-preview -S2.在main.js文件中导入该组件,并挂载到Vue身上import VuePreview from 'vue-preview';Vue.use(VuePreview);3.在组件中使用它<template> <div class="thumbs"> <vue-preview :slides="thumbsList" class="imgPrev"></vue-preview&g
2021-12-22 14:52:21
1105
原创 vue-cli中配置scss
1.安装依赖cnpm i node-sass -Dcnpm i sass-loader -D2.在webpack.base.config.js中添加 //配置scss { test: /\.sass$/, loader: ['style', 'scss', 'sass'] }3.页面应用<style lang="scss" scoped></style>当前版本:“node-sass”: “^7.
2021-12-22 14:33:40
573
原创 vue使用swiper插件做垂直轮播图
1.下载安装 cnpm install swiper vue-awesome-swiper --save2.main.js:import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'import "swiper/swiper-bundle.min.css";Vue.use(VueAwesomeSwiper)//配置分页器import {Swiper as SwiperClass,Pagination} from
2021-12-22 13:55:45
2460
原创 插件 html2canvas.js和canvas2image.js实现 截图 长按保存至相册 功能
插件下载:html2canvas.jscanvas2image.jshtml:js:
2020-12-02 17:58:00
777
原创 键盘Keycode表
字母和数字键的键码值(Keycode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 ...
2019-09-17 15:28:42
280
原创 正反面图片翻转css3
主要用到的知识点是css3中transform 3D转换的rotateY(angle)转换方法,transition控制转换过程的动画。具体知识点可在菜鸟上查看学习。html: <div class="flip"> <div class="flip-box"> <a href="###" class="flip-item flip-ite...
2019-08-15 14:43:17
2300
原创 规定时间内无操作返回指定页面
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>规定时间内无操作返回首页</title> <style> html, body { width: 100%; height: 100%; } ...
2019-08-15 10:59:10
467
原创 css3自定义滚动条样式
首先申明:只在谷歌Google和360浏览器有效,其他浏览器不兼容。滚动条的属性有:**::-webkit-scrollbar{}** //滚动条整体部分,可以设置滚动条的整体宽,高,边框,背景颜色 等**::-webkit-scrollbar-button{}** //滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片和背景颜色颜色改变显示效果。**::-...
2019-07-18 14:56:22
210
原创 js实现省,市,区,门店,电话,地址多级联动
js实现省,市,区,门店,电话,地址多级联动比较常见的是省市区三级联动,多级联动的写法第一次写,是在三级联动的基础上改的,如有错误欢迎指出。思路很简单,父级下拉框改变的时候加载出子级元素,一层一层往下。如果上级改变,清空所有子级的选项,只留提示选项。效果有点像后台通过查询数据库实现联动的效果。如果需要提交数据,也可以通过后台来实现。初始状态图:选择之后效果图:居中的图片: Html部分...
2019-07-12 15:34:55
311
1
原创 使用Electron将Web页面转成exe可执行文件
1.下载并安装Node.js,下载连接https://nodejs.org/en/,选择合适自己电脑的版本,下载安装即可。检查是否安装成功:按下键盘win+R键,打开运行窗口,输入“cmd”,点击确定。输入 “node -v” ,回车,显示Node版本;再输入 “npm -v” ,回车,显示npm版本,即为安装成功。2.安装Electron环境。新建一个文件夹,打开文件夹,左上角...
2019-04-28 15:11:40
3374
原创 swiper控制页面切换
一般在希望用户执行某个操作之后,才允许页面切换的时候,会有这种需求。比如说要用户点击提交按钮之后,才能滑动到下一个slide。swiper有一个noSwiping选项,设为true时,可以在slide上(或其他元素)增加类名’swiper-no-swiping’,使该slide无法滑动。具体用法: <div class="swiper-container"> ...
2019-04-12 12:45:27
4822
原创 在swiper中添加css动画
最近碰到一个swiper项目,需求中最后一页有一个动画是手指从按钮的位置移动到右上角,动画只出现一次。第一反应就是css3写一个动画,使用swiper的回调函数OnSlideChangeEnd判断对应的页面addClass,但是发现add不进去,具体原因,暂时不知,代码如下:css:.share { width: 30px; height: 40px; position: abso...
2018-06-20 17:58:57
2937
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人