vue
关注
分享
扫一扫
tamia_nice
这个作者很懒，什么都没留下…
展开
-
vue项目 友好 放大缩小设置
zoom原创 2023-01-10 11:44:37 · 847 阅读 · 0 评论 -
【无标题】字典表类型数据共用
1.新建一个js 文件 写上 公共 方法。2.main.js引入。原创 2022-11-15 16:29:36 · 224 阅读 · 0 评论 -
vue 项目中 全屏插件
全屏插件原创 2022-08-30 11:19:39 · 349 阅读 · 0 评论 -
vue-draggable-resizable放大缩小拖拽功能
vue-draggable-resizable放大缩小拖拽功能原创 2022-08-05 16:37:20 · 1240 阅读 · 0 评论 -
chunck.js文件打包过大（优化）
打包优化原创 2022-06-09 16:40:27 · 796 阅读 · 0 评论 -
vue中使用moment处理时间戳转换成日期或时间格式
vue中使用moment处理时间戳转换成日期或时间格式 npm i momentimport moment from 'moment'<template> <div> <p>{{ time | Time }}</p> </div></template><script>import moment from "moment"; //处理时间export default { data()原创 2022-03-24 11:15:14 · 1809 阅读 · 0 评论 -
pc端分辨率适配
https://blog.csdn.net/weixin_41257563/article/details/97266234/转载 2021-11-16 15:27:05 · 147 阅读 · 0 评论 -
实时高亮检索框
效果<template> <div> <el-input v-model="input" placeholder="请输入内容"></el-input> <p v-html="ruleTitle(content,input)"></p> </div></template><script> export default { data() {原创 2021-11-16 15:04:09 · 100 阅读 · 0 评论 -
element ui中select 下拉选择文字输入筛选
未修改代码前效果 选择框中不可编辑如图：加入 filterable allow-create default-first-option代码如下<template> <div> <el-select v-model="value" placeholder="请选择" filterable allow-create default-first-option> <el-option v-for="item in options" :ke原创 2021-11-09 14:37:47 · 470 阅读 · 0 评论 -
闭包的应用1（导航栏）
MenuCompontent.vue<template> <div> <ul> <li v-for="(item, i) in menusArr" :key="i + 'aa'" @click.stop="toRouter(item)"> {{ item.name }} <menu-compontent :menusArr="item.children" v-if="item.childr.原创 2021-11-04 20:44:37 · 97 阅读 · 0 评论 -
vue关闭严格模式
vue关闭严格模式原创 2021-11-02 20:13:51 · 606 阅读 · 0 评论 -
鼠标滚动分页查询 下拉过滤
鼠标滚动分页查询：main.js文件中引入：main.js部分Vue.directive('loadmore', { bind (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll'原创 2021-09-28 15:15:50 · 177 阅读 · 0 评论 -
vue-awesome-swiper插件
vue-awesome-swiper插件[https://www.npmjs.com/package/vue-awesome-swiper](https://www.npmjs.com/package/vue-awesome-swiper)<template> <div class="photo_view"> 3333 <swiper class="swiper" :options="swiperOption" ref="mySwiper">原创 2021-09-28 15:07:02 · 238 阅读 · 0 评论 -
三角形画法
triangle为三角形结构<div class="carousel"> <div class="businessBox" @mouseenter="moreEnter(i)" @mouseleave="moreLeave(i)" v-for="(item, i) in navList" :key="i + item.src" @click="toChangeTabs(item, i)"> <div style="height:100%" :class=.原创 2021-08-14 16:28:28 · 588 阅读 · 0 评论 -
点击左侧导航 轮播图定位 轮播图导航
点击左侧导航 轮播图定位<template> <div class="service_contain"> <Spin size="large" fix v-if="spinShow"></Spin> <div class="bgImg"> <!-- <img src="../assets/img/service/servicebanner.png" alt="" /> <s原创 2021-08-14 16:24:40 · 270 阅读 · 0 评论 -
导航栏滚动效果应用
效果：左边数据滚动到相应位置 右边导航对应点击右侧导航 自动定位该数据<template> <div class="service_contain"> <Spin size="large" fix v-if="spinShow"></Spin> <div class="bgImg"> <img src="../assets/img/service/servicebanner.png" alt=""原创 2021-07-22 17:00:10 · 359 阅读 · 0 评论 -
路由跳转新标签页打开
路由跳转新标签页打开示例图：点击页面跳转方法： toApply() { let routerData = this.$router.resolve({ path: "/apply", query: { id: 1, }, }); window.open(routerData.href, "_blank"); },路由跳转本页面打开点击页面跳转方法： toApply() {原创 2021-07-21 16:16:59 · 1132 阅读 · 0 评论 -
页面滚动头部固定 背景色显现
页面滚动头部固定 背景色显现效果图未滚动前滚动后结构代码： <div class="top" id="topdiv" :class="isScorll ? 'scrollTop' : ''" > </div>方法： mounted() { window.addEventListener('scroll', this.showIcon); }, methods: { showIcon() { if ( !!doc原创 2021-07-21 16:10:37 · 437 阅读 · 0 评论 -
Vue页面上实现PDF导出
Vue页面上实现PDF导出下载包 npm i vue-to-pdf --save在main.js/App.js中加入引用：import vueToPdf from 'vue-to-pdf';Vue.use(vueToPdf);3.页面点击导出pdf页面代码<template><div> <button @click="savePdf()">导出pdf</button> <div style="width原创 2021-06-02 23:02:42 · 681 阅读 · 2 评论 -
vue中table表格点击下载为图片格式
vue中table表格点击下载为图片格式页面布局：点击下载：1.下载npm install --save html2canvas2.导入需要引用的页面import html2canvas from "html2canvas";3.页面引用<template> <div style="min-height: 450px;"> <button @click="downloadResult('表格名称')">下载</button>原创 2021-05-31 21:47:42 · 1004 阅读 · 0 评论 -
平铺数据转树结构数据reduce()方法
平铺数据转树结构数据reduce()方法 <script> //从后台获取的对象数组，根据对象的type进行分组合并成tree树形展示数据 const dataArr = [ { type: "治理层", name: "hive_82", reserve: "2", id: 1 }, { type: "原始数据层", name: "qwe", reserve: "1", id: 2 }, { type: "贴源层", na原创 2021-05-30 14:49:48 · 391 阅读 · 0 评论 -
css单行文本溢出显示省略号 css多行文本溢出显示省略号（鼠标悬停显示全部内容）
css单行文本溢出显示省略号 css多行文本溢出显示省略号（鼠标悬停显示全部内容）<template> <div> <!--单行文本溢出 --> <h2>单行文本溢出</h2> <div class="box1"> <ul> <li title="全部内容展示：文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1">原创 2021-05-29 12:44:47 · 753 阅读 · 0 评论 -
多行文本点击查看全部与收起 CSS样式
<template> <div id="app"> <!-- 文本内容部分 --> <div id="box"> <ul> <li v-for="(item, i) in arr" :key="i">{{ item.text }}</li> </ul> </div> <!-- 点击查看 收起部分 --> &原创 2021-05-27 21:15:41 · 939 阅读 · 0 评论 -
下载模板 导入文件
<template><el-form class="padder" ref="form" :model="formData" :rules="rules" label-width="80px" size="small"> <div class="el-alert el-alert--info is-light" style="margin-bottom: 18px"> <span><i class="el-icon-info"><原创 2021-05-25 22:22:01 · 278 阅读 · 0 评论 -
let与var的区别
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl原创 2021-05-12 17:49:49 · 67 阅读 · 0 评论 -
闭包的应用
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl原创 2021-05-12 17:48:24 · 74 阅读 · 0 评论 -
原型链与继承
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl原创 2021-05-12 17:46:36 · 55 阅读 · 0 评论 -
双向数据绑定
jqery的出现为我们解决了什么问题? 1.提高开发效率 2.处理了兼容性jqery存在的弊端是什么？ 为什么会逐渐淘汰 1.本质还是操作dom(性能不友好) 重绘与回流 2.没有做业务分层前端三剑客 html css jsvue1.0设计理念1.没有虚拟dom2.一对一 少量数据更新更快 性能更好3.大量数据更新，性能差 （本质是更新dom）vue2.0设计理念1.虚拟dom加入虚拟dom的弊端：（第一次渲染会变慢）虚拟dom的本质是什么？？原创 2021-05-12 15:26:29 · 72 阅读 · 0 评论 -
页面优化
一、避免页面卡顿页面卡顿：当拖动页面或者滚动页面的时候一卡一卡的，看起来不连贯，我们就说页面卡了。1.失帧和帧率FPS如果你家里买了电视盒的话，在设置里面应该改会有一个输出设置 1080P 60HZ 1920*108060HZ帧率FPS 即一秒60帧，欢聚话说一秒钟的动画是由60福静态图片连在一起形成的。所以失帧就是1s钟没有60个画面，看起来不连贯。这可能是因为在渲染某些帧所花费的时间较长，导致停留在这些帧的时间较长，所以画面卡顿了。2.页面渲染流程60fps就是要求1帧的时间原创 2021-04-24 17:19:39 · 305 阅读 · 0 评论 -
vue中watch监听多个值的变化触发某个事件
vue中watch监听多个值的变化触发某个事件监听value1与value2的值 触发某个事件<template> <div> {{ value1 }} =======value1 <el-select v-model="value1" placeholder="请选择"> <el-option v-for="item in options1" :key="item.value1"原创 2021-01-06 10:55:50 · 2749 阅读 · 0 评论 -
vue CLI中反向代理proxy配置
vue CLI中反向代理proxy配置官方链接参考：https://cli.vuejs.org/zh/config/#devserver项目中配置proxy代码片段： devServer: { proxy: { '/': { // 目标地址 // target: "http://adult-dev.whxunw.com", target: "http://adult-test.whxunw.com", // 是否原创 2021-01-06 16:19:14 · 617 阅读 · 2 评论 -
vue文件上传功能bootstrap框架
vue文件上传功能bootstarp框架封装公共组件components/fileupload/FileUpload.vue 内容如下：公共组件```html<template> <div component_name="FileUpload" :component_id="id"> <div class="input-group"> <input v-model="input_file_name" styl原创 2021-04-15 10:31:50 · 1266 阅读 · 0 评论