分类 vue 下的文章

在使用elment中el-radio的时候发现控制台报错，Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prev- 阅读剩余部分 -

最近在把vue2升级vue3过程中遇到了各种bug，这次遇到了在vue2中父子传参的过程中发现showSearch数据不更新问题父组件引用 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> 子组件 this.$emit("update:showSearch", !this.showSearch); 我们需要吧父组件改成v-model:value="value" 模式<r- 阅读剩余部分 -

<svg-icon icon-class="clipboard" class-name="disabled" /> 经过分析是少了个解析插件 svg-sprite-loader ，用npm安装一下，然后需要在vue.config.js中添加配置'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } chainWebpack: config => { config- 阅读剩余部分 -

利用device-pixel-ratio单独适配像素比@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18), (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18), (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) { :root { - 阅读剩余部分 -

首先安装vue-i18n包新建locales/i18n.js文件/** * Created by liweiliang 406320591@QQ.com on 2022/10/14 15:16. */ import Vue from "vue"; import VueI18n from "vue-i18n"; import elementZhLocale from "element-ui/lib/locale/lang/zh-CN"; // element-ui lang import elementEnLoc- 阅读剩余部分 -

vue项目根目录新增配置文件 .babelrc{ "presets": [ "stage-2" ] } 修复好 Syntax Error: Unexpected token 启动发现又报如下问题Failed to compile with 9 errors Module build failed: Error: No PostCSS Config found in: D:\project\ 根目录新建postcss.config.js/** * Created by liweiliang 406320591@QQ- 阅读剩余部分 -

<template> <div class="moduleIntro"> <el-button-group> <el-button type="primary" icon="el-icon-arrow-left" size="small" @click="prePage">上一页</el-button> <el-button type="primary" - 阅读剩余部分 -

安装包 jszip和file-saver代码<template> <div class="jszip"> <span @click="demoZip">downloadZip</span> </div> </template> <script> import JSZip from 'jszip' import { saveAs } from 'file-saver' export default { n- 阅读剩余部分 -

项目main.js文件引入import VueQuillEditor from 'vue-quill-editor' // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor, /* { default global options } */) /* eslint-disable no-new */ new Vue({ el: '#- 阅读剩余部分 -

最近在各种魔改一个老项目，遇到了一个这样的错误Ant Design Vue 局部引入 Modal 组件方式import {Row, Col, Button, Collapse, Icon, Modal, Input} from "ant-design-vue"; components: { AButton: Button, AInput: Input, ACollapse: Collapse, ACollapsePanel: Collapse.Panel, AIcon: Icon, AModal: Modal }, 开始看到 di- 阅读剩余部分 -

最近老搞移动端开发，赶脚调试起来很不方便，然后就发现了腾讯开源的vConsolevConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。特性查看 console 日志查看网络请求查看页面 element 结构查看 Cookies、localStorage 和 SessionStorage手动执行 JS 命令行自定义插件上手方法一：使用 npm（推荐）$ npm install vconsole Import 并初始化后，即可使用 console.log 功能，如 Chrome devtools 上一样。import VConsole from 'vconso- 阅读剩余部分 -

这两天有开始搞华为VOLTE第二版了，偷懒样式直接@import，这时发现第一版样式全服错乱，查看了下是在使用@import引入css的时候，css-loader对import的文件会当做外部资源来编译造成它变为全局样式案例<style scoped> @import "./main.css"; .VoLTE{ width: 100%; height: 500px; background: #434656; background-size: cover; } </style>修改成<style scoped - 阅读剩余部分 -

最近开发项目在和华为Volte做对接，结果华为volte第一版还是原生加jquery来实现的，由于里面有不少需要引入外部js文件的，就给了一天的时间做对接，没办法只能剑走偏锋了首先定义一个 utils/loadScript.js 封装一个动态加载js文件的方法export function loadScript (url) { return new Promise((resolve, reject) => { const script = document.createElement('script') script.onload = () =&- 阅读剩余部分 -

最近在搞vue3+Typescript脚手架然后在定义变量的时候报错 'name' is never reassigned. Use 'const' instead prefer-const 大概意思就是 标识符'errMsg'永远不会被重新分配;使用'const'而不是'let'。(prefer-const)解决方法就是在eslint配置文件或者tslintt配置文件增加{ "rules":{ "prefer-const": "off" } }

Pinia 是什么?Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案Pinia 支持 Vue2 和 Vue3常见问题关于该项目和可能问题的几点说明：问：这是否取代了Vuex，是它的继任者吗？答：不，或者至少这不是主要意图问：动态模块呢？答：动态模块不是安全的类型，因此我们允许创建不同的商店，可以在任何地方导入Pinia 优势符合直觉，易于学习极轻， 仅有 1 KB模块化设计，便于拆分状态安装 Piniayarn add pinia@next # or with npm npm install pinia@next 用法创建一个- 阅读剩余部分 -

在循环数组的时候基于每个对象中的某个参数来进行数据请求，获取当前对象对应的数据状态实现方法基于最新的es6中的async await 来实现首先要把对应的Promise方法进行一个封装_getReportStatus(item){ return new Promise((resolve, reject) => { getReportStatus({reportCode:item.reportNo}).then(data => { if(data.data.code == '0000'){ - 阅读剩余部分 -

主要语句 vnode.elm.dispatchEvent(new CustomEvent('input'));/** * Created by liweiliang 406320591@QQ.com on 2021/01/26 23:04. */ import pattern from '@/utils/pattern' let amountCheck = function (vnode, binding, el) { // console.log(el, vnode, binding) let reopenState = binding.modifiers.- 阅读剩余部分 -

Column配置比如：操作列{ key: 'action', scopedSlots: { customRender: 'action', title: '变量名' }, align: 'center' } 代码段<template slot="变量名">{{动态表头名称}}</template> demo: 注意不要在括号 dataIndex同级节点加title属性名，否则的话scopedSlots设置的title会失效//Column { dataIndex: 'belong', key: 'belong- 阅读剩余部分 -

首先来说 百度地图默认的api，通过查看接口文当 中 MapOptions -> enableMapClick:是否开启底图可点功能，默认启用new BMap.Map(mapid,{enableMapClick:false});在vue-baidu-map中，上面这个方法是无效的通过查看源码发现需要在baidu-map上添加个:mapClick="false" 就可以了官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/index

icon 自定义图标（1.14.0 新增） string|()=>VNode 一、利用自带的icon赋值个默认的icon名字就可以了，但是有时候我们需要用到实底风格的icon，所以只能用()=>VNodethis.$confirm({ title: '确认设置当前位置为出险地点?', content: this.infoWindow.contents, icon: 'exclamation-circle', onOk: () => { this.onMapClose(); c- 阅读剩余部分 -

Warning: [antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key.] 使用 Ant Design的时候报key警告，这由于columns中定义的默认key值在返回的数据中没有当前的这个字段造成的，一个是使用rowKey默认指定一个对应的键值对，或者使用类似v-for循环中的下标index来代替:rowKey="(record,index)=>{return index}"

最近试了下 Vue.extend 方法，写好后发现访问会报如下错误vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.接下来我们分析下报错的原因在哪里和解决办法原因vue有两种形式的代码 c- 阅读剩余部分 -

先附一张官网上的vue实例的生命周期图，每个Vue实例在被创建的时候都需要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。1、vue的生命周期图在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。生命周期钩子详细beforeCreate在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。c- 阅读剩余部分 -

利用moment.js来实现距离某个时间的时间差，写了个过滤方法filterTaskTime(params){ let x=moment(params); let y=moment(); //当下时间 let duration = moment.duration(y.diff(x,'ms')); //做差 let days = duration.get('days'); let hours = duration.get('hours'); let mins = duration.get('minutes'); l- 阅读剩余部分 -

blobToBase64(blob) {return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = (e) => { resolve(e.target.result); }; fileReader.readAsDataURL(blob); fileReader.onerror = () => { reject(newError('文件流异常')); }; });},使用方法：thi- 阅读剩余部分 -

https://cn.vuejs.org/v2/api/#v-cloakv-cloak这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。示例：//css [v-cloak] { display: none; } //html <div v-cloak> {{ message }} </div>

video.js是一个很好的视频播放插件，但是如果移植到vue上相信很多小伙伴很苦恼，是不是网上搜了一堆，发现不好使，我也是踩坑了，后来发现官方文档上就有，好尴尬，建议以后学习先看看官方文档，会有惊喜的。1.首先安装video.js，然后在main.js中引入npm i video.js -D //安装 //main.js 引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video; 1.先官方基础的使用方法，自定一个组件，说明一下在使用v- 阅读剩余部分 -
  1. 1
  2. 2