vue实战
qingzhen568
这个作者很懒,什么都没留下…
展开
-
JS复制文本内容到剪切板,防止IOS抖动
JS复制文本内容到剪切板,防止IOS抖动和无法复制全部内容原创 2022-04-20 11:24:57 · 555 阅读 · 0 评论 -
内嵌h5,禁止长按图片保存、选个文本等事件
禁止长按图片弹出菜单原创 2022-04-14 10:24:21 · 1051 阅读 · 0 评论 -
Vue3.0 + Antd,修改antd主题色,配置全局css
1.在vue.config.js里修改配置module.exports = { css: { loaderOptions: { less: { lessOptions: { modifyVars: { 'primary-color': '#3d62ff',// 修改全局主题色 }, javascriptEnabled: true, }, }, },原创 2022-04-13 16:51:52 · 2747 阅读 · 0 评论 -
Vue性能优化之——引用CDN,提高首屏加载速度
性能优化实战原创 2022-04-13 16:38:12 · 3305 阅读 · 0 评论 -
如何有效清除页面缓存
使用以下方法,可以清除用户的页面缓存,甚至是小程序里webview页面,类似牛皮鲜一样的顽固缓存亦可清除掉。只需复制以下代码,写到最顶部的script即可,见效快且不影响使用。可以有效清除页面缓存。如果引用了微信sdk,在首页加载时使用了sdk里的方法,如果发生异常,就把最后一句代码去掉。(function(){ var href = origin = location.origin, pathname = location.pathname, search = location.search,原创 2022-04-12 14:53:25 · 2528 阅读 · 0 评论 -
常用的vue.config.js配置文件
/* eslint-disable @typescript-eslint/no-var-requires */const path = require('path');function resolve(dir) { return path.join(__dirname, dir);}const _mode = process.env.NODE_ENVconst serve = 'http://172.10.10.13:8080/'console.log('vue.config环境变量:',原创 2022-04-08 12:04:08 · 2079 阅读 · 0 评论 -
Vue3.0 循环列表超出2行显示... 点击展开按钮查看全部(展开收起)
效果图:要点是:将需要文本内容溢出显示省略号的模块组件话,然后在页面渲染后进行计算父组件:<template> <div class="list"> ... // 文本处理组件化 <ellipsis-Text :group_item="item" /> </div></template>子组件:<template> <div class="bottom"> <div原创 2022-03-26 15:36:13 · 3572 阅读 · 4 评论 -
vue3.0 H5页面配置 Autoprefixer 报警Replace Autoprefixer browsers option to Browserslist config.
vue3.0 配置H5 的px转rem自适应时,报Autoprefixer相关预警:Replace Autoprefixer browsers option to Browserslist config.Use browserslist key in package.json or .browserslistrc file.原因:postcss.config.js 文件中,引用的版本过高,需要修改postcss.config.js 更改前代码module.exports = { plugi原创 2022-01-25 15:19:30 · 1319 阅读 · 0 评论 -
移动端项目中使用vConsole进行调试
1.安装npm i -s vconsole2.在主入口文件main.js中添加以下代码if (process.env.NODE_ENV !== "production" || /vConsole/.test(location.href)) { const VConsole = require('vconsole'); const vConsole = new VConsole(); localStorage.setItem('vConsole_switch_x', 80) local原创 2022-01-25 15:01:32 · 1088 阅读 · 0 评论 -
实战:vue3.0 ant-design table表头国际化i18n问题
<a-table :columns="columns" :dataSource="dataSource" :pagination="false" :loading="loading" :scroll="{ x: 1100, y: 300 }" > // 表头国际化设置 <template #headerCell="{ column }"> <template v-for="(item, index) in columns" :原创 2021-12-28 12:00:14 · 2129 阅读 · 1 评论 -
vuex持久化存储 vuex-persistedstate
由于页面刷新会导致vuex中的状态更新(数据重置),但有时我们并不希望如此。例如,token、登录状态、以及一些不常更新的状态等,我们希望能够存储到本地,以减少不必要的接口请求,从而获得更佳的用户体验。那么可以使用vuex-persistedstate来实现数据的持久化存储。1.安装npm i -s vuex-persistedstate2.在store/index.js中使用import { createStore } from "vuex";import persistedState fro原创 2021-12-26 21:15:38 · 2367 阅读 · 0 评论 -
.prettierrc.js常用配置
module.exports = { printWidth: 80, tabWidth: 2, useTabs: false, singleQuote: true, semi: false, trailingComma: 'none', bracketSpacing: true, jsxBracketSameLine: true}原创 2021-12-14 18:33:08 · 1580 阅读 · 0 评论 -
require.context动态引入文件
/** * 目录结构 * store * |--modules * |--app.js * |--user.js * |--getters.js * |--index.js*/index.js文件:import Vue from 'vue'import Vuex from 'vuex'import getters from './getters'Vue.use(Vuex)// 规则:https://webpack.js.org/guides/原创 2021-12-14 11:32:35 · 1032 阅读 · 0 评论 -
VUE3.0使用ref 父组件调用子组件里的方法
父组件:关键之处:必须将定义的ref,比如childRef,return出去,否则 childRef.value 为undefined<template> <div id="home"> <div style="margin-top:100px" @click="showFn"> 父组件点击事件 </div> <child ref="childRef"/> </div></temp原创 2021-11-24 11:21:39 · 1120 阅读 · 0 评论 -
VUE3.0 路由 hash模式和 history模式
使用hash模式时, 需要引入使用 createWebHistory使用history模式时, 需要引入使用 createWebHashHistory原创 2021-11-19 15:50:24 · 1260 阅读 · 0 评论 -
防抖(debounce)、节流(throttle)及使用场景
防抖:在事件被触发的n秒后再执行回调,如果在这n秒内又被触发,则重新计时,核心在于清零,最后一次有效。使用场景: 窗口resize事件,搜索框输入联想节流:在单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数, 只有第一次有效,核心在于开关锁。使用场景:多次点击按钮,页面滚动事件。节流 throttleexport const throttle = (fn, delay) => { var timer = null return function () {原创 2021-11-16 16:26:10 · 832 阅读 · 0 评论 -
Syntax Error: TypeError: this.getOptions is not a function
安装sass时,报错: Syntax Error: TypeError: this.getOptions is not a function原因是安装的版本过高。先卸载: npm uninstall node-sass sass-loader -D再安装低版本:npm i -D node-sass@4.x sass-loader@8.x原创 2021-11-16 12:24:30 · 619 阅读 · 0 评论 -
CSS使用::-webkit-scrollbar设置滚动条样式
修改某个容器的滚动条样式.scrollDom::-webkit-scrollbar { width: 6px; // y轴 height: 6px; // x轴}.scrollDom::-webkit-scrollbar-track { background-color: #f0f0f0;}.scrollDom::-webkit-scrollbar-thumb { border-radius: 3px; background-color: rgb(178, 178, 186);原创 2021-11-10 11:44:14 · 695 阅读 · 0 评论 -
实战:从后台返回的数据中下载文件
/** * 从后台返回的数据中下载Excel表格 * @param {*} blob // 后台返回的文件流 * @param {*} fileName// 下载的文件名 */export const downloadFn = (blob, fileName) => { const url = URL.createObjectURL( new Blob([blob], { type: 'application/vnd.ms-excel' // 下载文件的MIME类型原创 2021-11-10 11:31:02 · 176 阅读 · 0 评论 -
实战:element-ui 树形控件之点击单选或多选
效果图:重点:如果需要对Tree节点进行过滤筛选,调用 Tree 实例的filter方法,参数为输入的关键词。需要注意的是,需要设置filter-node-method,值为过滤函数。具体如下:HTML部分:<el-tree ref="tree" :data="treeData" :expand-on-click-node="false" :props="defaultProps" :filter-node-method="filterNode" @nod原创 2021-11-02 18:49:41 · 1340 阅读 · 1 评论 -
实战:element Tree 树形控件之过滤树节点
效果图:重点:在需要对节点进行过滤时,调用 Tree 实例的filter方法,参数为输入的关键字。需要注意的是,此时需要设置filter-node-method,值为过滤函数。具体如下:在这里插入代码片原创 2021-11-02 18:21:36 · 3480 阅读 · 0 评论 -
实战:element ui 中的表格表头添加图标
效果图:重点:使用 slot=“header” 插槽<el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="date" label="日期" align="center" /> <el-table-column prop="name" label="员工姓名" align="center" /> <el-table-column prop="dep"原创 2021-10-27 12:32:33 · 3004 阅读 · 0 评论 -
实战:JS下载图片
/** * 获取图片的 base64 编码 * @param image 图像对象 * @return {string} 返回已编码的 base64数据 */const getImageBase64 = image => { const canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height const ctx = canvas.getC原创 2021-10-27 10:21:29 · 9823 阅读 · 0 评论 -
实战:JS批量打包下载图片--(zip压缩)
1.下载两个插件npm i -s jszip file-saver2.封装函数如下:// 在JS文件中引入这两个插件import JSZip from 'jszip'import FileSaver from 'file-saver'/** * 获取图片的 base64 编码 * @param image 图像对象 * @return {string} 返回base64编码 */const getImageBase64 = image => { const canvas原创 2021-10-27 10:16:25 · 4305 阅读 · 2 评论 -
实战:element-ui 树型控件自定义图标(给节点添加图标)
效果图:html:<el-input v-model="searchVal" placeholder="请输入关键词" clearable style="margin-bottom: 12px" /> <div class="treeBox"> <el-tree :data="sourceData" node-key="id" default-expand-all :expand-on-click-n原创 2021-10-22 15:42:56 · 6956 阅读 · 2 评论 -
小程序webview与H5页面之间的通讯,将页面截图保存到手机相册
小程序页面,通过webview 嵌入的H5页面<template> <web-view @message="postMessage" :src="url"></web-view></template><script>export default { data() { return { imgBase64: "", url: "http://192.168.111.178:8080/H5Page".原创 2021-10-11 14:50:30 · 2142 阅读 · 0 评论 -
实战:在vue3.0引入echarts的正确姿势
1.下载 echartsnpm i -s echarts2.在main.js中引入import { createApp } from 'vue'import App from './App.vue'// 引入 echartsimport * as echarts from 'echarts'const app = createApp(App)// 全局挂载 echartsapp.config.globalProperties.$echarts = echartsapp.mo原创 2021-09-30 18:30:36 · 15101 阅读 · 5 评论 -
使用 html2canvas 插件实现网页截图(将html保存为图片)
1.下载 html2canvas 插件npm i -s html2canvas2. 封装 html2Canvas.js,比如src/utils/html2Canvas.jsimport html2canvas from 'html2canvas'// 生成快照const snapshot = (dom, options = {}) => { // 设置放大倍数 const scale = window.devicePixelRatio // 传入的节点宽高 const w原创 2021-10-09 17:46:47 · 1004 阅读 · 0 评论