vue
xi邮lj
这个作者很懒,什么都没留下…
展开
-
vue自定义表格
<template> <div style="width: 100%"> <el-form :model="ruleForm" ref="ruleForm" size="mini"> <table cellpadding="1" cellspacing="1" class="tables" align=“left”> <tbody> <tr style="backgro...原创 2022-04-24 17:47:25 · 2147 阅读 · 0 评论 -
vue点击左右滑动按钮滑动数据
<template> <div style="width: 100%"> <div class="monitor-list"> <!-- 左边按钮 --> <div class="btn" @click="scrollLeft"> <i class="el-icon el-icon-caret-left" /> ...原创 2022-04-24 17:33:10 · 2462 阅读 · 0 评论 -
vue 点击更多展开功能
主要是靠样式的隐藏和显示来控制<template> <div style="border: 1px red solid;width: 50%;position: relative "> <div :class="flag ? 'externalDiv': ''" > <div style="display: flex;flex-wrap: wrap;padding-right: 40px" ...原创 2022-04-24 17:20:09 · 2517 阅读 · 0 评论 -
ESLint: The Function constructor is eval. (no-new-func)错误解决
let a = new Function('a','b','return a + b') // 有错误修改为let a = function(a, b) { return a + b}let a = new Function('return false') // 有错误修改为let a = function() { return false}原创 2022-04-22 18:14:49 · 2076 阅读 · 1 评论 -
vue element-ui 实现可输入的选择下拉框
<template> <el-select v-model="value" filterable allow-create :filter-method="filterMethod" default-first-option clearable placeholder="请选择文章标签"> <el-option v-for="item in options" ...原创 2022-03-30 15:56:06 · 5807 阅读 · 0 评论 -
vue 手机移动端预览pdf
最新需求是在手机实现pdf的预览,经过一番查询,采用的是pdfh5,可以保存为图片,比较方便首先pdf返回的是pdf文件流接收pdf文件流的时候需要设定文件类型responseType: 'arraybuffer'首先下载pdfh5npm i pdfh5主要代码<template> <div id="app"> <div id="demo"></div> </div></templa.原创 2022-03-03 17:04:12 · 2792 阅读 · 3 评论 -
vue关键字高亮有正则关键字报错
// str是整段文字,keyWord是需高亮文字 highlightText (str, keyWord) { const key = '(' + keyWord.replace(/([\+\.\*\|\?\-\(\[\^\$])/g, '\\$1').replace(/\s+/g, '|') + ')' const pattern = new RegExp(key, 'g') const str2 = str.replace(pattern, `&l...原创 2022-02-17 18:23:48 · 413 阅读 · 0 评论 -
vue 全局scss谷歌浏览器不生效 其他浏览器生效
最新的谷歌浏览器,在main.js引入的全局scss文件不生效了,原因竟然是我在全局样式中加了/deep/解决方式:去掉deep就生效了注:不是全局的样式依然要加/deep/才行原创 2021-12-23 01:15:33 · 993 阅读 · 0 评论 -
Property or method “XXX“ is not defined on the instance but referenced during render.
先看报错截图引入外部的js方法,然后直接在vue html中使用就会报错。上述是报错的,解决方案:在方法里定义一下就行html的方法需要export default 导出后才能使用,直接使用外部引入的js方法会报not defined...原创 2021-12-15 16:03:49 · 847 阅读 · 0 评论 -
vue 移动端px适配
1.使用lib-flexible动态设置REM基准值(html标签的字体大小)npm i amfe-flexible然后在main.js引入它// rem适配import 'amfe-flexible'2.使用postcss-pxtorem将px转为rem// 指定版本安装,安装最新版本会有报错几率npm i postcss-pxtorem@5.0.0 -D然后在根目录下创建一个postcss.config.js文件// postcss.config.jsmodule.exp.原创 2021-12-04 19:55:07 · 745 阅读 · 0 评论 -
vue img图片 axios请求携带参数、系统头Header
最近需求要求系统下载图片携带token系统头验证权限,一般的img用src下载是get请求且不经过axios全局配置,会携带不上token。所以不能用img,只能自己写一个图片组件替代img自己建一个组件 authImg核心<template> <img ref="img" /></template><script>export default { name: 'authImg', props: { authSrc: {原创 2021-11-23 10:14:02 · 4130 阅读 · 1 评论 -
css 换行
在li标签样式加入 white-space:normal; word-break : break-all; word-wrap: break-word;原创 2021-11-01 16:30:02 · 115 阅读 · 0 评论 -
vue安装scss
最好带版本号安装, 兼容性最好 npminstall sass-loader@7.3.1 npm install node-sass@4.14.1 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loader: ['style', 'css', 'sass']},原创 2021-10-29 11:02:01 · 534 阅读 · 0 评论 -
vue el-table 点击号码拨打电话
<el-table :data="tableData" border style="font-size: 14px" > <el-table-column label="序号" type="index"></el-table-column> <el-table-column label="名字" prop="name"></el-table-column> <el-table-column label="电话"> .原创 2021-10-28 10:51:51 · 283 阅读 · 0 评论 -
vue移动端开启键盘 页面底部样式乱了
底部样式或许用了position: absolute;position: fixed;当输入表单时,样式会乱,可以解决vue:找到页面上真正的显示div 加一下refmounted() { this.$refs.home.style.height = this.$refs.home.clientHeight + 'px' this.$refs.home.style.width = this.$refs.home.clientWidth + 'px'},..原创 2021-10-20 17:52:38 · 364 阅读 · 0 评论 -
van-action-sheet 性别选择
效果图:<van-cell title="性别" is-link :value="personInfo.stuSex == 0 ? '男' : '女'" @click="isEditGenderShow=true"></van-cell><van-action-sheet v-model="isEditGenderShow" :actions="actions" cancel-text="取消" close-on-click-actio.原创 2021-10-12 20:57:49 · 856 阅读 · 0 评论 -
keydown 、keyup、input区别
@keydown是按下键盘时触发事件,但是不带按下的键盘内容;如需要输入abc,按下c的时候使用keydown触发事件,传过去的内容只有ab@keyup是松开键盘触发事件@input是文本事件,文本内容变的时候就会触发事件顺序 keydown =》input=》keyup...原创 2021-05-17 15:23:35 · 1406 阅读 · 0 评论 -
vue 过滤、筛选数组
// 用循环 test() { let arr = [ { name: 'lisi', age: 23 }, { name: 'zhangsan', age: 18 }, { name: 'wangwu', age: 29 } ]// 这里来筛选条件 .原创 2021-04-30 17:29:17 · 17824 阅读 · 1 评论 -
vue css 文字超出末尾加省略号...多行溢出
// 一般写好盒子的 宽度 后,就可以使用下面样式// 超出隐藏 overflow: hidden;// 末尾加省略号 text-overflow: ellipsis;// 不换行 white-space: nowrap;// 行内元素转换行内块元素。(CSS2.1 新增的值) display: inline-block;但是遇到flex布局,宽度不够的话,会与上面属性有冲突,所以可以换一种;或者需要多加几行显示 overflow: hidden;// 下面是显示.原创 2021-04-22 11:08:04 · 1685 阅读 · 0 评论