Vue
LLL_LH
记录一些学习心得
展开
-
vue3全局配置截取方法-slice
vue3全局配置截取方法原创 2022-04-29 10:20:30 · 859 阅读 · 0 评论 -
vue html页面导出pdf
1、下载html2canvas、JsPDF// 将页面html转换成图片npm install html2canvas --save// 将图片生成pdfnpm install jspdf --save2、点击导出,导出内容<template> <div class="credit-result" ref="result"> <div class="drawer-contenr" v-if="query.type原创 2020-10-30 10:51:32 · 643 阅读 · 1 评论 -
uniapp显示base64图片
<image :src="'data:image/jpg;base64,' + qcCode"></image>如果图片还是不能显示,有可能base64代码换行,要去除换行qcCode =qcCode.replace(/[\r\n]/g, "");原创 2020-08-21 10:06:19 · 9179 阅读 · 4 评论 -
Vue线上使用cdn加速
1、public/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> &l原创 2020-08-08 14:55:36 · 963 阅读 · 0 评论 -
simple uploader 对上传文件校验
simpleuploader的具体方法使用方法看官方文档,这里记录一下对上传的文件的校验<uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-added="onFileAdded" @complete=原创 2020-05-22 11:44:45 · 1393 阅读 · 1 评论 -
vue3打包去除console.log
vue.config.jsconfigureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true } },...原创 2020-05-07 17:28:50 · 922 阅读 · 0 评论 -
vue-cli3实现本地模拟数据请求
首先,搭建后vue项目框架1、在public文件夹下准备一个test.json,用来模拟的请求数据{ "code": 1, "msg": null, "data": [ { "name": "赵一", "id": 10 }, { "name": "钱一", "id": 11 }, { ...原创 2020-04-29 13:51:56 · 867 阅读 · 0 评论 -
vue页面上传多张图片,传下标获取对应的值
<div v-for="(item,index) in imagesList" :key="index"> <el-upload class="avatar-uploader avatar-uploader-imagesUrls" :action="logoUrl"...原创 2019-12-23 15:05:54 · 1109 阅读 · 0 评论 -
vuex的基础使用
Vuex 应用的核心就是 store,含着大部分的状态 (state)Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mu...原创 2019-12-20 17:41:38 · 197 阅读 · 0 评论 -
vue-infinite-scroll使用
1、安装npm install vue-infinite-scroll --save2、使用main.jsimport infiniteScroll from 'vue-infinite-scroll'Vue.use(infiniteScroll);3、使用<ul> <li v-for="(item, index) ...原创 2019-12-17 22:07:29 · 537 阅读 · 0 评论 -
vue+elementui身份证验证
1、js// 身份证验证 isCardID (rule, value, callback) { console.log(value) if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) { callback(new Error('你输入的身份证长度或格式错误')) } //...原创 2019-12-11 16:43:30 · 2231 阅读 · 3 评论 -
vue给表单添加enter回车事件
@keyup.enter.native="login()"@keyup监听键盘事件.enter为vue定义的按键码的别名.native覆盖原有的keyup事件<el-input type="password" v-model="ruleForm.password" :placeho...原创 2019-12-10 09:34:29 · 1845 阅读 · 0 评论 -
vue列表下拉触底加载
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>列表触底加载</title> <style> #main{width:600px;margin:20px auto;line-height:30px;} #main...原创 2020-01-07 16:33:08 · 1161 阅读 · 0 评论 -
vuecli3加typescript使用混入mixin
1、新建一个mixin.tsimport { Vue, Component } from 'vue-property-decorator'@Componentexport default class Mixin extends Vue { // table 默认分页 private pages = { page: 1, row: 10 } // 每页条数...原创 2019-11-29 13:53:44 · 1330 阅读 · 0 评论 -
Vuecli3加Vant创建项目
详情:Vuecli3https://cli.vuejs.org/zh/guide/installation.html1、安装Vue CLInpm install -g @vue/cli# ORyarn global add @vue/cli2、创建项目vue create my-demo // my-demo是项目名称3、项目创建完成后,进入项目目录cd ...原创 2019-11-22 14:46:21 · 484 阅读 · 0 评论 -
vue-cli3跨域请求代理配置
1、在vue.config.js页面module.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', assetsDir: 'assets', // webpack-dev-server 相关配置 devServer: { open: false, // 是否自动启动浏览器...原创 2019-11-20 12:01:02 · 918 阅读 · 0 评论 -
vueCli3加electron创建项目
1、项目创建vue create project2、运行vue ui打开图形化界面,安装vue-cli-plugin-electron-builder插件或者vue add electron-builder3、运行项目:yarn electron:serve打包项目:yarn electron:build...原创 2019-11-19 10:46:15 · 879 阅读 · 0 评论 -
vuecli3取消eslint校验代码
在创建项目时配置了eslint校验,现在要取消,打开.eslintrc.js文件module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', //'@vue/standard' ], rules: { 'no-consol...原创 2019-11-19 10:26:04 · 713 阅读 · 0 评论 -
electron在html页面require is not defined
问题:在html页面里面引用nodejs模块时报错,提示require is not defined<script type="text/javascript"> require('./render/render.js')</script>原因:在electron版本升级到5.0以后,BrowserWindow下的webPreferences 下的no...原创 2019-11-15 09:49:12 · 2276 阅读 · 0 评论 -
any Property 'setCheckedKeys' does not exist on type 'Vue | Element | Vue[] | Element[]'.
this.$refs.tree.setCheckedKeys(keys);报错解决办法:加类型断言(this.$refs.treeasany).setCheckedKeys(keys);原创 2019-11-12 15:52:00 · 853 阅读 · 0 评论 -
vuecli3开发中的regeneratorRuntime is not defined问题
1、发送请求过程中遇到的问题解决办法:1、安装npm i babel-plugin-transform-runtime -D2、在babel.config.js'plugins': [['transform-runtime']]3、运行,这时候会报this.setDynamic is not a function错误,原因是vue用的最新项目...原创 2019-10-21 13:07:09 · 1709 阅读 · 0 评论 -
vue移动端真机测试
1、打开命令提示符工具,输入ipconfig查看ip地址2、打开package.json,修改scripts下的dev3、npm run dev运行项目4、当pc和手机处于同一局域网,用手机访问ip地址,如:http://192.168.1.102:8080/#/...原创 2019-06-03 22:03:15 · 468 阅读 · 0 评论 -
vue实现简单的二级导航目录
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> <style> a{text-decoration: none;c...原创 2019-07-29 14:03:21 · 1257 阅读 · 0 评论 -
vue实现简单的全选全不选
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../../vue.js"></script> <style> * {margin: 0;paddin...原创 2019-08-06 16:02:47 · 266 阅读 · 0 评论 -
在vue中使用wangEditor富文本编辑器
1、下载npm installwangeditor2、创建editor子组件<template> <div class="editor"> <div ref="toolbar" class="toolbar"> </div> <div ref="editor" c...原创 2019-08-30 10:34:21 · 854 阅读 · 0 评论 -
在vue单文件组件引入其他css
<style lang="scss" scoped>@import "~@/assets/styles/main";i {font-size: 20px;}</style>注意:路径前面必须加~@,否则会出错原创 2019-09-03 09:20:47 · 1034 阅读 · 0 评论 -
vue+element-ui el-dialog嵌套table组件,ref问题,toggleRowSelection的undefined
项目需求,返回数据的时候,el-dialog弹窗里面的table组件需要设置默认选中。要设置选中,则要调用table组件默认的toggleRowSelection(row,true)方法,true默认选中。问题:el-diaglog组件里面的table组件时自定义的组件。<el-dialog title="选择用户" :width="dialo...原创 2019-09-05 16:50:18 · 8319 阅读 · 0 评论 -
js后台接口返回的excel文档流下载
<button onclick="download">下载</button>function download(){window.open(baseurl+ '/list/downlo')}原创 2019-09-12 14:55:28 · 1387 阅读 · 0 评论 -
vue删除数组对象不能实时更新
<iclass="el-icon-close"@click="deleteItem(index,ind)"></i>//删除选中的数据deleteItem(index,ind){console.log(index,ind)this.cList.data[in...原创 2019-09-17 15:31:45 · 2975 阅读 · 0 评论 -
vue axios全局使用
1、安装 npm install axios2、main.jsimport axios from 'axios'Vue.prototype.$axios = axios3、使用时this.axios.post('/list', { username: 'lili', age: 20}).then( res => { console.lo...原创 2019-09-24 16:53:39 · 169 阅读 · 0 评论 -
iview的slect选中获取value和label值
1、html<Select v-model="taskcode" @on-change="perChange" style="width:300px" :label-in-value="true"> <Option v-for="item in perList" :value="item.value" :key="原创 2018-12-04 10:59:39 · 11823 阅读 · 3 评论 -
vue入门学习(二)自定义指令
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title&原创 2018-12-05 23:10:29 · 142 阅读 · 0 评论 -
Vue怎么创建插件
1、新建一个vue插件/*定义一个插件*/(function() { //向外暴露的插件对象 const MyPlugin = {}; //插件对象必须有一个install() MyPlugin.install = function(Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function() { ...原创 2018-12-06 22:07:28 · 607 阅读 · 0 评论 -
iview表格改变字体颜色
<Table :columns="columns" :data="dataSource" border :loading="loading"></Table> export default {data() {return {columns: [{ title: '姓名', key: '', align: 'center', render: (h, par...原创 2019-01-04 15:23:59 · 6440 阅读 · 0 评论 -
vue运行项目http://localhost:8080无法显示此网站
解决办法:打开config文件夹下的index.js,将module.exports下的dev里面的host改为本机地址,在执行xxxx:8080即可如:host: '192.168.64.40', npm run dev192.168.64.40:8080...原创 2019-01-04 15:35:54 · 12215 阅读 · 0 评论 -
vue实现一个简单的筛选及排序
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title&原创 2018-12-01 22:56:12 · 1825 阅读 · 0 评论 -
给iview的select控件添加默认值
html部分:<template> <div> 清单类型 <Select v-model="model1" style="width:150px" @on-change="listTypeChange"> <Option v-for="item in listType" :value=原创 2018-12-01 15:48:29 · 5389 阅读 · 0 评论 -
iview的table实现全选
1、html<Table border height="500" :columns="columns" :data="dataSource" :loading="loading" @on-selection-change="selectRow" ></Table>2、jscolumns: [原创 2018-12-04 10:40:38 · 3626 阅读 · 0 评论 -
vue2.x轮播插件vue-awesome-swiper
1、创建分支首先在码云里“我的码云”下,点击创建的项目,进入项目,点击x个分支,在右上角点击新建分支,输入分支名称如:index-swiper,点击创建分支2、在本地更新分支这时候线上仓库有了index-swiper分支,但是本地仓库还没有,所以进入项目所在文件夹,点击右键git Bash Here,然后输入git pull这样本地仓库也有了index-swiper分支,输入git...原创 2018-08-29 22:32:49 · 588 阅读 · 0 评论 -
vue父子组件传值
1、父组件页面<template> <div>/*把city传递给homeHeader这个组价*/ <home-header :city="city"></home-header> </div></template><script>import HomeHeade原创 2018-09-05 21:40:48 · 190 阅读 · 0 评论