vue
~万事屋
工作半年的小萌新
展开
-
vue创建环境变量
在根目录先创建三个文件文件名为 .env.development 开发环境(npm run serve)时运行的环境。文件内容为:NODE_ENV=developmentVUE_APP_BASE_URL=http://192.168.1.4:8000/文件名为 .env.devtest 测试环境(npm run build)时运行的环境。文件内容为:NODE_ENV=productionVUE_APP_BASE_URL=http://192.168.1.4:8001/文件名为原创 2022-02-18 09:21:37 · 612 阅读 · 0 评论 -
js清空json里的所有value值
//示例数据formData:{ zz: 1, zy: 2, px: 3, price: 4,}//清空方法for (var key in this.formData) { this.formData[key] = null}原创 2021-09-22 17:33:25 · 2325 阅读 · 0 评论 -
js拷贝文字
copy() { var txtEl = this.text;//选取你要拷贝的内容,我这边直接是文字了 var txtE2 = document.createElement("input"); txtE2.value = txtEl; document.body.appendChild(txtE2); txtE2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令.原创 2021-08-27 08:08:38 · 156 阅读 · 0 评论 -
vue导入全景图 photo-sphere-viewer
1.下载依赖npm install photo-sphere-viewer --savenpm install three --save2.页面使用<template> <div id="viewer"><div class="box" @click="next"></div></div></template><script> import { Viewer } from 'photo-sphere-原创 2021-08-26 17:39:07 · 333 阅读 · 0 评论 -
vue封装echarts柱状图
<template> <div> <div id="myChart" :style="{ width: width, height: height }"></div> </div></template><script>// import { baseurl } from "@/api/common/request";import * as echarts from "echarts";export原创 2021-07-07 17:45:46 · 336 阅读 · 0 评论 -
vue封装echarts折线图
子组件封装<template> <div id="myChart" :style="{ width: width, height: height }"></div></template><script>// import { baseurl } from "@/api/common/request";import * as echarts from "echarts";export default { props: {原创 2021-07-07 17:41:05 · 264 阅读 · 0 评论 -
实时更新vuex数据
当vuex里面的数据更改后,页面没同步更新,可以使用computed属性和watch属性例如:pickPoint为方法名,watch和computed的方法名必须一致computed的get与setvuex中是单项流,v-model是vue中的双向绑定,但是在computed中只通过get获取参数值,没有set无法改变参数值如果没使用get与set,直接return一个对象,就会报错 Computed property “XXX” was assigned to but it has no set原创 2021-06-29 10:54:13 · 2253 阅读 · 0 评论 -
封装element点击按钮上传功能
//子组件<template> <!-- --> <el-form-item :label="label"> <el-upload class="upload-demo" drag ref="upload" :accept="accept" :on-preview="handlePreview" :on-remove="handleRemove" :before-原创 2021-06-16 14:40:57 · 511 阅读 · 0 评论 -
js获取天气信息
调用接口http://wthrcdn.etouch.cn/weather_mini?city=地址注意:使用axios会直接请求失败,这边使用了jq的ajax(原因大概是axios没配置dataType: “text”)请求出来的是gzip格式,会显示乱码,下方代码即可获取天气var _this = this;$.ajax({ method: "GET", url: "http://wthrcdn.etouch.cn/weather_mini?city=焦作", headers: {原创 2021-06-16 14:28:46 · 2844 阅读 · 0 评论 -
封装element树状图输入框
效果如下(输入框包裹树状图,输入框失去焦点或者选中树状图的数据,树状图就消失)<template> <el-form-item :label="name"> <el-popover v-model="menuListVisible" ref="menuListPopover" placement="bottom-start" trigger="click" > <el-tree原创 2021-06-16 09:48:21 · 471 阅读 · 0 评论 -
父子组件传参
vue文件导入导出即为注册为组件示例:比如把输入框树状图注册为添加模型页面的组件(vue页面嵌套)inputTree和addModel同为vue文件,想要在addMode使用inputTree,仅需引进去inputTree即可。具体如下父组件向子组件传递数据父组件页面传递参数子组件接收参数子组件传递给父组件参数子组件页面父组件页面...原创 2021-06-11 11:36:41 · 47 阅读 · 0 评论 -
同域名下两个vue项目互相跳转
下载nginx,下载后找到conf里的nginx.conf文件,拖到编辑工具中然后更改对应的端口号然后把打包好的两个项目放到html文件夹中(只放dist文件夹中的内容即可)配置好后,然后双击nginx.exe启动服务打开网站:直接再浏览器输入localhost:8080/map或者localhost:8080/houtai即可然后再需要跳转的地方直接跳转就行window.location.href = "http://localhost:8080/houtai/#/home"..原创 2021-06-11 11:32:59 · 2844 阅读 · 3 评论 -
vue常用插件集合
vue常用插件集合vue-treeselect网址:https://www.vue-treeselect.cn/#vuex-supportvue-treeselect 是一个多选组件,具有对 Vue.js嵌套选项支持。vue-layerhttps://www.npmjs.com/package/vue-layer可拖动对话框,支持传入组件...原创 2021-05-12 09:14:19 · 410 阅读 · 0 评论 -
封装axios
封装axios封装axios封装axiosimport axios from 'axios';import { Message, Loading } from 'element-ui'import qs from 'qs'; //参数序列化,把数据格式转为 x-www-form-urlencodedlet BASE_URL = '', loadingInstance;let HOST = process.env.NODE_ENV;switch (HOST) { case 'devel原创 2021-04-22 15:31:40 · 64 阅读 · 0 评论