vue项目
执剑、天涯
我的前端技术墙
展开
-
记录一个超好用的简化版vuex,高效避免vuex的繁杂性
1.首先创建一个store.jsimport Vue from "vue"//构建一个简易版的vuexexport const store = Vue.observable({ count:0})export const mutations = { setCount(count){ store.count = count }}2.使用import { store, mutations } from "../store/store";export原创 2021-08-05 22:50:50 · 160 阅读 · 0 评论 -
前端js调用文件上传框的方法
效果如图:代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript"> function F_Open_dialog() { document.getElementById("btn_file").原创 2021-07-20 18:04:10 · 1167 阅读 · 0 评论 -
vue项目通过颜色选择器,以及自定义透明度设置div背景色示例
通过引入el-color-picker后,最终效果如下图所示:见代码:<template> <div> <div> <h3> 属性设置: </h3> </div> <div style="margin-top:20px;margin-left:20px;"> <div style="display:flex;align-items原创 2021-04-25 11:23:15 · 1934 阅读 · 0 评论 -
vue-cli4前端实现下载本地Excel模板,以及下载静态文件的坑(实测有效)
vuecli2里面,下载静态文件方法:1. 我的我的;2. location.href=" …/static/1111.xls`"3. window.open等等;需要注意的是:cli2里面需要把要下载的文件放在static下面;但是现在cli已经出到4了,需要将文件放在public里面才不会被打包,但是同样的方法我们会发现却找不到文件,效果如图:结果经过我百般尝试发现;将路径改为:下载下载成功,...原创 2020-08-27 22:59:25 · 4160 阅读 · 6 评论 -
记录(综合百度所有方法实力填坑)vue旧项目使用webpack-dev-server搭建,windows系统下内存溢出导致的模块热更新失败问题
首先,在windows系统下,进入项目 npm run dev,报错young object promotion failed Allocation failed - JavaScript heap out of memory(新的对象升级失败分配失败-JavaScript堆内存不足)效果见图:然后我们通过修改加大设置max-old-space-size =10000,以及webpack-dev-server的目录地址为:./node_modules/webpack-dev-server/bin/we原创 2021-05-08 18:58:10 · 922 阅读 · 0 评论 -
记录一个vue 封装组件,处理样式的小技巧
记录一个vue 动态设置样式的小技巧:直接上代码:如下:<template> <div> vue样式中使用props接收的参数: <div class="box" :style="styleData"></div> </div></template><script>export default { props: { height: { type: Number,原创 2021-04-29 18:27:10 · 272 阅读 · 1 评论 -
vue项目中下拉选择器el-select实现全选功能
最终实际效果如下:代码如下:<template> <div> <el-select v-model="my_stars" multiple collapse-tags placeholder="请选择"> <el-option label="全选" value="0" key="0"></el-option> <el-option v-for="item in stars"原创 2021-04-25 12:44:37 · 435 阅读 · 0 评论 -
vue项目中下拉选择器el-select,选中某一项后如何同时获取其label、value以及其他值
最终实际效果如下:代码如下:<template> <div> <el-select v-model="fruit" @change="handleChange"> <el-option v-for="item in selectList" :key="item.whsCode" :label="item.fruitName" :value="item.fruitEnName原创 2021-04-25 11:58:00 · 1783 阅读 · 0 评论 -
vue项目折线图通过自定义formatter函数为tooltip提示框数据动态添加不同单位
首先引入echarts,效果如下:见代码:<template> <div> <div id="chartLineBox" style="width: 90%;height:100vh;border:1px solid red;"></div> </div></template><script>var echarts = require("echarts");export default {原创 2021-04-25 11:41:01 · 1170 阅读 · 0 评论