Vue
文章平均质量分 57
艾小逗
这个作者很懒,什么都没留下…
展开
-
向npm发布自己写的vue组件,使用vite创建项目
向npm发布自己写的vue组件,使用vite创建项目。原创 2024-05-24 11:24:43 · 493 阅读 · 0 评论 -
chrome中使用AppEmit调用ocx使用文档,vue调用ocx
想要在chrome+Vue3项目内调用SDRdCard.ocx神思身份证读取器,因为ocx是IE浏览器内提供的,Vue3不支持IE浏览器。了解到有安装浏览器插件的方式去实现,但是chrome在2020年12月后不再支持flash(NPAPI),而微软的edge也不支持ActiveX。所以选了了使用中间件这种方式。原创 2024-04-16 10:44:58 · 1067 阅读 · 0 评论 -
基于antdv封装的特殊复杂表格,带通行描述信息、可展示通行的单元格信息、可跨页选择数据功能、分页功能、可编辑单元格功能
1. 可展示通行的单元格信息2. 可跨页选择数据功能3. 表单插槽、合计插槽、操作按钮区插槽4. 分页功能5. 接口内请求api6. 可编辑单元格7. 表格组件暴漏出的方法:查询、获取选中数据、接口返回数据、当前表格数据【设置可编辑单元格时获取数据】原创 2023-06-29 16:13:38 · 2383 阅读 · 0 评论 -
vue中监听关闭页面,过滤掉刷新页面
vue中监听关闭页面,过滤掉刷新页面原创 2022-07-01 11:38:57 · 673 阅读 · 0 评论 -
js发布订阅模式的简单实现基本流程及原理了解
js发布订阅模式的简单实现及原理了解event.on方法,是注册事件,将执行函数添加进eventObj 中,可注册多个事件event.off方法,是移除事件,将执行函数从eventObj 中移除 - 如果没有参数,移除所有事件 - 如果只带事件名参数,就移除这个事件名下的所有事件 - 如果带有两个参数,那么就表示移除某个事件的具体函数event.emit方法,是执行事件,执行某个事件中的所有执行函数......原创 2022-06-15 09:45:28 · 800 阅读 · 0 评论 -
使用vite创建项目及配置vue-router和vuex,安装使用sass/scss
使用vite创建项目及配置vue-router和vuex创建项目 vite+vue3命令:yarn create vite,输入项目名称,选择vue项目进入项目目录2. 安装vuex yarn add vuex@next3. 安装vue-router yarn add vue-router@next版本:vue3对应的vuex4和vue-router44. yarn && yarn dev 项目可以成功运行配置 vuex1.创建 src/store/index.js原创 2022-01-10 16:57:00 · 1785 阅读 · 0 评论 -
封装自己的toast组件,使用vue.extend创建构造器和$mount
标题封装自己的toast组件,使用vue.extend创建构造器文档:https://cn.vuejs.org/v2/api/index.html#Vue-extend此种方式主要是封装一些特别常用的组件,而在使用的时候无需再使用组件的地方写入组件标签,通过调用js方法就可以使用,展示页面效果普通方式:要使用一个组件需要 将 写在使用的地方vue构造器方式:通过js方法就能使用,不用写 标签使用方法:只提示文字设置回调及停留时间message: ‘提示信息’,onClose: ‘关闭时原创 2021-10-16 12:22:55 · 320 阅读 · 0 评论 -
vue根据接口返回动态渲染组件的实现方法
vue根据接口返回 动态渲染组件的实现方法使用了vue中的动态组件https://cn.vuejs.org/v2/guide/components.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6父容器<template> <template v-for="item in compList" :key="item"> <component v-bind:is="item.compKey" :compData="item.co原创 2021-08-03 11:47:36 · 2926 阅读 · 0 评论 -
elementui在table中使用el-popover删除操作
elementui在table中使用el-popover删除操作.vue<el-table-column label="操作" width="120" align="center"> <template slot-scope="scope"> <el-popover :ref="scope.row.id" placement="top" width="160" style="margin-left: 10原创 2021-06-16 17:22:24 · 1426 阅读 · 0 评论 -
Module build failed: SyntaxError: webpack运行vue项目,拓展运算符报错【解决办法】
ERROR in ./src/js/request.jsModule build failed: SyntaxError: D:/project_hd/luckDraw/src/js/request.js: Unexpected token (39:10)解决办法:安装依赖yarn add babel-preset-stage-3 -D添加配置{ test: /\.js$/, exclude: /(node_modules|bower_components)/,原创 2021-05-21 15:13:40 · 2504 阅读 · 2 评论 -
vue-tinymce的使用,粘贴文件上传,自定义文件上传,改base64转换成上传到服务器返回url
vue-tinymce的使用,粘贴文件上传,自定义文件上传,改base64转换成上传到服务器返回urlvue中使用<vue-tinymce v-model="itemForm.content" :setting="setting"/><script>export default { data(){ return { itemForm: { content: '' }, setting: { menubar: f原创 2021-05-12 18:49:08 · 1566 阅读 · 2 评论 -
vue打包区分环境,创建config文件,corss-env自定义全局环境配置,通过cdn引入js,css,不打包依赖模块elementui
vue打包区分环境,创建config文件,corss-env自定义全局环境配置,通过cdn引入js,css,不打包依赖模块elementui目录vue打包区分环境,创建config文件,corss-env自定义全局环境配置,通过cdn引入js,css,不打包依赖模块elementui1. 使用 `corss-env` 自定义环境变量,不使用vue自身的环境变量(1)安装依赖(2)配置`package.json`中命令(3)使用 `process.env._ENV` 接收启动时的环境变量2. 配置cdn引入原创 2021-04-15 11:50:42 · 477 阅读 · 0 评论 -
nuxt请求提示WARN Cannot stringify a function transformRequest,Maximum call stack size exceeded
WARN Cannot stringify a function transformRequest 16:46:55WARN Cannot stringify a funct原创 2021-04-14 17:12:28 · 3209 阅读 · 0 评论 -
vue指令处理图片加载错误,判断图片可否加载成功
v-real-img 指令全局注册自定义指令,用于判断当前图片是否能够加载成功,可以加载成功则赋值为img的src属性,否则使用默认图片在网络慢的时候,加载图片多的时候,可以达到占位图的效果使用方法:<img src="默认图片.png" v-real-img="真实图片.png">Vue.directive('real-img', async function (el, binding) {//指令名称为:real-img let imgURL = binding.value;原创 2021-04-09 18:13:41 · 2880 阅读 · 0 评论 -
vue.config.js基本配置,包括配置不打包的模块vue,elementui,通过cdn引入,提取css到单独的css文件,css、js添加hash值,修改端口号,配置跨域代理
vue.config.js基本配置,包括配置不打包的模块vue,elementui,通过cdn引入,提取css到单独的css文件,css、js添加hash值,修改端口号,配置跨域代理配置文件vue.config.js// 配置通过CDN引入的js/cssconst cdn = { externals: { 'vue': 'Vue', 'element-ui': 'ELEMENT' }, js: [ 'https://cdn.bootcss.com/vue/2.5.2原创 2021-02-24 17:39:40 · 2187 阅读 · 0 评论 -
vue打包多页面应用,使用 vue 2.6.11和vue-cli 4
vue打包多页面应用使用 vue 2.6.11和vue-cli 4项目目录中的 vue-router没有使用,项目目录中的vuex没有配置,在各个页面js中配置即可git地址:https://github.com/zshuai34/vue-pages演示样式:项目目录打包后的目录项目地址:https://github.com/zshuai34/vue-pagesvue.config.js代码let path = require('path')let glob = require原创 2020-09-18 11:35:04 · 1076 阅读 · 0 评论 -
vue-i18n国际化使用,vue-elementui中使用vue-i18n国际化多语言工具
vue-i18n国际化使用,vue-elementui中使用vue-i18n国际化多语言工具目录vue-i18n国际化使用,vue-elementui中使用vue-i18n国际化多语言工具1.安装2.main.js3.新建lang文件夹index.jszh.jsen.js使用方法一方法二1.安装npm i vue-i18n -S2.main.jsimport i18n from './lang' // internationalization// 修改vue引入elementuiVue.us原创 2020-09-16 15:13:04 · 518 阅读 · 2 评论 -
vue自定义弹出框,点击全屏显示
自定义弹出框title: 弹出框标题fullScreenIcon: { // 是否显示全屏按钮btnShow: { // 是否显示操作按钮closeBtn: { // 关闭按钮-文字submitBtn: { // 确定按钮-文字popWidth: { // 弹出层宽度使用方法<popContent v-if="dialogVisibleScore" :pop-width="1000" :full-screen-icon="true" :btn-show="fals原创 2020-07-14 17:46:58 · 8094 阅读 · 3 评论 -
elementUI table自定义表头弹框搜索,排序,显示tag标签
elementUI table自定义表头弹框搜索,排序,显示tag标签允许一种排序,多种搜索条件包括三种类别,添加了solt插槽,也可以自定义:输入框[input]多选[checkbox]范围值[from-to]目录先上效果图标签tags使用方法标签tags代码===== 分割线 =====搜索弹出框使用方法搜索弹出框 selectCont 代码store中 creditManage 代码utils/tags 代码先上效果图标签tags使用方法绑定普通标签数据,排序数据,关闭排序标签原创 2020-06-30 16:44:11 · 4450 阅读 · 8 评论 -
store中需要引入很多modules/*.js , 可以使用require.context,适用webpack和vite的写法
store中需要引入很多modules/*.js , 可以使用require.context目录require.context()原:store/index.js改:可以使用`require.context`require.context()require.context() MDNrequire.context(directory, useSubdirectories, regExp)// 例子require.context('./test', false, /\.test\.js$/);原创 2020-05-13 14:46:30 · 2130 阅读 · 2 评论 -
vue和elementUI中下拉选选中时触发方法,改变列表中选中数据,通过锚点定位进行滚动展示
vue和elementUI中下拉选选中时触发方法,改变列表中选中数据,通过锚点定位进行滚动展示实现:主要是运用了js锚点的方法,进行页面滚动到选中的列表显示出来;select的change事件触发锚点方法location.href= '#ID'效果图:方便观察,将select放在了列表下面完整代码:<template> <div class="abou...原创 2020-04-28 14:22:51 · 3530 阅读 · 0 评论 -
vue-router中query和params区别
vue-router中query和params传参区别目录$router 和 $routequery传参params传参$router 和 $route$router: router-实例属性 和 router-实例方法, 路由跳转的处理。$route: 路由对象属性, 当前路由的属性/参数。打印 $route 有一以下属性:{ fullPath: "/foo" ...原创 2020-04-27 10:12:11 · 666 阅读 · 0 评论 -
vue-router为history模式时,vue-cli构建项目打包出现404
vue-router为history模式时,vue-cli构建项目打包出现404当 /config/index.js 中配置如下时:assetsSubDirectory: 'static',assetsPublicPath: '/',vue-cli构建项目打包出现404解决办法:/build/util.js 中添加 publicPath: '../../'if (options.e...原创 2020-04-26 10:45:07 · 659 阅读 · 0 评论 -
vue项目打包后vendorjs太大,项目访问速度慢,设置webpack不打包的js
问题:vue项目打包后,vendor.js 达到800多KB太大, 服务器慢需要加载十几秒解决:通过使用CDN引用加速,不让webpack打包vue/vuex/vue-router/elementui/axios,vendor.js 变成 20几KB,加载速度提升很大方法index.html 引入CDN<script src="https://cdn.bootcss.com/...原创 2020-04-22 17:34:34 · 1748 阅读 · 0 评论 -
解决vue多个路由共用一个页面,路由传参不同,页面显示数据不同,重新加载数据
解决vue多个路由共用一个页面,路由传参不同,页面显示数据不同,重新加载数据配置 unitType判断路由路由配置 router/index.js:children: [ { path: 'pilotUnit', name: 'pilotUnit', component: _import('pilotUnit/index'), ...原创 2020-03-31 14:47:52 · 6116 阅读 · 0 评论 -
vue nodejs elementUI mysql express demo 入门前后端分离项目,包含登录注册,列表查询分页,请求头解决跨域
vue-nodejs-elementUI-mysql-express-demo 入门项目,包含登录注册,列表查询分页在学习过程中,自己编写的入门项目,有什么好的建议欢迎评论,互相学习。github地址 https://github.com/zshuai34/vue-nodejs-elementUI-mysql-express-demo本项目为入门项目,采用前(vue)后(nodejs)端分...原创 2019-12-09 15:49:40 · 1153 阅读 · 0 评论 -
nginx部署vue项目刷新404,查看官方文档,正常访问没问题,只有在刷新的时候出现问题
nginx部署vue项目刷新404,正常访问没问题,只有在刷新的时候出现问题vue-cli官网给出的解决方案:https://cli.vuejs.org/zh/guide/deployment.html#docker-nginxtry_files $uri $uri/ /index.html;server { listen 80; server_name lo...原创 2019-12-04 16:37:14 · 947 阅读 · 0 评论 -
vue-router判断页面需要登录router.beforeEach
配置vue-router,控制页面登录后可见,未登录跳转到登录login页面官网文档地址https://router.vuejs.org/zh/api/#router-beforeeachrouter/index.js_import为自定义js,就不放出来,直接import组件即可import Vue from 'vue'import Router from 'vue-router'...原创 2019-11-29 16:08:32 · 808 阅读 · 0 评论 -
elementui多选tree table树表格 组件化使用
使用elementui 中table实现多选树表格,可多选,可全选,本文将原来的进行了更改,适配自己的需求,查看原demo请查看https://blog.csdn.net/qq_32442967/article/details/103068920注:element-ui@2.5.4版本完美支持,在新版本elementUI中,默认不全展开时,会出现问题,在默认全部展开时不影响效果。样式:...转载 2019-11-14 18:18:24 · 4225 阅读 · 6 评论 -
elementui多选tree table树表格
样式:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">...转载 2019-11-14 15:56:31 · 5217 阅读 · 0 评论 -
Vue i18n简单用法
Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。更多详细的用法,参考 Vue I18n官网文档个人认为 Vue I18n 很有用,所以用博客记录一下,方便以后查找使用HTML<script src="https://unpkg.com/vue/dist/vue.js"></script><...转载 2019-10-17 14:46:12 · 378 阅读 · 0 评论 -
vue-router 导入页面方法
vue-router 导入页面方法无需在 router/index.js 文件中顶部 import 所有页面,方便简洁。工具类: import.js/* import utils */export default function _import (file, viewPath = 'views') { if (process.env.NODE_ENV === 'developmen...原创 2019-10-10 11:58:50 · 2540 阅读 · 0 评论 -
template or render function not defined.(已解决)
解决办法: 将 vue-loader版本降到 ^13.0.0 以下,之前的版本是 ^13.0.0 报错,改为 ^12.1.0 没有问题了描述:新创建的项目,配置路由添加一个页面,就报下面的错误信息template or render function not defined.报错信息刚创建的项目解决办法:将 vue-loader版本降到 ^13.0.0 以下,之前的版本是 ^13....原创 2019-10-10 11:42:06 · 32322 阅读 · 5 评论 -
vuex使用及总结
vuex小结import Vuex from 'vuex'Vue.use(Vuex)var store = new Vuex.Store({ state: { //可以吧state想想成组件中的data,专门用来存储数据的 //如果在组件中,想要访问 store中的数据,只能通过 this.$store.state.*** 来访问 count: 0 //存储的数据 }, ...原创 2019-08-25 22:21:19 · 172 阅读 · 0 评论 -
vue父子组件间互相传递数据
vue父子组件间传递参数1.父传子使用 props 向子组件传递数据。在父组件中定义 hMsg参数,v:bind 绑定childMsg的值为hMsg;子组件使用props获取父组件传递过来的数据parent.vue<template> <div> <h2>parent</h2> <Child1 :child1Ms...原创 2019-08-10 14:57:19 · 204 阅读 · 0 评论