- 博客(48)
- 收藏
- 关注
RSS订阅原创 css 超出部分省略号显示
多行文本省略号显示 /*多行文本省略号显示*/ text-align: justify;/*文字右侧对其*/ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /* autoprefixer: off */ -webkit-box-orient:vertical; /* a
2021-04-06 16:48:57
224
原创 el-table 记住选中状态
el-table 换页保持选中<el-table :row-key="(row) => row.id" ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" > <el-table-column type="selection" :reserve-selection="true"> </
2021-03-30 11:53:11
968
原创 vue-cli3使用百度富文本编辑器
一、安装依赖npm i vue-ueditor-wrap# 或者 yarn add vue-ueditor-wrap二、下载ueditor并将其复制到Static目录下 如图所示：三、引入VueUeditorWrap组件import VueUeditorWrap from 'vue-ueditor-wrap' // 引入富文本组件components: { VueUeditorWrap}四、实例化、v-model绑定数据 <VueUeditorWrap v-model="
2020-12-30 16:26:49
1344
原创 js实现打印功能
function PdfPrintDiv() { //隐藏不想打印的部分 document.getElementById("id").style.display="none"; //实现打印 let bdhtml = window.document.body.innerHTML; //将dom元素转化为html let sprnstr = "<!--startprint-->"; let eprnstr = "<!--endprint--&
2020-12-16 16:11:47
388
原创 vue-cli3项目启动、打包批处理以及启动服务自动打开浏览器配置
前端项目启动和打包需要输入命令执行，可以使用批处理文件点击批处理文件就可执行命令，批处理文件是无格式的文本文件，它包含一条或多条命令。它的文件扩展名为 .bat 或 .cmd一：项目打包批处理文件1，在前端项目最外层见打包批处理文件build.bat2，在build.bat文件里面输入命令npm run build3，双击此文件即可自动打包，启动命令也可以按照打包.bat文件进行处理二：启动服务自动打开浏览器配置1，找到package.json文件2，找到配置项‘scripts’3，找
2020-09-04 10:25:46
1130
原创 css3 flex 详解,实现div内容水平垂直居中
flex一系列属性：一、flex-direction: （元素排列方向）※ flex-direction:row （横向从左到右排列==左对齐） ※ flex-direction:row-reverse （与row 相反） ※ flex-direction:column （从上往下排列==顶对齐） ※ flex-direction:column-reverse （与column 相反） 二、flex-wrap: （内容一行容不下的时候才有效）
2020-07-25 15:23:30
247
原创 vue后端返回路由表来进行权限管理，加载指定路由结构，不包含则不加载
创建vue项目，配置环境变量，后续需要用到。这里只配置生产环境和开发环境。一、项目根目录创建 .env.production 文件NODE_ENV=productionVUE_APP_URL=http://456.com二、项目根目录创建 .env.development 文件NODE_ENV=developmentVUE_APP_URL=http://123.comsrc目录下创建router文件夹，index文件中的内容为import Vue from 'vue'impor
2020-07-25 15:03:13
1366
原创 vue集成汉字转拼音并提取首字母
此方法是利用汉字和Unicode编码对应找到相应字母一、编写汉字和编码文件对应的js； pyconst.js export const pinyin = { 'a': '\u554a\u963f\u9515', 'ai': '\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9...
2020-02-20 11:05:05
8206
3
原创 Vue 的身份证 手机号码 电话号码 邮箱等校验
一、编写汉字和编码文件对应的js； pyconst.js export const pinyin = { 'a': '\u554a\u963f\u9515', 'ai': '\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9698\u8bf6\u6371\u55f3\u55cc...
2020-02-20 10:56:27
545
原创 vue登录页+验证码+MD5加密
一，验证码功能1，创建一个组件。显示验证码图片<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><...
2020-01-09 15:13:51
1366
1
原创 vuex中存储和获取后台数据
例，登录接口存储后台返回的数据1，定义登录接口函数2，在vuex的actions中定义函数import { login } from "../../api/login"const actions = { getLogin({ commit }, userInfo) { const { username, password } = userInfo return ne...
2019-12-30 11:37:34
2921
原创 vue限制输入框只能输数字且限制长度
<el-input maxlength="2" v-model="scope.row.score" placeholder="评分" @blur="inputBlur" @keyup.native="scope.r...
2019-11-22 14:22:39
3750
原创 vue table表格新增添加一行数据
表格样式并不能是难点 主要是点击新增按钮和删除按钮自增的编号的修改 <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#3d80f2',color:'#fff',fontSize:'16px',height:'55px'...
2019-11-21 10:11:52
18893
原创 vue 在线答题功能
在线答题功能<!-- 考试 --> <div class="examination"> <ul v-for="(item,i) in examinationData" :key="i"> <div>{{i+1}}、{{item.question}}</div> <...
2019-11-21 10:01:06
5345
5
原创 element table表格点击单元格实现编辑
<el-table :data="dataDetail.judgmentLetterDets" :row-class-name="tableRowClassName" border style="width: 100%" max-height="500px" @cell-click="tabCl...
2019-11-13 18:00:05
5965
1
原创 vue 动态多级导航菜单
1，创建vue的左侧导航栏组件<template> <div> <!-- 根据实际情况做修改 --> <el-menu-item v-for="(item,index) in navlist" :key="index" v-if="item.adminMenu.menuType =='page'"...
2019-11-12 13:41:38
3067
原创 vue中 js-cookie安装使用
一、安装npm install js-cookie --save二、引用import Cookies from 'js-cookie'三、一般使用1，存入// Create a cookie, valid across the entire site:Cookies.set('name', 'value');// Create a cookie that expires ...
2019-11-06 09:15:20
4600
1
原创 Vue、Element-ui项目中使用Iconfont(阿里图标库)
阿里图标库地址：https://www.iconfont.cn方法一，阿里文档地址https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code方法二：引用1， 先注册，再登录、找到图标管理、我的项目2，创建项目3， 创建项目1）、FontClass/Symb...
2019-10-25 15:53:30
495
原创 vue.js中vuex的详解配置及模块化使用
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:首先要安装、使用 vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vuex ...
2019-06-12 17:01:02
1492
原创 vue项目刷新当前页面(三种方法)总结
1、最直接整个页面重新刷新：location. reload()this.$router.go(0)2，新建一个空白页面supplierAllBack.vue，点击确定的时候先跳转到这个空白页，然后再立马跳转回来空白页supplierAllBack.vue里面的内容：3、provide / inject 组合 方式是我试过最实用的，下面用项目截图给大家说明下：首先，要修改下你的a...
2019-06-10 10:38:44
882
原创 vue-quill-editor富文本编辑器使用及配置更改
quill-editor支持了常用的功能，但是有2点，需要我们自己定制一下。vue集成quill-editor很简单，网上有很多介绍，自行百度下即可。1，图片上传：因为编辑器默认是将图片转成base64存储的，而我们实际开发需要将图片存在自己的服务器中。2，中文汉化：编辑器默认都是英文展示的，在网上也找到了替换成中文的方法。但是太过于繁琐，因为这种方式是重写整个toolbar的div。实际上，...
2019-06-09 17:04:35
9080
2
原创 vue路由带参跳转页面不刷新(两种方法)总结
路由参数变化但是页面没有刷新这是Vue的组件复用的默认处理方式解决办法：一：不想复用的话，就在父组件的router-view上加个key（不推荐使用）<router-view :key="new Date().getTime()"></router-view>但是vue为了提高性能不建议每次跳转都刷新组件二：添加路由监听，路由改变时执行监听方法（推荐）meth...
2019-05-30 11:40:12
3823
3
原创 element-ui date-picker日期格式化(三种方法)总结
一，日期格式为yyyy-mm-dd1，项目中需要的日期格式为yyyy-mm-dd，但是我们在使用的element-ui的 日期选择器后默认的时间格式为Fri Sep 07 2018 00:00:00 GMT+0800 (中国标准时间)2，datepicker中添加一句value-format=”yyyy-MM-dd” 即可<el-date-picker type="date" v-...
2019-05-21 11:12:03
42775
2
原创 vue封装axios及axios模块化使用
1，首先在根目录下新建文件夹utils,然后新建文件request.js2，在 request.js中统一处理axios请求import axios from 'axios'import { MessageBox, Message } from 'element-ui'//创建一个axios实例const service = axios.create({ baseURL: p...
2019-05-17 11:37:31
989
原创 VUE 生成二维码插件
qrcodejs21，安装 qrcodejs2 （注意：安装的是qrcodejs2，不要安装qrcode —> 会报错）npm install qrcodejs2 --save2，页面中引入<script> import QRCode from "qrcodejs2" export default { data...
2019-05-16 17:30:13
1047
原创 vue不通过路由直接获取地址栏url中参数
前言众所周知vue中使用路由的方式设置url参数，但是这种方式必须要在路径中附带参数，而且这个参数是需要在vue的路由中提前设置好的。相对来说，在某些情况下直接在url后面拼接？mid=100的方式传递参数更灵活，你不需要设置路由，只需要在url后拼接参数即可，但是这种方式就需要通过javascript获取并提取url中的参数，通过传统的方式直接在页面中获取是行不通的了，因为vue中是无法通过...
2019-05-16 12:23:54
3341
原创 【VUE】一个简单常用的proxyTable配置
// 配置改动后需要重启生效 （运行npm run dev）proxyTable: { // 所有 /api请求的路由会走这个代理 '/api': { changeOrigin: true, //跨域 target: 'http://172.16.0.107:1338' }, // 所有 /ywapi请求的路由会走这个代理 '/ywapi': { ...
2019-04-29 11:16:43
10399
6
原创 css img自适应盒子尺寸
.img-cantainer { position: relative; width: 260px; height: 150px; overflow: hidden; img { position: absolute; top: 50%; min-...
2019-04-24 11:42:59
12631
原创 js验证身份证号是否合法
function IDCardCheck(num) { num = num.toUpperCase(); //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。 if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) { alert('输入的身份证号...
2019-04-19 16:50:25
3569
原创 NodeJs/Vue项目中对process.env的使用
NODE_ENV获取环境变量在webpack 打包的项目/Node JS项目中，可以安装 cross-env(跨Win/Linux平台设置 process.env值) 插件，在 package.json 文件中设置不同的运行脚本，比如：根据上述脚本即可设置不同的 NODE_ENV 值，在文件中设置值或者加载不同的设置文件，以上配置在NODE项目中可正常运行Vue项目中使用在使用Vue...
2019-04-09 11:25:52
2632
原创 vue-cli3搭建及vue.config.js配置(配置文件完整且不报错)
如果你已经安装了vue 2.9.6 的话，则需要先将其删除指令为：npm uninstall -g vue-cli第二步：更新Vue-cli 指令：npm install -g @vue/cli 或 cnpm install -g @vue/cli 或 yarn global add @vue/cli第三步：安装之后，记得查看版本号：查看版本（是否安装成功）：vue -V (大写的V)...
2019-04-03 15:09:39
14725
2
原创 css flex换行且均匀分布
ul { display: flex; justify-content: space-between;//两端对齐，项目之间的间隔都相等。 flex-wrap: wrap;//换行且第一行在上方 width: 700px; background: red; ...
2019-04-01 15:50:47
7621
原创 async/await的基础用法
一、async/await的优点1）方便级联调用：即调用依次发生的场景；2）同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；3）多个参数传递： Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的...
2019-03-08 10:54:58
451
原创 Vuex requires a Promise polyfill in this browser
在使用Vuex时，使用ie浏览器会出现“Vuex requires a Promise polyfill in this browser”的错误提示，这是因为使用了ES6 Promise,而IE浏览器不支持，解决方案如下：1.安装babel-polyfillnpm install --save babel-polyfill2，然后去到main.js引入import 'babel-poly...
2018-12-07 14:54:19
291
原创 vue-cli2 需要引入的插件集合
Vue中引入less1，首先安装less与less-loadernpm install less less-loader2，其次配置loader。在base.config.js中新增rules{ test: /\.less$/, loader: &amp;quot;style-loader!css-loader!less-loader&amp;quot;, },3，再次使用：...
2018-12-03 15:48:52
369
原创 vue2.0脚手架搭建教程
一、那么我们就从最简单的环境搭建开始：1，安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版...
2018-12-03 15:20:44
359
原创 vue-cli创建的项目部署在相对路径
如果静态文件不是部署在网站根目录下，vue-cli将给你造成巨大的麻烦。你不能直接把build好的文件抛进一个目录。你不能直接在本地打开用vue做好的静态网站。改成相对路径，主要需要做两步。1、修改config =&gt; index.js =&gt; build =&gt; assetsPublicPath 中的’/‘成为’./’2、在build =&gt; util.js 里找到E...
2018-12-03 15:04:37
479
原创 vscode vue 插件
BeautifyVueHelperVetur —— 语法高亮、智能感知、Emmet等包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）EsLint —— 语法纠错Auto Close Tag —— 自动闭合HTML/XML标签Auto Rename Tag —— 自动完成另一侧标签的同步修改...
2018-11-29 10:56:36
3660
原创 Vue 实现文件下载
功能：点击导出按钮，提交请求，下载excel文件；第一步：跟后端确认交付的接口的response header设置了response header以及返回了文件流。第二步：修改axios请求的responseType为blob，以post请求为例：axios({ method: 'post', url: 'api/user/', data: { f...
2018-11-29 10:33:36
6809
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人