- 博客(68)
- 收藏
- 关注
RSS订阅原创 vue 监听数值的变化，并捕捉到
上传头像的例子是完整的，登录没全部展示1. 封装全局监听方法：在main.js中给引入watchsessionStorage（可以放多个函数）。约定监听的sessionStorage的值为"dialogLogin"，“avatarUrl”，然后创建StorageEvent方法，当执行sessionStorage.setItem(k, val) 时，初始化事件，并派发事件//用于登录判断是否有tokenexport function resetSetItem(key, newVal) { if
2022-04-19 15:21:15
1823
1
原创 vue 项目引入 字体文件
亲测无误，不会报错第一步第二步/* 引入字体 */@font-face { font-family: 'FZCHYJW'; src: url('FZCHYJW.ttf'); font-weight: normal; font-style: normal;}@import "./font.css";使用font-family: 'FZCHYJW';效果图...
2022-04-11 14:37:02
395
原创 css3 图片旋转
关键代码//数值越大，转速越缓慢（30s） animation: rotate 30s linear infinite; @keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(90deg); } 50% { -webkit-transform: rotate(180deg); } 75% { -webk
2022-04-11 14:06:51
1401
原创 vue 答题（单选，多选，判断）
这里是后台处理得计分，前台这是渲染题目，以及回显用户答得题答题后台数据格式 <ul> <li v-for="(i, index1) in arrlist.pqList" :key="index1"> <h3> <span>{{ index1 + 1 }}、</span> <div class="newtuexam_box">
2022-04-09 17:50:24
7495
原创 vue el-radio和 el-checkbox样式修改
el-radio /deep/ .el-radio { margin-bottom: 15px; } /deep/ .el-radio__inner:hover { border-color: #ffdc82; } /deep/ .el-radio__label { color: #ffdc82; font-size: 20px; } /deep/ .el-rad
2022-04-08 15:00:22
2630
原创 css3 文字竖着排列，且有间距
writing-mode:horizontal-tb;//默认：水平方向，从上到下 writing-mode:vertical-rl; //垂直方向，从右向左writing-mode:vertical-lr; //垂直方向，从左向右letter-spacing来设置字与字间距_字符间距离，字体间距css样式text-indent设置抬头距离css缩进 i { writing-mode: vertical-rl; margin-top: 48px;
2022-04-08 10:39:48
1762
原创 css奇怪布局（一）
css 奇怪布局（思路）记录日常布局这个布局时有一个底部背景图，不能遮挡li标签。这边做了.newtustudy（父亲） 相对定位。.newtustudy_bg 线条背景图绝对定位在底部， z-index: 0;ul { padding-bottom: 1200px;} 1200px是 .newtustudy_bg的高度。最后一个li标签绝对定位，且 z-index: 1；<template> <div class="newtustudy">
2022-04-07 11:58:51
390
原创 Vue禁止自动填充浏览器用户名密码
readonly onfocus="this.removeAttribute('readonly')"<el-input readonly onfocus="this.removeAttribute('readonly')" type="password" v-model="passForm.newPassword" show-password placeholder="请输入密码" @input="$forceUpdate.
2022-03-30 16:02:23
2356
原创 el-upload在列表里使用
el-upload 数组得新增删除 <el-upload ref="upload" :action="uploads.url + '?baseDir=' + uploads.baseDir" :headers="uploads.headers" :on-success=" handleUploadSuccess2.bind(null, { index: i, data: ite
2022-03-18 16:39:30
648
原创 pc端检测本地电脑是否安装某应用，安装则打开反之则下载（vue 脚手架3）
vue使用protocolCheck需要全局引入**在需要得页面使用这个方法我的需求是1.电脑未下载，调用后台拿到路径用window.href下载到本地2 电脑已下载，弹出浏览器自带得框** window.protocolCheck( 'u3d://', (fail) => { console.log('fail', fail) // 没有安装 弹窗显示 引导去下载
2022-03-14 17:45:59
3677
7
原创 css 毛玻璃
<main> <p>IOS版下载</p> </main> main { position: absolute; top: 584px; left: 300px; width: 225px; height: 200px; line-height: 2; border-radius: 20px; background: rgba(255, 255, 255, 0.05); backdrop-fi.
2022-03-08 17:58:41
236
原创 解决 element 输入框无法输入问题
强制刷新@input="$forceUpdate()"<el-input v-model="passForm.passworda" @input="$forceUpdate()" placeholder="请输入密码"></el-input><el-select v-model="addForm.deptMajorId" @change="getaddSelect4" @input="$forceUpdate()"placeholder="请选择专业名称">
2022-03-08 10:43:37
1118
原创 el-input的rules验证
<el-form :model="registerForm" :rules="registerrules" ref="registerForm" > <el-form-item prop="mobile"> <el-input v-model.number...
2022-01-06 10:59:52
5783
原创 vue 监听sessionStorage存值的变化
在main.js进行路由监听，点击其他页面如果是未登录得状态，弹出登录页面main.jsimport { resetSetItem} from "@/utils/watchsessionStorage";//路由拦截router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 // console.log(to.meta.requireAuth); // conso
2022-01-05 15:24:24
2019
原创 vue 实现导出文件
安装 npm install file-saver --save建立exportFile.js在utilsimport FileSaver from "file-saver";export default class fileSave { /** * 导出Excel文件 * @param {*} res 文件流 * @param {*} name 文件名 */ static getExcel(res, name) { le
2021-12-22 13:58:08
732
原创 vue 使用百度地图（全景图）
安装 vue-baidu-map vue-jsonp第一步npm install vue-baidu-map --savemain.jsimport BaiduMap from 'vue-baidu-map'// 百度地图 Vue.use(BaiduMap, { ak: '' // 自己的百度地图ak})第二步 <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
2021-12-15 14:24:19
2303
2
原创 vue 根据楼层数为7，生成一个7条数据的表格
原型图当用户输入楼层数，出现对应数量数组 getinput() { this.num = Number(this.formone.floorA); this.arrlist = []; for (var i = 0; i < this.num; i++) { this.arrlist.push({ layer: i + 1, houseld: 0, share: 0,
2021-11-20 16:04:56
548
原创 日期，Wed Nov 24 2021 08:00:00 GMT+0800 (GMT+08:00) 相互转换
将 Wed Nov 24 2021 08:00:00 GMT+0800 (GMT+08:00) 转换成日期格式 getTime (time) { var date = new Date(time) var y = date.getFullYear() var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) var d = (dat
2021-11-16 14:31:18
2731
原创 formdata 传数组的参数
let formDate = new FormData();formDate.append(("file", file);for(let i=0;i<list.length;i++){ formDate.append('list',list[i]) }}
2021-11-16 13:43:12
808
原创 css margin：auto； 失效原因
1.要给居中的元素一个宽度，否者无效。2.该元素一定不能浮动，否者无效。3 在HTML中使用标签，需考虑好整体构架，否者全部元素都会居中的。4.display：table－celldisplay:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。5.行内元素失效解决方法：设置display:block；我遇到的是el-button的display:inline-block;改成display:block；就好了...
2021-09-23 16:06:11
473
原创 vue使用vue-seamless-scroll插件 实现无缝滚动（上，下，左，右）
安装 vue-seamless-scrollcnpm install vue-seamless-scroll --save 引用<vue-seamless-scroll></vue-seamless-scroll>import vueSeamlessScroll from 'vue-seamless-scroll' components: { vueSeamlessScroll}, 官方文档https://chenxuan1993.gi.
2021-09-23 10:06:13
539
原创 禁止浏览器拖拽页面的图片
<body ondragstart="return false"></body> // 在页面的body上加上这行代码 ondragstart="return false//（vue项目直接在index.html 的body加上这行代码即可.html页面需要在每个页面加上）
2021-09-18 15:32:17
900
原创 jq 导航吸顶
注意html,body不要设置height:100%,window.addEventListener会不生效header_topb 是你要吸顶的页面//导航吸顶window.addEventListener('scroll', function () { console.log('11'); let t = $('body, html').scrollTop(); // 目前监听的是整个body的滚动条距离 console.log(t); if (t > 0) { $('.hea
2021-09-18 15:26:37
107
原创 bootstrap中input输入框限制
输入中文、数字、英文:<input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">输入数字和字母：<input onKeyUp="value=value.replace(/[\W]/g,'')">输入大小写字母、数字、下划线：<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');">只能输入英文字母
2021-09-16 10:27:38
1829
原创 jq实现横向轮播（多张图，一个一个切换）
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>显示多张图片的轮播</title> <style type="text/css"> html,body{ padding:0; margin:10px auto; } #warpper{ width:1120px;/*一列展示几个的
2021-09-14 17:12:59
1038
2
原创 vue 防淘宝的放大镜效果和横向轮播
第一部分（简单使用）安装 cnpm install vue-piczoom --save使用 vue-piczoom<template> <div> <div class="box"> <pic-zoom :url="imgurl" :scale="3"></pic-zoom> </div> <div class="list"> <ul>
2021-09-06 17:27:46
312
原创 three html 引入本地fbx模型
<!DOCTYPE html><html lang="en"><head> <title>2-1three.js FBX loader</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.
2021-09-01 17:36:23
1240
1
原创 小程序实现简单选项卡
wxml<!-- 选项卡 --><view class="tabs"> <view class="tabs_title"> <view wx:for="{{tabs}}" wx:key="id" class="title_item {{currentindex == index? 'active':''}} " bindtap="handleItemtap" data-index='{{index}}'>
2021-07-09 15:29:31
341
原创 小程序的父传子，子传父
properties: { //要接收的数据的名称 aaa:{ // type 要接受的数据的类型 type:String, value:'' } },<view>{{aaa}}</view><tabs aaa='123'></tabs>
2021-07-09 14:30:37
171
原创 element 使用回到顶部
<template> <div class="content"> <!-- 绑定content盒子 --> <el-backtop target=".content" :bottom="100"> <div>UP</div> </el-backtop> </div></template>.content { height: 1000px;
2021-05-06 15:51:58
310
原创 vue实现展开收缩内容
<template> <div class="contentweb"> <div class="type"> <span class="type_a">类型:</span> <div class="type_b"> <span class="type_bs" v-for="(item, index) in testList"
2021-04-09 10:22:08
641
原创 sessionStorage的用法
普通用法sessionStorage.setItem('demo','11');var demo=sessionStorage.getItem('demo');数组的用法sessionStorage.setItem('teacheruser', JSON.stringify(result.data.object));var teacheruser=JSON.parse(sessionStorage.getItem('teacheruser'));
2021-03-30 15:20:03
1062
原创 vue 数组对象排序
<div id="app"> <ul> <li v-for="(stu,index) in students1">{{stu}}</li> </ul> </div> data:{ students:[ {nam
2020-12-25 14:19:55
419
原创 前端使用阿里云图标库
第一步第二步第三步第四步（点击下载本地，会出现一个文件夹，把他压缩到你的文件夹里）第五步cnpm install css-loader --save第六步在main.js引入import "./assets/icon/fonts/iconfont.css"第七步点击demo_index.html会出现使用<span class="iconfont icon-xxx"></span>...
2020-12-20 14:36:00
272
原创 修改element 的el-radio的选中样式变成对勾
我这个是在全局改的，在app.vue页面（用了深度选择器）#app /deep/ .el-radio__input.is-checked .el-radio__inner::after { content: ''; width: 10px; height: 5px; border: 2px solid white; border-top: transparent; border-right: transparent; text-align: cent
2020-12-03 18:28:33
3328
原创 CSS @media 媒体查询PC端
@media (min-width: 1280px) {} @media screen and(min-width: 1366px) {}@media screen and(min-width: 1440px) {} @media screen and(min-width: 1680px) {} @media screen and(min-width: 1920px) {}
2020-11-25 16:52:39
429
原创 禁止平板放大缩小，双击放大缩小
双击放大缩小<script>window.onload=function () { document.addEventListener('touchstart',function (event) { if(event.touches.length>1){ event.preventDefault(); } }) var la
2020-11-24 10:19:06
299
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人