vue
瘦瘦瘦瘦不了
这个作者很懒,什么都没留下…
展开
-
js - 在map中使用async await进行处理文件的操作
【代码】js - 在map中使用async await进行处理文件的操作。原创 2024-02-18 18:14:40 · 506 阅读 · 0 评论 -
vue 图片放大、缩小、旋转、滚轮操作图片放大缩小
图片放大缩小旋转原创 2022-12-05 13:40:15 · 3116 阅读 · 2 评论 -
vue 生产环境去除去除console.log
项目中打开babel.config.js文件 进行修改。原创 2022-10-18 13:44:32 · 634 阅读 · 0 评论 -
el-form 表单填写验证
【代码】el-form 表单填写验证。原创 2022-10-11 15:09:42 · 503 阅读 · 0 评论 -
el-date-picker禁止选择此时之前的日期时间
【代码】el-date-picker禁止选择此时之前的日期时间。原创 2022-10-11 14:59:37 · 3304 阅读 · 1 评论 -
路由监听 VUE
【代码】路由监听 VUE。原创 2022-09-27 16:33:09 · 209 阅读 · 0 评论 -
element ui文件上传
【代码】element ui文件上传。原创 2022-09-26 13:44:06 · 571 阅读 · 0 评论 -
前端循环下载多个PDF,数量丢失处理
浏览器下载多个PDF,数量缺失问题原创 2022-09-22 14:07:14 · 807 阅读 · 0 评论 -
Vue 监听路由及权限设置
账号权限设置,该页面无权限时跳转404页面。原创 2022-09-19 14:00:26 · 291 阅读 · 0 评论 -
关于登录进入首页再点击其他页面时页面空白,刷新后正常 vue
vue登录后跳转页面空白问题原创 2022-09-02 14:43:17 · 1274 阅读 · 0 评论 -
Element ui上传单张图片
代码】Element ui上传单张图片。原创 2022-08-03 11:11:40 · 735 阅读 · 0 评论 -
vue组件传值:子传父 $emit
案例-自定义事件案例-删除列表项在子组件中设置自定义事件,触发父组件的监听事件函数调用this.$emit(自定义事件名 XXX, 数据传递) 在父组件中定义事件监听函数,并引用子组件标签上 v-on 绑定事件监听。@自定义事件名=事件监听函数 <child @xxx="deleteHobby"> < /child>如图:将B页面(子)事件 传到 A页面(父)A页面引入B组件显示具体写法:代码如下:A页面(父组件)<!-- @自定义事件.原创 2022-05-26 16:48:33 · 377 阅读 · 0 评论 -
vue组件传值:父传子 props
案例-表格渲染如图:将A页面(父)传到 B页面(子)A页面引入B组件显示具体写法:代码如下:A页面(父组件)<tableChild :tableDataChild = "tableData"></tableChild><!-- <tableChild :tableData= "tableData"></tableChild> -->import tableChild from "./tableModule";expor.原创 2022-05-26 14:44:18 · 987 阅读 · 1 评论 -
vue组件传值:父传子 props传递的类型和写法
props写法方式:1.指定传递属性名 ,数组形式props: ['id', 'name','list'] //不限制数据类型 2.指定传递属性名和数据类型,对象形式props: { id: Number, name: String, isRequired: Boolean, list: Array, info: Object, addFn: Function }3.指定属性名、数据类型、必要性、默认值props: { // 基础的类型检查 (`null` .原创 2022-05-26 12:11:17 · 1760 阅读 · 0 评论 -
根据接口返回数字展示对应的状态文字
<el-button>{{status}}</el-button>methods(){ async getList() { const res = await this.$api.queryVoucherLog(参数); const {data} = res; this.tableData = data?.map((item) => { item.status = this.getStatus(item.status);原创 2022-05-10 10:57:13 · 379 阅读 · 0 评论 -
vue组件传值:非父子传值 $bus(总线)
比如将A页面中的事件传到B页面需求:管理后台右上角用户信息当B页面点击时需弹出确认框并请求接口判断;其他页面点击则直接跳转//A页面 navBar.vue<el-dropdown-menu slot="dropdown" class="user-dropdown"> <el-dropdown-item @click.native="jumpPage"> 任务明细 </el-dropdown-item> <el-dro原创 2022-05-09 18:54:12 · 957 阅读 · 0 评论 -
判断点击的是不是同一个内容,优化请求接口
data() { return { clickContent:null, content:"" } }; },if (this.clickContent== null) { console.log("第一次点击"); //请求接口 } else { if (this.clickContent != this.content) { console.log("点击的不同"); //请求接口 }原创 2022-04-29 11:36:04 · 158 阅读 · 0 评论 -
获取地址栏参数 验证地址参数 query
例:“https://baidu.com/?aa=zhangsan&bb=C080000003&cc=MBA&sign=CF24FBB255B0BE66EF0D151A”let searchs = window.location.search 获取?后部分在这里插入代码片function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$).原创 2022-03-01 16:31:12 · 248 阅读 · 0 评论 -
vxe-table处理分页
<vxe-pager align="center" size="mini" background :current-page="tablePage.currentPage" :page-size="tablePage.pageSize" :total="tablePage.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump',原创 2022-02-09 12:00:52 · 2722 阅读 · 0 评论 -
动态类添加,根据条件判断添加对应样式类
方式一:class="['其它类名(可选)', {'btn1': 判断条件}, {'btn2': 判断条件}, {'btn3': (item.status)==3}].btn1{ border: 1px solid #f2f6fc;}.btn2{ border: 1px solid #409eff;}.btn3{ border: 1px solid #E6A23C;}方式二:class="条件1 == 条件2 ? '添加类名' : .原创 2022-01-26 13:27:25 · 1230 阅读 · 0 评论 -
间隔X秒执行函数
节流:延迟X秒执行函数(在规定时间内执行一次)只允许一个函数在 X 毫秒内执行一次,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用。<button @click="save">保存</button>data(){ return{ timeout: null, }}, methods: { save() { if (this.timeout) { clearTimeout(this.timeout);.原创 2022-01-11 16:07:42 · 185 阅读 · 0 评论 -
npm run dev 启动一半卡住不动问题
因为这个项目是我用来平时写demo和测试的,没有关联仓库,不注意修改了啥也不清楚,再一次打开就一直启动不了,如图:重启不管用卸载依赖包重新安装不管用我要崩溃了…然后挨个注释路由组件,哎,找到问题了template只能存在一个根元素,这里不知道什么时候敲了个字母导致的错误以后遇到这个问题可以先从路由文件开始部分注释看一看...原创 2021-12-20 13:48:44 · 4302 阅读 · 5 评论 -
Element UI文件拖拽上传至oss(结合vxe弹框)
<el-button size="small" type="primary" @click="addFile()">新增文件</el-button> <vxe-modal ref="xModal" v-model="attachment" row-id="id" title="上传文件"原创 2021-11-24 10:13:25 · 415 阅读 · 0 评论 -
长列表虚拟滚动
<div id="app"> <div class="list-wrap" ref="listWrap" @scroll="scrollListener"> <div class="scroll-bar" ref="scrollBar"></div> <div class="list" ref="list"> <div v-for="item in showList">{{原创 2021-05-25 11:18:34 · 315 阅读 · 0 评论 -
手机查看本地的vue项目方法
host里填入自己的IP地址 把项目跑起来手机打开链接即可这里PC和手机要处在同一个网络下,如果给他人查看建议使用内网穿透内网穿透博文链接:链接: https://editor.csdn.net/md/?articleId=117114051.原创 2021-05-21 16:55:11 · 221 阅读 · 0 评论 -
手机查看或让别人查看自己的本地项目(内网穿透)方法
在本地开发项目时,只能供我们自己电脑的浏览器访问,或者处于同一个wifi下的手机访问。如果想让别人也访问到我们的本地服务器,让别人使用手机就能查看我们的项目效果,这里就需要用到内网穿透,内网穿透就是别人通过外网能够访问到我们本地的服务器。下面介绍自己用到的内网穿透方法一、使用uTools(很好用的一款工具),搜索内网穿透 下载链接: https://u.tools/.1)点击黑色logo进入插件中心2)搜索或到开发中查找内网穿透并安装插件3)本地创建服务器并运行 这里端口号我设置.原创 2021-05-21 16:43:38 · 5201 阅读 · 1 评论 -
关于vueX 及 对应写法
不使用 vuex 写法示例待定 <script> import request from '../../utils/request.js' export default { data() { return { initData:'初始化数据', indexData:{} }; }, computed:{ }, methods:{ async getIndexData(){ le原创 2021-02-19 08:41:03 · 313 阅读 · 0 评论 -
基于vue 旅游网移动开发
开发前准备项目配置 vue.config.jsconst path = require("path")function resolve (dir) { return path.join(__dirname,dir)}module.exports = { devServer:{ //运行时浏览器自动打开 open:true, proxy:{ "/api":{ target:"htt原创 2021-01-30 00:17:01 · 1156 阅读 · 0 评论 -
Vue-router 报NavigationDuplicated 的问题解决
出现这个原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以当没有回调函数的时候,错误信息就会交给全局的路由错误处理,因此就会报上述的错误。即使出现了这个错误,对我们的界面渲染也没什么影响,强迫症一点就可以采用下面代码直接复制过去或者降版本~~~路由跳转可能使用$router.push()方法或 $router.replace()//解决编程式路由往同一地址跳转时会报错的情况import Vue from "vue"import VueR.原创 2020-12-23 18:45:57 · 411 阅读 · 0 评论 -
vue--关于路由的相关配置
路由元信息当我们写网站界面时,头部和底部出现次数比较频繁,往往需要设置为公用的组件;但登录注册页面一般是不需要公用的头部和底部(直接去除头部底部信息或设置另外简单的底部),这时我们需要用到路由元信息例如以下代码,其他页面需要公用的头部底部,那我们可以取反去设置不需要的页面,通过meta:{}设置const routes=[ {path:"/test",component:test}, {path:"/home",component:Home}, { path:"/原创 2020-12-15 19:31:35 · 313 阅读 · 0 评论 -
vue版本4---vue.config.js相关配置
const path = require("path") //引入path模块//为项目的目录配置别名function resolve (dir) { return path.join(__dirname,dir)}module.exports= { outputDir:"xxx",// 当使用build进行生产环境构建时。生成的构建目录 //所有 webpack-dev-server 的选项都支持 devServer:{ port: 9000,原创 2020-12-14 20:51:27 · 108 阅读 · 0 评论 -
vue-关于路由的基本设置
安装:npm install vue-router步骤:1. 引入vue、vue-router 并注册为插件2. 新建路由(路径和组件的映射关系)3. 新建路由器4. 将路由注册给路由器5. 将路由器注册给Vue6. 为路由组件进行占位(内容显示在哪,占位就写在哪)注:嵌套的路由路径不能写 / 会被当作根路径处理< router-link >基于全局 路径要写完整相关代码:// 1. 引入vue、vue-router 并注册为插件import Vue原创 2020-12-14 20:00:29 · 189 阅读 · 0 评论 -
vue----404界面配置
上线时一定要为所有的404请求配index.html(静态资源服务器;后台接口服务器),是为了让history路由可以安全匹配运维和后台也要配置import contact from "../pages/contact"import notFound from "../pages/404"export default [ {path:"/contact", component:contact}, {path:"/",redirect:"/contact"}, {path:"*",co.原创 2020-12-11 20:57:40 · 914 阅读 · 0 评论 -
Vue使用代理处理跨域及注意点
webpack链接: https://webpack.docschina.org/configuration/dev-server/#devserverproxy.假设接口地址为:http://localhost:9000/api/contacthttp://localhost:9000/api/contactListhttp://localhost:8000/api/xxx配跨单域配代理: proxyTable: { "/api":"http://localhost:9原创 2020-12-11 19:58:04 · 144 阅读 · 0 评论 -
关于vue指令v-show,v-bind的使用
<style> .texts { color: #666; border: 1px solid #000; padding: 30px; } .flagBox { background: #f00; width: 50px; height: 50px; } .red, .原创 2020-12-02 20:48:18 · 448 阅读 · 0 评论 -
关于前端的那些事儿~
简述CSS的盒子模型:盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)两种方式:content-box:标准盒模型(W3C盒模型)border-box:怪异盒模型( IE 盒子模型)一般浏览器和IE9+默认值是content-box两者区别:content-box:padding和border不被包含在定义的width和heigh...原创 2020-07-21 18:31:53 · 349 阅读 · 0 评论