VUE
橙子微笑
这个作者很懒,什么都没留下…
展开
-
el-input输入框限制最大长度为10位且为非负数
el-input输入框限制最大长度原创 2022-12-09 10:12:56 · 2113 阅读 · 1 评论 -
文本内容长度过长显示为省略号
文本内容长度过长显示为省略号Css3中新增的一个属性 text-overflow语法:text-overflow: clip|ellipsis|string;属性值详解:单行文本显示。。。时:使用text-overflow:ellipsis时,需要跟 overflow: hidden;white-space: nowrap;一起使用多行文本显示。。。时需结合display: -webkit-box;-webkit-line-clamp: 2;//第几行裁剪为省略号-webkit-bo原创 2021-06-16 17:21:49 · 262 阅读 · 0 评论 -
vue项目页面添加水印
vue页面显示水印原创 2022-11-09 10:19:07 · 676 阅读 · 0 评论 -
iframe父子传参通信之postMessage
iframe父子传参通信之postMessage1.使用postMessage向父组件传值window.parent.postMessage(data,origin)注:data–传对象需要使用JSON.stringify()转成json字符串origin–发送消息窗口的源(协议+主机+端口号),可以解决跨域问题2.在父组件中接收,可以写在mounted,created钩子函数中window.addEventListener('message', (e) =>{ //接收传过来的值是对原创 2022-04-24 16:08:28 · 1196 阅读 · 0 评论 -
vue中动态引入图片路径
vue中动态引入图片路径使用img标签显示图片时,使用require动态引入图片路径 <img :src="weather ? require(`../../../assets/mainHome/${weather}.png`) : ''"/>原创 2022-03-03 10:23:35 · 576 阅读 · 0 评论 -
vue自定义表单enter键输入指令
vue自定义表单enter键输入指令//自定义指令 directives:{ 'enterToNext':{ update: function(el,binding,vnode){ //inserted update console.log(el); let _this = vnode.context; let inputs = el.querySelectorAll('input'); inputs = [...i原创 2022-01-20 13:44:50 · 716 阅读 · 0 评论 -
vue实现点击标签跳转到对应模块
vue实现点击标签跳转到对应模块注:#apiService是模块id,点击标签时调用jump()方法//点击菜单显示到对应模块 jump(index) { // this.$nextTick(() => { setTimeout(() => { this.$el.querySelector(`#apiService${index}`).scrollIntoView({ behavior: "smooth", // 平滑过渡 block: "start"原创 2021-12-20 17:03:16 · 1019 阅读 · 0 评论 -
vue实现导出excel,pdf功能
实现导出excel功能注:后端返回的是文件流,前端使用a标签实现导出excel下面代码是固定写法,可以直接使用,亲测有用哦 const blob = new Blob([res],{type: 'application/vnd.ms-excel'}); const fileName ="加工手册导入模板.xlsx"; if ("download" in document.createElement("a")) { // 非IE下载原创 2021-12-01 11:06:09 · 1266 阅读 · 1 评论 -
vue实现pdf打印预览
vue实现pdf打印预览**前言:**前端调用后端接口,返回给前端的是文件流,而不直接是路径,这时前端需把文件流转成路径,再使用window.open()方法,打开pdf实现预览打印代码如下:注:res是后端返回的文件流 if (window.navigator.msSaveBlob) { // IE //IE无法打开Blob URL链接,所以不能预览只能通过window.navigator.msSaveBlob下载 //注:msSaveBlob的第二个参数要有.p原创 2021-12-01 10:59:28 · 1454 阅读 · 2 评论 -
vue实现页面返回顶部功能
vue实现页面返回顶部功能<template> <div id="goTop"> <div class="goTop" v-show="goTopShow" @click="goTop"> 回到顶部 </div> </div></template><script>export default { name: "goTop",原创 2021-10-18 16:31:22 · 622 阅读 · 0 评论 -
Vue与Lodop实现打印功能
Vue与Lodop实现打印功能添加背景图先在data中声明变量引入图片(使用require)imgUrl: require("…/…/static/images/approval.jpg"),然后使用ADD_PRINT_SETUP_BKIMG方法添加图片LODOP.ADD_PRINT_SETUP_BKIMG(’’);原创 2021-07-02 09:35:21 · 327 阅读 · 0 评论 -
实现pdf文件(pdf路径)打印预览
html5中标签实现pdf文件打印预览先看下要实现的效果(图如下):使用标签需注意:1.它是自闭合的标签2.它的高度要设置为具体像素代码如下: <embed :src="pdfUrl" type="application/pdf" width="100%" height="700px" /> ...原创 2021-03-25 11:08:24 · 1684 阅读 · 0 评论 -
vue中v-on绑定多个方法
vue中v-on绑定多个方法1.v-on绑定多个方法<p v-on="{click:dbClick,mousemove:MouseClick}"></p>2.一个事件绑定多个方法<p @click="click1(),click2()">点击</p>原创 2020-12-14 09:47:34 · 1920 阅读 · 0 评论 -
解决el-input绑定@keyup事件无效问题
解决el-input绑定@keyup事件无效问题1.input框绑定@keyup事件<input v-model="firstName" @keyup.enter="方法名"></input>2.vue中el-input框绑定@keyup事件,需要加上**.native修饰符**,否则不生效<el-input v-model="lastName" @keyup.enter.native="方法名"></el-input>...原创 2020-09-07 15:45:03 · 1965 阅读 · 0 评论 -
Vue实现登录记住密码
Vue实现登录记住密码前提:登录时记住密码可以方便用户退出后再次快速操作,一般使用Cookie进行存储用户名和密码,思路如下:1.先判断用户在登录时是否勾选记住密码,如果勾选,向cookie中储存登录信息, 如果没有勾选,储存的信息为空 setUserInfo() { var vm = this; // 判断用户是否勾选记住密码,如果勾选,向cookie中储存登录信息, // 如果没有勾选,储存的信息为空 if (vm.ruleForm原创 2020-08-18 11:06:47 · 1855 阅读 · 0 评论 -
Vue中动态显示表格内容
Vue中动态显示表格内容在项目中,我们可能会用到表格来显示不同的数据,表格显示数据,无非是列的内容不同,所以,我们可以考虑封装个公共的表格组件,动态得显示不同的数据实现截图如下:1.首先在项目中创建一个公共表格组件table.vue,代码如下<template> <!--这里放其他内容,表格等--> <el-table :data="tableData" border style="width: 100%;" v-loading="tableLoading"原创 2020-08-14 15:44:20 · 6420 阅读 · 1 评论 -
Vue-cli3以上版本怎么配置Webpack
Vue-cli3以上版本怎么配置Webpackvue-cli3以下版本中,关于webpack的一些配置都在config目录文件中,可是vue-cli3以上版本中,没有了config目录,那该怎么配置webpack呢?这时,vue-cli给我们提供了一个可选的配置文件(但需要我们自己手动创建哦vue.config.js,跟package.js同级)看下vue.config.js中常用的配置module.exports = {}publicPath:部署应用包的基本Url,默认/, 可以设置为原创 2020-08-13 14:03:27 · 1543 阅读 · 0 评论 -
Vue项目中使用Svg矢量图标
#Vue项目中使用Svg矢量图标使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装下载在components目录下新建一个SvgIcon.veu组件,代码如下图然后需要新建icons目录,与components目录同级## index.js代码如下![在这里插入图片描述](https://img-blog.csdnimg.cn/20200810110113899.png原创 2020-08-10 11:09:46 · 838 阅读 · 1 评论