- 博客(37)
- 收藏
- 关注
RSS订阅
原创 解决vue页面刷新产生白屏
app.vue<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div></template><script>export default { provide() { return { reload: this.reload } }, data() {.
2020-06-23 16:42:32
3129
原创 自定义vue模板
设置=>用户代码片段=>vue.json{ "Print to console": { "prefix": "vue", "body": [ "<!-- ", " author：***", " page：***", "-->", "<template>", " <div class></div>", "</template>.
2020-06-23 16:39:32
246
原创 基于vue给后台发送数据形式
后台数据形式：{code：0，data : [ { id : ‘001’, name : ‘张三’ } , { id : ‘002’, name : ‘李四’ } ]，msg：‘success‘}一、get请求获取数据（不传参数）getData () { this.$http.get('/colledu/mobile/queryHzdwList').then(({ dat...
2019-12-12 10:55:13
5443
原创 简单的图片上传（基于element-ui）
1、html===》代码片段：<el-upload class="avatar-uploader" ref="upload" accept="image/jpg,image/png" :auto-upload="true" :before-upload="beforeAvatarUpload" :limit="1" action="https://jsonpl...
2019-12-12 09:54:54
197
原创 vue项目中vscode安装eslint插件和错误自动修复（vue-cli2.0创建的项目）
vue项目中vscode安装eslint插件和错误自动修复1、查看自己的vue项目中是否有eslint组件（1）是否有eslintrc.js该文件；（2）查看webpack的配置文件：package.json中是否有以下配置2.在visual studio code 中安装 eslint 插件和 vetur 插件3.以上实现的是手动代码修复，如果到后期就不方便，以下是设置自动修复代码的...
2019-11-12 17:34:45
1456
原创 安装scss以及遇到的问题
安装scss以及遇到的问题1、安装 //安装node-sass npm install node-sass --save-dev//安装sass-loader npm install sass-loader --save-dev //安装style-loadernpm install style-loader --save-dev2、配置文件1.打开：build文件夹下...
2019-11-09 10:54:28
454
原创 element-UI 合并单元格
效果图html:<el-table :data="dataList" border :span-method="spanMethod" size="mini" style="width:100%" > <el-table-column
2021-10-09 10:42:19
204
原创 解决 滑动 input标签区域 页面滑动不了的问题
window.addEventListener( "touchmove", function(e) { var target = e.target; if (target && target.tagName === "TEXTAREA") { //textarea阻止冒泡 e.stopPropagation(); } }, true );...
2021-09-26 21:46:36
614
原创 element-ui 合并单元格
html: <el-table :data="dataList" style="width: 100%;" :span-method="spanMethod" > </el-table> data:spanArr:[] methods: getSpanArr (data) { this.spanArr = [] if (data == null) { retur
2021-07-24 17:55:45
144
原创 导入的实例
父组件html: <el-button size="small" @click="importHandle" >{{ $t('import') }}</el-button > <!--导入组件--> <Import :action="action" :importUrl="importUrl" :downloadWrongUrl="downloadWrongUrl" @re
2021-07-23 15:36:49
188
原创 el-date-picker清空处理
HTML： <el-date-picker v-model="beginAndEnd" type="daterange" value-format="yyyy-MM-dd" size="mini" @input="handleDate" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" ></el-da
2021-07-23 11:12:33
5334
原创 穿梭框的用法实例
父页面<template> <div> <el-button type="danger" @click="selectStu()" >选择学生</el-button > <el-tag type="danger" style="margin-left: 10px" &g
2021-07-15 17:42:51
2014
原创 在线考试例子（vant+vue）
1.zxks.vue（考试列表）<template> <div class="zxksClass"> <!-- 导航栏 --> <comnavBar :Title="Title" :backType="'1'" @onClickLeft="onClickLeft"></comnavBar> <!-- 标签页 --> <div class="zxks_title"> <d
2021-04-15 11:51:35
3622
2
原创 elementui表单中数组循环验证必填
<el-form :model="dataForm" > <el-row v-for="(con, index) in dataForm.toolList" :key="index" > ...
2021-04-15 11:47:06
1447
原创 elementui一个表单不同情况下的验证规则
1、页面HTML：<el-form :model="dataForm" :rules="rulesList" ref="dataForm" v-loading="loading" > <!-- type = '1' 显示 --> <el-row> <el-col :span="22"> <el-form-item label="文本1"
2021-04-15 11:41:54
870
1
原创 调用企业微信扫码
1.引入import wx from ‘weixin-js-sdk’2.定义变量// 企业微信配置appId: ‘’, //企业微信的corpIDtimestamp: ‘’, //生成签名的时间戳nonceStr: ‘’, //生成签名的随机串signature: ‘’, //签名，见 附录-JS-SDK使用权限签名算法jsApiList: [‘scanQRCode’], //需要使用的JS接口列表，凡是要调用的接口都需要传进来3.方法// 扫码 smFun () {
2021-04-15 11:31:19
1164
原创 vant:解决下拉刷新和滚动的冲突（手机端）
html:<div class="gzrwClass"> <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <div class="gzrw_scroll"> <div v-for="(item, index) in dataList" :key="index" > ~~~~~~
2021-03-10 16:11:58
2449
原创 左右定时滑动轮播图
<el-card style="margin-bottom:20px;min-height:240px;max-height:245px;"> <div class="newBannerBox"> <i class="el-icon-arrow-left" @click="prev"></i> <div class="swiperBox"> <swiper ref="mySwi.
2021-02-22 14:03:45
147
原创 vue-cli 2.0运行报错
错误原因：1、端口号已被占用解决方法：npm install之后，运行 npm i -D webpack-dev-server@2.9.7 然后重新启动就可以了2、ip地址不对解决方法：将所设置的代理IP修改为 自己的本机IP就行了！
2021-02-22 10:27:58
150
原创 新闻列表
<template> <div class="com_newsList"> <div class="com_newsList_list" v-for="(item, index) in newsList " :key="index"> <div :class="!item.src?'com_newsList_leftNoImg':'com_newsList_left'"> <div class="com_newsL
2020-07-02 16:47:57
679
原创 垂直滚动的公告
<template> <div class="com_notice"> <ul id="con1" ref="con1" :class="{anim:animate==true}"> <li v-for="(item,index) in items" :key="index">{{item.name}}</li> </ul> </div></template> <s
2020-07-02 16:45:56
244
原创 轮播图带字(vant)
html <div class="com_swiperImg"> <van-swipe :autoplay="3000"> <van-swipe-item v-for="(item, index) in images" :key="index"> <img class="swiperImg" :src="item.url"> <span class="imgWord"> .
2020-07-02 14:51:23
1669
原创 在线考试倒计时
1.定义时间变量// 当前考试的时长times: '',// 剩余时间Time: '',// 考试总时长totalTime: '',2.created() // 获取当前考试时间 this.times = this.$route.query.time // 赋值给总时长 this.totalTime = this.times * 603.mounted()// 赋值给考试时长 this.times = this.times * 60 this.ti.
2020-06-30 15:29:53
623
原创 配置子路由
1.单独路由界面（例如：router/other.js）export default [ // 登录页面 { path: "/", name: "login", component: () => import("@/views/login"), meta: { title: "登录" } }, // 首页 { path: "/home", name: "home", component: () =>
2020-06-24 15:15:41
410
原创 vant自动按需引入
1.安装vantnpm i vant -S2.babel.config配置module.exports = { // 自动按需引入 Vant 组件 plugins: [ [ "import", { libraryName: "vant", libraryDirectory: "es", style: true }, "vant" ] ]};3.新建一个文件（按需引入的文件,例如：sec=>components=>va
2020-06-24 12:23:50
857
原创 上传图片（原生）
html <button type="button" @click="F_Open_dialog()" >上传图片</button> <input type="file" id="fileId" ref="refFile" value="文件上传" @change="handleFile()" >显示上传的图片<!-- 自己上传显示的图片 --> &l.
2020-06-23 18:22:20
156
原创 多选题（公共组件）（原生）
子组件html<div class="commentRadio"> <div v-for="(con,i) in Obj.tmList" :key="i+'r'" class="inputClass"> <input :id="con.id" type="checkbox" :value="con.id" v-model="checklist"
2020-06-23 17:30:40
177
原创 单选题（公共组件）（原生）
html<div class="commentRadio"> <div v-for="(item,index) in Obj.tmList" :key="index" class="inputClass"> <input :id="item.id" type="radio" :disabled="true" :value="item.id" :c.
2020-06-23 17:24:24
143
原创 可移动的按钮
html<template> <div class="btnDiv" ref="moveBtn" @mousedown="down()" @touchstart="down()" @mousemove="move()" @touchmove="move()" @mouseup="end()" @touchend="end()" @touchcancel="end()" > <!-- 按.
2020-06-23 17:10:46
260
原创 超过省略号显示
css ：（超过 一行 省略） width:100%; white-space: nowrap; /*规定段落中的文本不进行换行*/ overflow: hidden; /*内容会被修剪，并且其余内容是不可见的。*/ text-overflow: ellipsis; /*显示省略号来代表被修剪的文本*/css： （超过 多行 省略） width:100%; overflow: hidden; text-overflow: ellipsis; display: -w.
2020-06-23 17:04:07
112
原创 表格固定头部，tbody滚动
html<table class="table" cellspacing="0" cellpadding="0"> <thead class="fixedThead"> <th>学号</th> <th>姓名</th> <th>年龄</th> </thead> <tbody class="scrollTbody">.
2020-06-23 16:57:37
144
原创 mt-cell和mt-actionsheet的结合使用（基于mint-ui）
仅限于值比较少的情况，如果点击想显示的列比较多，就用我的另一篇博客中写的（mt-cell结合mt-popup和mt-picker的使用）html代码片段：<mt-cell title="性别" is-link :value="sexVal" @click.native="sexClick()"></mt-cell><mt-actionsheet cancel...
2019-12-16 09:38:47
1862
原创 mt-cell搭配mt-popup和mt-picker的结合使用（基于mint-ui）
html代码片段： <mt-cell style="border:1px dotted red;border-radius:5px;width:80vw;margin-left:12vw" title="企业" is-link :value="qiyeVal" @click.nat...
2019-12-16 09:24:06
856
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人