element
周家大小姐.
这个作者很懒,什么都没留下…
展开
-
vuecli3 批量打印二维码
【代码】vuecli3 批量打印二维码。原创 2023-11-07 15:14:49 · 497 阅读 · 1 评论 -
vue筛选框封装
点击对默认查询条件之外的条件进行 增加或删除在使用的组件或标签加入:filtrateList="filtrateList"传入条件查询数组当前demo写在xk-page中,就以xk-page组件为例原创 2023-07-07 10:51:35 · 1533 阅读 · 0 评论 -
vue el-table自动无限滚动
原先方案是用el-table-column插件来实现但发现在el-table-column的原理是copy原数据做为第二份数据中show-overflow-tooltip会失效,所以换了个JS写法。原创 2023-05-23 14:47:52 · 2428 阅读 · 0 评论 -
echarts 多个series时自定义tooltip切换图例legend报错
bug:当series有两条数据,legend取消一条后hover到echarts中会报错。tooltip:下的错误代码。原创 2023-05-16 16:41:04 · 478 阅读 · 0 评论 -
vite+vue3配置vite.config.ts多页面入口,并配置多个env
需求:在一个项目有公共的依赖和组件,但是两个模块又没有业务上的关联,这个时候我们需要用到分包,我的env.test对应是mono2中的变量打包,根据人个需求使用在根路径下删除原来的index.html,然后在src下建两个目录分别为mono1,mono2如果页面都抽离成模块后记得改变,记得要修改文件之间的引用关系,接下来我们详细看项目配置方面的修改。vite.config.tspackage.json文件写入dev没有另做配置如果启动dev可能会找不到页面,只能使用dev:mono1或dev:mono原创 2022-06-03 14:17:58 · 6701 阅读 · 1 评论 -
vue3 动态加载el-icon图标
安装插件cnpm install @element-plus/iconsmain.js引入import { createApp } from 'vue'import App from './App.vue'import router from './router/index'import { store, key } from './store/index'import ElementPlus from 'element-plus'import 'element-plus/dis原创 2022-05-28 16:20:12 · 9355 阅读 · 5 评论 -
vuecli3+vite+typescript+element项目搭建
vite中文官网地址https://vitejs.cn/https://vitejs.cn/项目初始化地址:https://gitee.com/zhouyunfang_admin/vue3-typescript-vite-element/tree/req_1.0/项目搭建npm init vite@latest? Project name: » vue3-tsSelect a framework: » vueSelect a variant: » vue-ts进入项目目录..原创 2022-05-23 22:08:10 · 366 阅读 · 0 评论 -
遍历伪数组中的empty,undefined方法
需求:做用户拖拽效果,用户随意拖拽并放入其中的div,由于是一个数组,如果用户拖入到第三个div那么前两个就为伪数组了,当用户再插入到第二个div的时候如果去用for的话会跳过undefined伪数组最后踩用for of es6方法解决 for (let key of list) { index++ if (index == endIndex) { console.log('找到了', key, index, d..原创 2022-05-09 16:43:57 · 216 阅读 · 0 评论 -
vue 子页面监听vuex变化第一次发触发但是变化后不会监听只有手动刷新页面后才会有变化
有一个需求就是对每个用户的操作进行保存,我把数据存在vuex中,奇怪的是watch监听一开始是有变化的;但是数据改变后页面却监听不到,只能手动刷新页面数据才会实时监听到变化html:页面存储 this.$store.dispatch('videoMonitorSystem/getUserInfoVideo', { data: params })下面看错误代码"/* * @Author: your name * @Date: 2022-04-28 11:15:44 * @La原创 2022-05-07 10:48:40 · 1732 阅读 · 0 评论 -
vue 截图并保存到本地html2canvas
安装插件cnpm install html2canvas filesaver --save页面引入import html2canvas from "html2canvas"html使用 <span class="icon iconfont xk-icon-jietu" @click="handlePrint"></span>methods方法 handlePrint () { let htmlDom = document.原创 2022-05-06 10:17:00 · 688 阅读 · 0 评论 -
flv DOMException: Failed to read the ‘buffered‘ property from ‘SourceBuffer‘: This SourceBuffer has
点击左侧判断当前数组播放的个数有没有超出,如果有就替换第一个点是做替换的时候会报错解决方案:依赖下flv.js/src/core/mse-controller.js找到appendMediaSegment(),_needCleanupSourceBuffer ()这两个方法,在方法中加入以下代码 if (!this._mediaSource || this._mediaSource.readyState !== 'open') { return; }在页面flv cre原创 2022-05-02 18:05:27 · 4473 阅读 · 2 评论 -
vue中动态获取变量名并赋值
需求根据vuex返回的数据,动态针对每个data中指定的变量改为true但如果一个个if去手写就太麻烦了;所以前缀相同尾部为I做为结束方便使用效果: data () { return { video0: '', video1: '', video2: '', video3: '', video4: '', video5: '' } }, cuVal..原创 2022-04-29 17:00:58 · 4469 阅读 · 1 评论 -
vue 左侧栏拖拽右侧宽度不变;出现滚动条
demo地址:点击下载其中封装了自定义指令及公共组件的左侧菜单,菜单效果为双击,可搜索子节点用户需求,左侧菜单为一次加载出来;可以搜索树控件下所有的子菜单内容1.左侧菜单可以自由拉宽缩小;右侧内容不变,本人用到的方法是右侧div中嵌入router-view才能做到不缩放1.左侧菜单默认为200的宽;拉条为15的宽当小于200的时候右侧动态设置宽度,不让右侧空出来```viewsviews ├─ AboutView.vue └─ HomeView.v...原创 2022-04-23 14:22:47 · 2615 阅读 · 0 评论 -
element+vue下拉框加搜索功能
目录要树```componentscomponents ├─ TreeSelect2 │ └─ index.vue ```---TreeSelect2/index.vue<template> <div class="tree-select-item"> <el-select v-model="selec...原创 2021-12-22 09:35:04 · 1881 阅读 · 3 评论 -
vue+scss全局使用mixin方法
先自行安装scss或者安装如下1.0版也可npm install sass-loader@10.1.1 --save-devnpm install node-sass --sava-dev想要在vue-cli中全局使用 scss的全局变量和 @mixin样式混入,需要安装插件,然后在 vue.conf.js 中配置npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-devvue.原创 2021-11-03 15:18:12 · 2016 阅读 · 0 评论 -
vue+element 自定义指令弹框el-dialog拖拽
directive文件下目录结构el-drag-dialog ├─ drag.js └─ index.js drag.jsexport default { bind(el, binding, vnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog')原创 2021-11-03 11:50:49 · 426 阅读 · 1 评论 -
vue+element directive自定义指令根据用户角色设置有没有权限显示对应功能页面
directive文件下创建以下目录permission ├─ index.js └─ permission.js permission.jsimport store from '@/store'export default { inserted(el, binding, vnode) { const { value } = binding const roles = store.getters && s.原创 2021-11-03 11:18:15 · 358 阅读 · 0 评论 -
vue+element el-date-picker日期筛选选择7天以内及小于当天日期,如果先选结束时间那么开始日期不能大于结束日期并小于当前日期
需求:1.先开始日期,只能选大于当前日期,结束日期不能选开始日期这天,并小于前日期的后七天2.如果先选结束日期,要求结束日期可选为当前日期之后的日期,再选开始日期,开始日期不能选结束日期的那天,并开始日间不能大于结束日期,而要在当天日期的有效内代码如下: <el-row> <el-col :span="12"> <el-form-item label="布控起始时.原创 2021-10-28 10:28:25 · 1675 阅读 · 0 评论 -
vue computed计算属性对传入的px值进行rem计算并赋值
父组件: <yg-table-header :labelWidth="'84'" :list="searchList" @search="onSubmit"/>子组件: <label class="yg-header-span-label" :style="[setLabelStyle,setLabelWidth]">{{item.label}}{{ showSymbol ? ':' : ''}}</label> props: { labelWid.原创 2021-10-14 13:42:47 · 270 阅读 · 0 评论 -
2021-10-09 vue+element实现computed计算属性缓存
需求:如果有7,所以标签去掉,如果没有7就看有没有6,如果有6,对应6的这条数据标签为待审批,其它为空(5以上的数字数据)如果没有6就走5 <div v-for="(item, idx) in xklist" :key="idx" style="padding-top: 20px" class="border"> <div class="status" style="background-color: #e77628">原创 2021-10-09 13:39:32 · 268 阅读 · 0 评论 -
vue+echarts饼图让label文字换行
mounted() { this.initEcharts(this.pieChartList, this.index) }, methods: { initEcharts(item, index) { const _this = this _this.myEcharts = echarts.init(document.getElementById(`myChart${index}`)) ...原创 2021-09-17 09:20:26 · 3613 阅读 · 1 评论 -
vue+element实现下拉菜单并带本地搜索功能
需求:后台返回数组对像,前端组合成数组,根据name组合成一个个数组并把后台返回的值当成一个children推入数组,在数组中自定义属性备份数据防止搜索的时候改变原数组使得数组无法回退这里是用的vuex存储,因为多个页面使用同一个接口;所以没必要重复请请求src\store\module\metadata.js/* * @Author: your name * @Date: 2021-09-02 15:46:45 * @LastEditTime: 2021-09-16 17:39:53原创 2021-09-16 17:46:09 · 1349 阅读 · 0 评论 -
vue+element el-carousel轮播图,十条数组成一个轮播图,
<el-carousel direction="vertical" :autoplay="true" indicator-position="none" :interval='5000'> <el-carousel-item v-for="(list,index) in newDynamicList" :key="index" class="dynamic-item"> <div class="item-img flex" v-for="(it...原创 2021-08-19 15:59:30 · 1965 阅读 · 2 评论 -
vue+element 当el-table中使用el-checkbox全选视图不更新解决方法
加一个key就好了;代码:<template> <div> <el-form :model="ruleForm" :rules="rules" key="ruleForm" ref="ruleForm" label-width="130px"> <el-row> <el-col :span="8"> <el-form-.原创 2021-08-18 10:27:13 · 2695 阅读 · 0 评论 -
vue+element多层级菜单el-menu循环递归展示并默认激活
代码menu子组件<template> <div class="menu-content"> <!-- <el-menu @close="handleClose" :default-active="'0-0'" ref="menus" :default-openeds="openeds" mode="vertical" > --> <el-menu ref="menus" :default-active=".原创 2021-08-12 10:54:30 · 1649 阅读 · 0 评论 -
vue+element el-date-picker日期选择器限制选择近1年内(365天)日期并只能选择从开始日期到结束日期为一个月的日期
话不多说,上代码: <el-date-picker :picker-options="setEndTime" @change="signDateChange" v-model="data.date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="date"> </el-date-picker>js: data() { retur...原创 2021-08-11 16:16:14 · 4447 阅读 · 0 评论 -
vue el-form同时对多个表单进行验证 activated
看代码,因为我这是步骤条;可能和常规的有点不一样;大家根据需求改就可以resetFields,clearValidate清空和重置为二选一,所以不能同时使用<!-- * @Author: your name * @Date: 2021-08-03 15:25:06 * @LastEditTime: 2021-08-04 11:23:07 * @LastEditors: Please set LastEditors * @Description: In User Settings E.原创 2021-08-04 11:24:32 · 1366 阅读 · 0 评论 -
vue echarts 地图外边框阴影
这里部分写的假数据,根据需求修改 data() { return { myEcharts: null, scatterData: [ { name: '广州市', value: [ 113.280637, 23.125178]原创 2021-08-02 16:28:14 · 3485 阅读 · 2 评论 -
vue echarts 拆线图宽度不够tooltip被覆盖
解决问题: tooltip: { trigger: 'axis', backgroundColor: "#fff", //设置背景图片 rgba格式 textStyle: { color: "rgba(0, 0, 0, 0.65)" //设置文字颜色 }, .原创 2021-08-02 09:40:07 · 294 阅读 · 0 评论 -
vue env环境控制页面的显示隐藏
需求:打包不同的环境控制页面的渲染不同;这个不同与多个项目分开打包,这个是所有js,css都是共享的;只是在不同环境下;要显示的单个页面功能不同代码地址:切换主题皮肤与不同环境打包显示和隐藏部分页面上代码以下为页面结构.env.client.production,环境配置webpack.json文件配置页面使用...原创 2021-07-31 22:21:43 · 316 阅读 · 0 评论 -
vue动态创建多个echarts饼图(pie)销毁及监听窗口大小变化更新
需求(根据后台数据,动态创建多个饼图)假数据 leftList: [ { title: '停车总数', total: '4,677' }, { title: '对接成功', total: '4,677', v.原创 2021-07-30 16:13:23 · 767 阅读 · 0 评论 -
vue echarts pie饼图修改label文字颜色及改变标示线的长度,改变标示文字的颜色
最终效果图上代码–我这里是for循环出来的;因为可能有多个 <el-card class="box-card" v-for="(item , i) in leftList" :key="i"> <div v-if="item.title !== '停车场状态占比'"> <p class="box-title">{{item.title}}<i class="title-rbg-shadow">&.原创 2021-07-29 15:38:42 · 5397 阅读 · 0 评论 -
vue 自定义指令封装点击事件并插入DOM元素节点,并传参
需求:点击小图出现查看大图这是在element上进行修改html中使用v-click-preview-img指令 <el-image v-click-preview-img="{ licensePlate: item.licensePlate ,times: item.times,srcList: item.srcList }" class="imag" v-if="item.imgUrl" :src="item.imgUrl" :preview-src-list="item.srcList原创 2021-07-26 12:06:11 · 1478 阅读 · 0 评论 -
vue+element el-menu递归多层菜单$emit事件失效
父组件 <!-- 左边菜单 --> <left-menu @handleLeftMenu='handleLeftMenu' :menuList='menuList' />import LeftMenu from '@/components/leftMenu' data() { return { currentComponent: 'Dic', menuList: [ .原创 2021-07-19 12:10:07 · 1131 阅读 · 4 评论 -
vue el-table 动态修改row每行颜色
<div class="shop-modal-content"> <el-table :row-class-name="tableRowClassName" class="marketing-table-style-1" :data="gridData" :header-cell-style="{background:'#2D2F3F',color:'#FFFFFF'}"> <el-table-column align="cente...原创 2021-07-06 15:53:39 · 4909 阅读 · 1 评论 -
vue 使用is属性动态切换组件
点不同的rp原创 2021-06-15 19:24:49 · 248 阅读 · 0 评论 -
vue 嵌入iframe页面,获取iframe元素修改样式
<template> <div class="workbench-container"> <div v-if="idDev" style="width:100%;height:100px"> <div style="margin-left:-162px;margin-top:-90px;"> <iframe id="iFrame" ref="iframes" .原创 2021-03-25 11:18:43 · 11298 阅读 · 10 评论 -
vue 配置打包时间
vue.config.js chainWebpack(config) { config.plugin('html').tap(args => { const date = new Date() args[0].createDate = date return args })index.html <meta name="time" content="<%= htmlWebpackPlugin.options.crea..原创 2021-03-19 14:30:23 · 1363 阅读 · 0 评论 -
vue 获取当前url地址加端口号
location.protocol + '//' + location.host + '/portal/ztzx_workbench'原创 2021-03-19 13:59:49 · 4349 阅读 · 0 评论 -
vuex sotre请求阻止重复请求
为防止每次进行相同的请求我们可以先判断state中有没有该值如果有就直接赋值没有就重新请求const state = { userNames: {},}const mutations = { INSERT_USER_NAME: (state, val) => { state.userNames[val.code] = val.name },}const actions = { // 根据userCode获取userName getUserNameByU原创 2021-03-15 14:32:48 · 503 阅读 · 0 评论