- 博客(30)
- 收藏
- 关注
RSS订阅原创 使用es6的class类进行模块化封装toast
1.css部分/* 弹框 */.npm-com-toast { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: table; z-index: 100; line-height: 1;}.npm-com-toast .mask { display: table-cell; vertical-align: middle; text-align: center;..
2022-01-21 16:42:16
969
1
原创 vue2.0 toast组件开发以及全局引入
1.在Vue里引入toast提示组件效果2.重要代码片段（1）html<div class="npm-com-toast" v-show="isShow" @click="close"> <div class="mask"> <div class="box" @click.stop> <div class="html" v-html="msg"></div> </div>.
2022-01-12 16:57:03
1187
原创 nodejs学习-通过命令创建新模板
1.首先安装node，查看node版本node -V2.查看npm的版本npm -V3.创建模板文件，里面是自己需要的文件，这里是在vue项目中添加的功能，如图4.重要代码写在nodeCreate.js 中（1）需要先安装对应的依赖// gulpjs是一个前端构建工具,而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。npm install gulp -S // 文件重命名npm install gulp-rename -S
2021-11-05 11:01:03
863
原创 react+webpack+typescript简单项目搭建
1.创建项目名称，在这里创建文件，my-react;初始化项目npm init -y2.安装依赖：webpacknpm i webpack webpack-cli -D创建webpack.config.js文件：const path = require('path');module.exports = { entry: "./src/index.tsx", output: { path: path.join(__dirname, '/dist'), f
2021-11-01 17:32:23
966
原创 vue日期组件
<template> <div class="com-date"> <div id="calendar" :class="className"> <!-- 年份 月份 --> <div class="month"> <ul> <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) --> <li class="arrow".
2021-10-26 10:41:50
2374
原创 vue3.0+vite+ts+scss项目搭建
1.使用vite搭建Vue3.0npm install -g create-vite-appcreate-vite-app vue3-vitecd vue3-vitenpm installnpm run dev# 或者使用yarn（首选yarn）yarn add -g create-vite-appyarn create vite-app <project-name>2.安装依赖yarn3.启动项目yarn dev或npx vite4.引入t
2021-10-26 10:26:01
2271
原创 css实现图文混排，超过几行省略
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.
2021-10-15 11:23:24
283
原创 实现swiper
Vue 自己实现swiper, 只实现了swiper部分功能；解决了循环loop时，绑定事件绑定不上的问题，不过有些取巧，后期继续更改；1.html<div id="slider"> <ul class="swiper-item-container"> <li class="swiper-item"><img src="./images/1.jpg" /></li> <li class="swiper-item
2021-03-31 15:21:10
529
原创 关于vue的视频上传
vue的视频上传之前用点击上传好好的，但是后来后台接口调整就出现问题了，最后网上找了一圈找到了解决办法1.html代码 <form id="myForm" enctype="multipart/form-data" name="fi...
2019-06-19 15:29:20
13206
4
原创 vue中的图片上传
就是给自己留个参照，有什么不合理的地方请大家指出来，然后调整1.效果展示2.html相关的代码展示 <div class="form-list"> <label class="label-one">商品图片</label> <div class="add-pic...
2019-06-19 15:22:13
456
原创 解决ios软键盘输入框被遮挡问题
$('.popcomment').children('input[type="text"]').focus(); var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 ...
2018-12-07 11:31:12
2028
原创 jquery选项卡点击且能滑动特效
<style> *{margin:0;padding:0;} li{list-style: none} #centent{ width:100%; height:100%; } .tab{ width:100%; overflow: hidden; } .tab ul li{ width:50%; float:left; height:40p...
2018-11-27 11:22:46
791
原创 vue首页引用导航组件
<!-- 首页页面 --><div id="app"> <div id="container"> <Shouye index="0"></Shouye> </div></div><script>i
2018-11-27 10:53:30
1190
原创 vue的选项卡
<div id="app"> <!-- 第一种情况 --> <div id="container"> <div class="contHead"> <ul> <li v-for="(item,index) in head" :cla
2018-11-27 10:02:29
350
原创 jquery遍历节点的方法
jquery遍历节点方法总结:后代遍历children()方法返回被选元素的所有直接子元素。find()方法返回被选元素的后代元素，一路向下直到最后一个后代。祖先遍历parent()方法返回被选元素的直接父元素。parents()方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。同胞遍历siblings()...
2018-11-08 18:05:20
3438
原创 css左边容器固定宽度，右边自适应的几种效果
内容代码如下：<div class="container"> <div class="left"></div> <div class="right"></div></div>第一种： .left { float: l
2018-11-01 15:59:53
4892
原创 h5中css不给固定宽度而使得文本内容居中的效果
.mypages{width:80%;height:30px;margin:20px auto;background-color:pink;position:relative;}/*主要内容给行内块元素*/.mypages ul{width:auto;display:inline-block;position: absolute;left:50%;top:5px;tr...
2018-11-01 15:31:28
1157
原创 h5页面滚动视差效果
<section class="g-word">Header</section> <section class="g-img1">IMG1</section> <section class="g-word">Content1</section> &a
2018-10-29 17:56:02
1436
原创 页面视频播放完不显示最后一帧而回到播放前原始的样式
<div class="breaking"> <video id="myvideo"> <source src="xiangguandeshipin.mp4" type="video/mp4"> </video>
2018-10-29 14:54:43
4027
原创 vue滑动取消收藏效果
<div id="app"> <div class="container"> <ul> <li class="list-item " v-for="(item,index) in tableData " data-type="0" id="list-item"> <div class="list-bo...
2018-10-26 11:30:33
724
1
原创 vue上选项卡点击切换且能滑动切换
前言：必须引入swiper的css与js <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabC...
2018-09-18 15:30:19
11999
9
原创 运用jquery时需注意this的使用
jquery点击事件，当点击当前标签时获取不到当前this下的所有属性,此时需注意this的使用。例如：<div onclick="show(this)" pid="123">点击事件</div><script>function show(obj){//alert($(obj).attr("pid"));alert(obj.getAttribu..
2018-09-13 12:09:56
619
原创 多个图片累加上传
<!--图片上传--> <div class="z_photo"> <div class="z_file"> <input type="file" name="file" id="file" value="" accept="image/*
2018-08-27 15:06:04
410
原创 五星好评的效果
<div class="order-list-Below"> <h1>商品评价</h1> <ul> <li></li> <li></li>
2018-08-27 14:54:41
194
原创 点赞变换样式的特效
<p> <span class="praise"><img class="praise-pic" src="static/images/graypraise.png" alt=""></span> &am
2018-08-27 14:34:00
1372
原创 移动端类似于微信朋友圈的图片浏览器
.villagerInfo { height: 5.0rem; padding:0.5rem;}.villagerInfo ul li { float: left; width: 100%; height: 100%; }/* 发布的内容及图片 */.introduction { margin: 0.75rem auto; ...
2018-08-27 14:20:42
941
转载 单多行省略号的样式写法
单行文本text{overflow:hidden; //超出一行文字自动隐藏text-overflow:ellipsis;//文字隐藏后添加省略号white-space:nowrap; //强制不换行}多行文本text{ display: -webkit-box; word-break: break-all; text-overflow: ell...
2018-08-06 16:39:50
721
原创 原生和jquery的弹框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品订单</title> <script src="jquery-3.3.1.min.js">&
2018-07-29 23:11:14
923
原创 移动端购物车
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-sc...
2018-07-29 23:07:12
1363
原创 上传图片后显示图片的js例子
<div id="pic_wrap"> <input id="file" class="file_hide" name="licence" type="file" onchange="fileshow(this)"> <label id="ch
2018-07-27 18:24:58
1142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人