![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
艾码仕
愿归来仍是少年~
展开
-
在js怎么使用vuex
在js怎么使用vuex原创 2022-07-23 14:30:02 · 2670 阅读 · 0 评论 -
vue3 数组被赋值后重新初始化
比如我定义一个数组为ref被赋值后到提交数据完成,避免重新赋值时旧的数据还存在,得重新初始化如果是reactive原创 2022-07-12 20:28:04 · 1569 阅读 · 0 评论 -
VUE3引入Echarts
安装npm install echarts --savetemplate<!-- 统计图 --> <el-card class="box-card" shadow="hover" style="height: 310px" :body-style="{ padding: '10px' }"> <template #header> <div class="card-tlt">原创 2022-05-06 09:26:22 · 208 阅读 · 0 评论 -
vue-element-admin导入表格预览
在components/UploadExcel文件下 新建文件importExcel.vue前端渲染<template> <div style="display:flex;"> <el-button class="filter-item" type="danger" @click="handleDownload" style="margin-left:10px;">下载表格</el-button> <..原创 2021-09-17 19:22:43 · 471 阅读 · 0 评论 -
uniapp的uni.navigateBack返回页面带参数
let pages = getCurrentPages(); //获取所有页面栈实例列表let nowPage = pages[ pages.length - 1]; //当前页页面实例let prevPage = pages[ pages.length - 2 ]; //上一页页面实例prevPage.$vm.searchVal = 1211; //修改上一页data里面的se...转载 2020-01-20 17:38:21 · 1753 阅读 · 0 评论 -
常用的flexbox布局----flex属性
flex(flex items)属性这个属性定义在子元素中,是flex-grow、flex-shrink、flex-basis这三个属性的缩写。默认值为“0 1 auto”:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>flex<...原创 2019-09-10 16:18:23 · 145 阅读 · 0 评论 -
vue中实现图片全屏缩放预览
基于photoswipe的vue图片全屏缩放预览插件:vue-photo-preview说明1.简化了photoswipe的默认设置2.取消了图片需设定尺寸的要求3.默认关闭了分享按钮4.简化了html结构安装npm install vue-photo-preview --savemain.js引入import preview from 'vue-photo-p...原创 2019-09-14 12:37:05 · 2291 阅读 · 0 评论 -
移动端点击输入框,弹出键盘,底部被顶起问题(vue)
这个问题相信做移动端开发的童鞋会有深刻体会,以前用jq开发时就很头疼这个问题,每次底部footer部分需要用position:fixed,如果页面内容不是很长,没有超出屏幕范围,那就还好,没有问题;一旦超出屏幕范围,当你点击输入框,弹出键盘时,底部固定定位的footer部分就会被顶起来,很丑!有木有。在键盘弹起时,页面高度变小,底部固定定位上升,所以我们只需要在页面高度变小时,隐藏底部foot...转载 2019-09-16 09:45:02 · 411 阅读 · 0 评论 -
vue 数据按条件重新加载时 不在顶部显示新数据
updated生命周期里面 1 2 3 updated() { window.scroll(0, 0); }原创 2019-09-20 15:29:29 · 214 阅读 · 0 评论 -
vue 华为浏览器兼容不了es6?
1. 安装babel-polyfillnpm i babel-polyfill -S2. main.js 直接引入import 'babel-polyfill'3.在 webpack 下 build文件夹 webpack.base.conf.js 下 entry 导入模块context: path.resolve(__dirname, '../'), entr...转载 2019-09-30 11:46:24 · 633 阅读 · 0 评论 -
使用vue+better-scroll实现横向滚动效果
前言还是由于项目需要,想自己造轮子,然而限于水平问题,就此作罢。于是寻找相关插件,最后发现了better-scroll这个好插件,不过在使用的时候依然遇到了一些问题,比如横向滚动效果死活出不来,后来经过一番研究,算是有点初入门槛了,实现的效果图如下(信我,能横向滚动),源码请点击这里开发步骤毫无疑问,第一步是安装better-scroll:npm install better-sc...转载 2019-09-10 14:59:29 · 1173 阅读 · 0 评论 -
vue.js点击判断是否已经登录
首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,否则就进入登录页面。{ path: '/shops/users', name: 'Users', meta: { title: '用户中心', requireAuth: tru...原创 2019-09-04 10:26:15 · 1032 阅读 · 0 评论 -
vue.js ios移动端软键盘收起后,页面内容留白不下滑
<input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //methods中添加: fixScroll() { let u = navigator.userAgent; let isiOS = !!u.match(/\(i[^;]+;( U;)? ...转载 2019-08-28 10:48:15 · 2141 阅读 · 0 评论 -
Vue中自动获取input焦点 苹果手机无效?
<input v-focus type="text" autofocus placeholder="请输入..." v-model="searchVal" class="input-search">import Vue from 'vue'Vue.directive('focus', { inserted: function (el) { consol...原创 2019-05-25 08:06:54 · 3332 阅读 · 0 评论 -
报 [Vue warn]: Error in render: "TypeError: Cannot read property 'goods_id' of null"
当我们运行 Vue 项目的时候,报 [Vue warn]: Error in render: "TypeError: Cannot read property 'stInfoCode' of null" 的错误我的错误提示检查 template 模板中后发现所有的用到的变量基本都定义了,图中的问题是说明用到的 stInfoCode 变量属性为 null ,仔细检查一下代码中用到...转载 2019-05-16 15:12:45 · 3016 阅读 · 0 评论 -
Vue.js 三级联动
先上代码,后面有说明html<select v-model="selectedProvince" class="itxt" name="loginname" tabindex="1" style="width:120px;border: 1px solid #bdbdbd;height:38px;line-height:38px;"> <optio...转载 2019-05-17 14:55:45 · 482 阅读 · 0 评论 -
微信内置开发 iOS修改键盘换行为搜索
在微信中搜索的时候,我们通常使用keycode=13来判断客户是否点击了确定。在安卓上,唤醒搜索框为确认键没问题,而ios就不敢苟同了,ios显示为换行,对于客户使用体验非常不好。解决方案:html代码。<form @submit.prevent action="#"> <input class="search_input" ref="i...转载 2019-05-27 16:08:52 · 223 阅读 · 0 评论 -
vue 移动端键盘搜索事件监听
1、首先注意,input的type="search" <input @keypress="searchGoods" type="search" placeholder="搜索商品">2、监听keypress事件(1)KeyDown、KeyUp 事件这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。(要解释 ANSI ...转载 2019-05-27 16:09:30 · 1303 阅读 · 0 评论 -
vue中实现省市区三级联动(V-Distpicker插件)
本次项目中使用了V-Distpicker 插件实现了省市区三级联动V-Distpicker项目文档地址 V-Distpickergit地址使用方法npm install v-distpicker --saveimport VDistpicker from 'v-distpicker'export default { components: { VDistpicker }...转载 2019-05-18 10:19:01 · 1436 阅读 · 1 评论 -
将border-right 的边框变短
显示成这样:css:<style>.main{width:400px;height:300px;margin:0auto;border:1pxsolid#ccc;}.border{width:10px;height:50%;background:red;float:right;position:relative;top:25%;bord...转载 2019-05-28 09:42:47 · 6294 阅读 · 0 评论 -
vue组件实践-可搜索下拉框
一、效果二、组件代码dropdown.vue<template> <div class="vue-dropdown default-theme" v-show-extend="show"> <div class="search-module clearfix" v-show="itemlist.length"> ...转载 2019-05-28 15:53:34 · 1104 阅读 · 0 评论 -
vue项目上线apache反向代理配置跨域
以vue项目上线请求聚合api接口为例,网站和网站之间请求数据是浏览器所不允许的,浏览器会认为这是不安全的行为,所以这就涉及到跨域。打开网站/www/server/apache/conf文件夹的httpd.conf文件,把这几行代码前面的注释删掉image.pngimage.png在文件后面加上这些代码,代码根据具体的接口自行修改配置代码.pn...转载 2019-06-15 14:56:22 · 1905 阅读 · 0 评论 -
手机端车牌号码键盘的vue组件
源码在https://github.com/Pinenutss/LicensePlate转载 2019-07-01 16:10:59 · 1643 阅读 · 1 评论 -
vue组件开发之用户无限添加自定义填写表单
<template> <div class="checkbox"> <div class="input"> <p v-for="item in inputs"> <span>自定义字段:</span> &l...转载 2019-07-01 16:12:08 · 330 阅读 · 0 评论 -
vue 光标默认聚焦
全局注册Vue.directive('focus', { inserted: function (el) { el.focus() }})局部注册directives: { focus: { inserted: function (el) { el.focus() } }}使用<input v-if="isS...转载 2019-07-08 14:37:45 · 2970 阅读 · 0 评论 -
vue-mobile-calendar使用疑问
安装npm install vue-mobile-calendar --save引用import Calendar from 'vue-mobile-calendar'Vue.use(Calendar)官方的写法是<template> <div id="demo"> <calendar @change="onChange"/...原创 2019-08-08 15:24:33 · 989 阅读 · 0 评论 -
vue中eventbus被多次触发(vue中使用eventbus踩过的坑)
转发至https://www.jianshu.com/p/fde85549e3b0Katherine的小世一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B。(我知道,小参数的时候可以通过路由的params或者query去传参数,或者大型数据可以用vuex来处...转载 2019-04-24 16:57:52 · 319 阅读 · 0 评论