黑眼圈

vue3中的对象时为proxy对象，如何获取值使用vue3.0时，因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy对象，Proxy对象里边的[[Target]]才是真实的对象。第一种获取target值的方式：通过vue中的响应式对象可使用 toRaw() 方法获取原始对象//第一种获取target值的方式，通过vue中的响应式对象可使用toRaw()方法获取原始对象import { toRaw } from '@vue/reactivity'

// 安装插件npm i depcheck//查看无用的插件npx depcheck// 对应删除npm uninstall kd-layout

vscode插件大全

{ // 換行 "editor.wordWrap": "on", // 是否允许自定义的snippet片段提示 "editor.snippetSuggestions": "top", // vscode默认启用了根据文件类型自动设置tabsize的选项 不檢查縮進，保存后統一按設置項來設置 "editor.detectIndentation": false, // 重新设定tabsize 代码缩进修改成4个空格 "editor.tabSize": 2, // #每次保存的

template 部分 <el-date-picker v-model="time" style="width:350px" :type="dateType" size="small" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" :value-format="dateFormat" :picke

mounted(){ window.onresize = function () { //监听屏幕的改变 setTimeout(function () { that.refresh(); }, 10) };}methods: { refresh() { let devicewidth = document.documentElement.clientWidth; console.log(devicewidth); // i

<template> <div class="app-content"> <div class="table_expand_item"> <b>element-ui table只展开一行demo</b> <el-table :data="tableData" :row-key="getRowKeys" :expand-row-keys="exp.

设置 localStorage 的过期时间判断function setLocalStorage(key, value) { var curtime = new Date().getTime(); // 获取当前时间 ，转换成JSON字符串序列 var valueDate = JSON.stringify({ val: value, timer: curtime }); try { localStorage.setItem(ke

困扰我的问题。也是到网上看到解决方案。分享出来使用vue进行开发时，如果要刷新当前路由，则调用router.go(0)方法即可。但是某些情况下，我们可能要求仅仅刷新某个组件，而不是路由1.使用this.$forceUpdate强制重新渲染如果要在组件内部中进行强制刷新，则可以调用this.$forceUpdate()强制重新渲染组件，从而达到更新目的。<template><button @click="reload()">刷新当前组件</button><

需要引用sortablejs GitHub地址//安装sortable.jsInstall with NPM:$ npm install sortablejs --save//在组件内引入import Sortable from 'sortablejs'//为需要拖拽排序的表格添加ref属性<el-table ref="dragTable">//在数据渲染完毕添加拖拽事件created(){ this.layerAddQuick()},async lay.

let nameList = ["1","2","3"]nameList.map(Number)小炒面

直接上代码：<el-input placeholder="地区" v-model.trim="searchValue" @input="throttle()" suffix-icon="el-icon-search"></el-input>// v-for="item in query(searchValue)"<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitie

查了一些资料。终于解决了这个问题。直接上代码// table 里面直接<el-table :data="tableData" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 1)" :header-cel

在开发element table 处理数据的过程中碰到了这个问题。就顺便记录下来。思路：通过数组A 获取数组B的对应其他属性值,情景如下.关键方法有: map() 和 findIndex(); map()直接遍历更新对象,findIndex返回符合条件的索引值话不多说，直接上代码： let AopnoIdList=["14","15"] let aopnoList = [{ "label": "全部", "value": "" }, { "label":

1、首先，需要执行npm install sortablejs --save-dev 安装sortable.js2、在页面内引入<template> <div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, index) in

**element UI 对导航el-menu 样式的修改**.el-menu--horizontal > .el-submenu .el-submenu__title,.el-menu--horizontal > .el-submenu.is-active .el-submenu__title,.el-submenu__title i { color: #fff;}.el-menu--horizontal > .el-submenu.is-active .el-subme

1、vuejs 是单页面应用，应用内的跳转，可以用router-link标签<router-link tag=‘span’ to="#" @click.native=“handleEditPassword”>tag类型: string默认值: “a”有时候想要 渲染成某种标签，例如。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。 foofooactive-class 类型: string 默认值: “router-link-active” 设

定义：对内容或数据进行过滤(二次处理)的一种方式写法：Vue.filter(“过滤器名称”,过滤方式);使用：过滤器类似于管道流种类：局部过滤器和全局过滤器1、全局过滤器（1）定义无参全局过滤器<div id="app"> <p>{{ message | replaceStr}}</p> </div> <script> // 定义一个无参的名称为replaceStr的全局过滤器

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。所以如果在想要在router-link上添加事件的话需要@click.native这样写所以如果要事件有效的话，改成如下：<router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover.nativ

//返回顶部backTop() { let top = document.documentElement.scrollTop || document.body.scrollTop // 实现滚动效果 const timeTop = setInterval(() => { document.body.scrollTop = document.documentElement.scrollTop = top -= 50 if (top <= 0) { clearInter

为什么要做seo优化相比于传统多页面项目,vue,react等之类的单页面应用(spa)对网络爬虫不友好因为网络爬虫只能识别网页内容(html),并不能抓取js,而spa应用主要是靠js的跳转来实现的vue项目的seo优化方式1.SSR(服务端渲染),使用Nuxt.js,适用于从零开始搭建项目时使用2.预渲染,使用prerender-spa-plugin,在已完成的项目的基础上,适用于某几个页面需要进行seo优化3.prerender-node（需要后端去做ngnix处理）本文主要使用预渲

vue项目px自动转rem适用于pc端第一步首先安装：autoprefixer postcss-pxtorem lib-flexible 三个依赖postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位安装命令：npm install postcss-pxtorem -Dlib-flexible是淘宝团队总结出来的移动端弹性布局适配方案Autoprefixer是一款自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里，使用Can I Use(can

<el-select v-model="choseCapital" placeholder="请选择注册资本" @change="capitalChange($event)"> <el-option v-for="(item2,index2) in registered_capital" :key="index2" :label="item2.category_name" :value="`${item2.id},${item2.category_name}`" /></

纯跳转this.$router.push('/home') // 向地址栏历史添加一条。可以回退this.$router.replace('/home') // 不添加跳转历史params参数this.$router.push({ name: 'home' , // 或者可以写成 path: '/home' params: { // 这种参数不会带在地址栏上 name: '啦啦', info: { age: 18, sex

vue将数据存入vuex里面，在进行页面刷新的时候，数据丢失，这里有两个解决办法应对不同场景：第一种假如你的路由跳了3层以上，而且这几个页面都要用同一个数据roomId，肯定想到路由传参的方式传roomId，那么问题来了：解决方法：初始化得到roomId后，存入sessionStorgeVuex里面的state直接读取存入sessionStorge的这个roomId在页面修改roomId的时候，提交mutation修改Vuex里面存的roomId，同时将这个roomId存入sessionStor

依赖安装：npm install vue-video-player --save使用：<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>import 'video.js/dist/video-js.css' import { videoPla

Vue项目中设置每个单页面的标题routes: [{ path: '/', name: 'index', component: index, meta:{ title:'首页标题' } },{ path:'/detail', name:'detail', component:detail, meta:{ title:'详情页标题' }}]第一种方法：引入vue-wechat-tit

let result = {}; e.goods.forEach((item) => { let group = item["skuId"]; if (group) { if (!result[group]) { result[group] = []; } result[group].push(item); }

var str = "湖北省武汉市江夏区文化大道110号"; // var str ="内蒙古自治区乌兰浩特市二区" // var str = "重庆市渝中区中兴路" // var str = "湖北省黄石市阳新县" // var str ="湖北省宜昌市长阳土家族自治县" // var str = "重庆市秀山土家族苗族自治县武陵南路武陵广场" console.log(that.getArea(str)); //省市区截取 getArea: fu

<divv-if="goods.detail2Show"class="goods-detail-intro-content"@click="imgDetao($event)">{{ goods.detail2 }}</div>imgDetao(e) { // ImagePreview([item]); if (e.target.nodeName === "IMG") { console.log(">>&

let textareaHtml = response.detail; // 循环，分别取出每个item的富文本内容 let img = textareaHtml.match(/<img[^>]+>/g); // 利用正则，取出所有img标签，数据格式为数组 console.log(img, "textareaHtml"); let arrImg = ""; // 定义空

let param = { // url: "http://m.organicfarm.com.cn/#/h5/specialColumnDetail?id=" + this.data.id + "&share=ios", // 当前页面url url: window.location.href, // 当前页面url ...

<!-- 回顶部按钮为一张50*50的图片 --><!-- btnFlag 控制图片显示隐藏 --><!-- backTop 回顶部的方法 --><img v-if="btnFlag" class="go-top" src="图片url" @click="backTop">vue实例：// vue的两个生命钩子，这里不多解释。// wi...

最近在vue项目中遇到一个报错，虽然不影响使用，但是报错还是得解决的一进入某页面，就会冒出这么一长串的报错，这个是由于v-for循环里，key值可能重复了，所以会报这个错。查看了一下页面代码：key值是必须唯一的，如果重复就会报错可以把key值改为index，就可以避免这个情况：...

vscode保存代码，自动按照eslint规范格式化代码设置eslint 自动格式化先说一个前提吧，你在package.json中安装了eslint的依赖，不然配置无用。例如如下依赖："eslint": "^4.19.1","eslint-friendly-formatter": "^4.0.1","eslint-loader": "^2.0.0","eslint-plugin-ht...

一、npm安装animate.css npm install animate.css --save二、在组件中引入,并控制动画元素的显示消失元素是在显示和消失的时候才会显示出动画，需要对动画作用的元素是否显示进行控制<script> import animate from 'animate.css' export default { data() { ...

母板组件是啥？母板跟模板差不多，就是将一些重用性较高的页面结构抽离出来，封装到一个独立的组件里，以便于在各个项目中使用。比如后台管理，经典的头部，尾部，侧边栏与主要内容区域；我们就可以把这个结构封装成一个母板组件，今后只要写后台管理类的项目，就可以直接使用。下面具体来实现一下。实现一个后台管理的母板组件假设我们需要实现的是下面这张图的效果：母板组件命名为layer.vue;为了快速实现这...

<div class="detailActivaty" v-html="transBr(activityDesc)"></div><script> methods:{ transBr(val){ return (val + '').replace(/\n/g,"<br/>") },...

vue里，img加载错误的时候，onerror属性可以加载错误图片的默认图片写法如下：<img class=avator' :src="data.picture" :onerror="defaultImg"> data(){ return { defaultImg: 'this.src="' + require('../../assets/images/...