vue
山海一哥
为者常成,行者常至
展开
-
使用koa创建自己的服务展示html页面
【代码】使用koa创建自己的服务展示html页面。原创 2022-11-14 15:36:37 · 739 阅读 · 1 评论 -
侧边栏组件(elementUI)
参考其他资料进行修改。hidden当菜单不出现在侧边栏时设置isNest是否嵌套,是的话里面的el-submenu不在生成图标,即只有最外层的才会生成。<template><div v-if="!item.hidden"> <template v-if="hasNoChild(item)"> <el-menu-item :index="item.menuUrl" :class="{'submenu-title-noDropdown':!isNes原创 2021-07-16 11:04:59 · 889 阅读 · 0 评论 -
文件上传组件(elementUI)
elementUI提供了长传的组件,然而项目中可能多次用到,每次都用官网的修改,过于繁琐,封装成组件。<template><el-upload class="upload-demo" :action="uploadPath" :headers="fileHeaders" :data='uploadData' :show-file-list="false" :accept="accept" :on-success="handleSuccess" :on-error="handleErro原创 2021-07-16 10:46:37 · 1390 阅读 · 0 评论 -
远程搜索组件(elementUI)
<template><el-select v-model="selectVal" filterable remote :placeholder="placeholder" :remote-method="remoteMethod" :loading="loading" :disabled="disabled" @focus="clearPreList" @change="selectChange"> <el-option v-for="item in list" :k原创 2021-07-16 10:24:25 · 715 阅读 · 0 评论 -
修改组件默认样式之/deep/(less,sass)
在使用第三方组件时有时候我们想修改组件的样式,可以使用全局的方式,即不使用scoped。如果多处共用我们只需要统一修改,假如有多种类型呢?我们不得不另起一个名字。如果我们想要封装一个组件,定义的样式希望在该文件中生效,不影响其他组件,我们将使用scpoed的方式。这种方式去修第三方组件的样式往往是无效的,什么原因呢?怎么处理呢?使用scoped的方式生成的dom其实有额外的属性因为该属性的存在使得里面的样式在定义时无效。解决方式,在less或者scss等编译语言中使用/deep/或者在sty原创 2021-06-17 18:00:44 · 5521 阅读 · 0 评论 -
vue项目前端导出表格Export2Excel
直接上代码npm install -S file-savernpm install -S xlsxnpm install -D script-loader下载Export2Excel.js 文件,放在项目里import { export_json_to_excel as exportJsonToExcel } from '../assets/vender/Export2Excel' exportDataToExcel () { const tHeader = [原创 2020-10-26 13:18:46 · 922 阅读 · 0 评论 -
vue打包 报错vue-template-compiler版本不匹配(jenkins错误)
出现以上错误,多是package.json与package-lock.json中vue-template-compiler不匹配,更新相应的版本即可npm install vue@2.6.11 --save-devnpm install vue-template-compiler@2.6.11 --save-dev下面说另一个问题,使用以上方法后,本地ok。但是jenkins上打包后依旧报上面的错误,而打包代码中的package.json与package-lock.json中的 vue@2.6..原创 2020-09-14 16:12:08 · 1459 阅读 · 0 评论 -
vue中引用icon不显示
vue中assets里的icon在其他工具里使用相对路径时,有时候存在引用不到的问题,解决方案是通过import引入图片,在需要使用的地方使用该变量即可。举例,echart中使用图片时import bar from '@/assets/img/bar.png'const BAR = 'image://' + bar高德地图import icon from '../assets/icon/merge.png'new AMap.Marker({ icon: new AMap.Icon({原创 2020-08-25 13:55:28 · 2120 阅读 · 0 评论 -
文本过长,hover时提示框显示全部信息,否则不出现提示框
使用的是vuetemplate <ul class="list"> <li v-for="(item, index) in operateData" :key="index" class="list-li" @mouseenter="handleCellMouseEnter" @mouseleave="handleCellMouseLeave"> <span>{{item.time}}</span>原创 2020-07-28 17:37:51 · 1534 阅读 · 0 评论 -
Webpack的externals的理解
webpack官网介绍:防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。webpack的externals上面的信息是什么意思呢?你可以通过script方式引入后,在文件中直接使用$这里是没有问题的,如果你使用了eslint,它会提示你该变量未定义。但是如果...原创 2020-04-27 10:52:56 · 11962 阅读 · 0 评论 -
v-infinite-scroll无限滚动
网上搜索了很多,基本上都是指'vue-infinite-scroll'组件,其实如果你是elementUI项目的话,你可以直接使用v-infinite-scroll示例: <div style="height:100px;overflow: auto;" v-infinite-scroll="test"> <div style="height:200px">滚动...原创 2020-04-24 18:18:44 · 13615 阅读 · 0 评论 -
this.$nextTick使用技巧
这个方法基本上很少用到正如官网所言:Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用因此博主开始也觉得这个方法基本无用,因为如果需要dom更新后做些事情,完全可以在mo...原创 2020-04-24 18:02:53 · 1801 阅读 · 0 评论 -
vue递归组件的理解使用
官网介绍如何使用呢?新建SidebarItem.vue文件,内容如下<template><div class="menu-wrapper"> <template v-if="hasNoChild(item)"> <div :class="{'submenu-title-noDropdown':!isNest}"> ...原创 2020-03-29 19:56:13 · 1055 阅读 · 0 评论 -
element-Ui分页跳转后返回当前页(iview相同)
如果缓存较多内容请使用keep-alive,本文仅针对个别需要缓存的页面。由于每次打开都会重新加载页面的数据,因此在第二页(非第一页)的table中跳转后又从下一页返回,该页面会重新为第一页,解决方式有二种第一是使用keep-alive,配合v-router的导航钩子beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confir......原创 2019-01-16 14:21:12 · 6908 阅读 · 0 评论 -
使用v-model绑定vuex的state
注意事项,const store = new Vuex.Store({// …strict: true})在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。因此使用v-model后不要使用严格模式,而且严格模式不要在发布环境下启用严格模式!...原创 2019-01-16 09:22:35 · 4461 阅读 · 0 评论 -
vue路由如何传递当前行数据
在当前页面中,查看当前行数据,如果是通过弹框的方式,我们可以通过方法带的row,来展示当前行数据,但是如果是跳转到新的页面呢,我们如何在详情页拿到当前数据呢?通过后端提供的接口可以,通过浏览器存储机制也可以,其实路由本身就提供了一种方式,那就是动态路由,通过动态路由,我们可以把信息隐式的传递过去,当然在路由里面你并不需要写成动态路由的方式,这里只是借用动态路由的机制实现带当前row进行跳转如路由...原创 2019-12-17 17:03:58 · 920 阅读 · 0 评论 -
框架中自定义字体库使用说明以及用其他库修改框架的icon或者扩展icon
字体库相对来说比较简单,只是不常用可能会忘记,这里记录下步奏,以方便以后使用。一,去网上下载字体库,比如阿里图标库。二,将字体库放入本地的静态文件夹中。三,在本地的css中将文件夹中的css导入。该css文件是核心,定义了图标,四,参考字体库文件demo使用。使用时只需要把calss放到你想要的地方就可以啦。...原创 2019-08-02 10:36:14 · 828 阅读 · 0 评论 -
eslint 修改standard规则
eslint插件standard定义的规则object-curly-even-spacing对对象的支持并不是太友好,特别是在多个对象并列的时候,如下图所示那么如何修改standard的规则呢,方式如下 'rules': { // allow paren-less arrow functions "quotes": [1, "single"], //引号类型 `...原创 2019-10-16 17:03:48 · 2461 阅读 · 0 评论 -
vue中$event理解和框架中在包含默认值外传参
在vue中普通方法中默认带有event DOM事件如greet方法,如果是内联函数的话如warn方法,只需要在定义方法的地方同时传入**event∗∗即可,这里需要强调的是在iview中,这里用的是select组件,在其‘on−change‘事件中如果想要传入自定义的参数,使用直接传参的方式,获取的是传入的参数,那么如何获取到该方法默认的返回值(即不传参数时返回的默认选中值),这里使用∗∗e...原创 2019-05-30 10:15:27 · 28969 阅读 · 2 评论 -
webpack打包vue请求后台的几种方式
如图所示:第一种是利用wepack配置的代理房方式,第二种是修改请求的基础路径第三就是通过base标签来修改原创 2019-05-30 16:36:11 · 863 阅读 · 0 评论 -
JSON字符格式化后在前端展示或者格式化文本域的JSON
repeat (s, count) { return new Array(count + 1).join(s) }, formatJson (json) { var i = 0, il = 0, tab = " ", newJson = "", indentLevel = 0, ...转载 2019-06-21 13:17:03 · 2423 阅读 · 0 评论 -
vue中插件制作以及比较实用的方法
/** * 公共方法 */export default { install(Vue, options) { /** * 返回上一页 */ Vue.prototype.back = function() { this.$router.go(-1) }; /** * 设置cookie * @param nam...原创 2019-06-27 15:26:18 · 508 阅读 · 0 评论 -
关于vue响应式3级联动,iview选择组件问题的心得
最近做一个3级联动,考虑复用问题,将新建与编辑共用了很多的代码。但问题产生了,哪怕是此刻也有些不明白。弹框如下图所示假设一级为oneList =[1,2,3,4,5],二级为根据一级选中的值去跟新列表twoList=[],代码如下这便是选中一级之后,根据change事件去请求二级列表,初次写法仅在首航进行了数组清空的操作,没有this.editStatus代码块的判断,这种写法在创建时完美,...原创 2019-05-24 17:22:15 · 2491 阅读 · 1 评论