vue
星月I随心
这个作者很懒,什么都没留下…
展开
-
Vue-cli3中使用TS语法,以及使用例子
ts有什么用?类型检查、直接编译到原生js、引入新的语法糖为什么用ts?TypeScript的设计目的应该是解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化,不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马就能知道这个函数的用法,需要传什么值,返回值是什么类型一目了然,对大型项目的维护性有很大的提升。也不至于使开发者搬起石头砸自己的转载 2022-04-27 15:42:09 · 4059 阅读 · 1 评论 -
vue2-verify验证码imgUrl设置问题
在src/view/login/index.vue中使用组件<Verify :type="5" :show-button="false" :img-name="['1.png','2.png','3.png','4.png','5.png', '6.png','7.png', '8.png']" :img-url="'../../static/img/verify/'" @success=...原创 2022-04-11 14:57:52 · 1045 阅读 · 0 评论 -
computed学习笔记
在官方文档中,强调了computed区别于method最重要的两点computed是属性调用,而methods是函数调用 computed带有缓存功能,而methods不是计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值。let vm = new Vue({ el: '#app', data: { message: '我是消息,' }, methods: { methodTest() { .转载 2021-12-21 15:01:17 · 264 阅读 · 0 评论 -
从零开始, 用原生js写一个类似elementUI的日历
最近工作中经常用到日历这个组件, 以前大多是用moment.js或者dayjs去做的, 其实使用原生js也并不复杂.1.首先我们来认识几个这个组件中使用的new Date常用的方法 this.lastDay = new Date(y, m + 1, 0).getDate() // 获取指定月的最后一天也即每月多少天 this.lastMonthDay = new Date(y, m, 0).getDate() // 获取上个月多少天 this.firs...转载 2021-12-10 14:11:48 · 563 阅读 · 0 评论 -
VUEX学习笔记
1、state定义变量(可以动态创建)state: { tradecfgTree: getStore({ name: "tradecfgTree" }) || [] },2、mutations 给state赋值setTradeCfgTree(state, data) { state.tradecfgTree = data.res; }3、actions 异步方法调用api获取数据然后通过mutations赋值async getTradeCod..原创 2021-12-10 10:40:51 · 817 阅读 · 0 评论 -
vue刷新当前页面
vue刷新当前页面有挺多种方法,比如window.location.reload()或者this.$router.go(0)但是这两种方法是会出现一瞬间的白屏,体验不好,所以这里给大家推荐第三种比较好用的刷新页面的方法在app.vue的<router-view></router-view>加上v-if属性<router-view v-if="isRouterAlive"></router-view>在data里面加上isRo转载 2021-11-30 10:02:50 · 1777 阅读 · 2 评论 -
watch 学习笔记
watch:{ "aaa":{ immediate:true, // 首次加载的时候执行函数 deep:true, // 深入观察,监听数组值,对象属性值的变化 handler:function(){ }}转载 2021-11-02 08:50:19 · 75 阅读 · 0 评论 -
Vue中子组件中传参数给父组件中回调函数时,如果这个回调函数本身需要父组件的参数信息时怎么写?
父组件调用子组件:<Child v-for="(item, index) in items" @evenFn="value => handlEdit(index, value)">其中index是父组件所要传的参数 value是子组件回传回来的参数子组件触发evenFn:handle() { const value = 'hello' this.$emit('handlEdit', value) //这里的value传回父组件?}...原创 2021-11-02 08:45:37 · 334 阅读 · 0 评论 -
vue2实现自定义样式radio单选框
先上效果<div class="reply"> 主编已回复: <div class="radio-box" v-for="(item,index) in radios" :key="item.id"> <span class="radio" :class="{'on':item.isChecked}"></span> <input v-model="radio" :value="item.value" cla..转载 2021-10-22 15:33:31 · 2261 阅读 · 0 评论 -
vue自定义radio组件
原生html的radio标签太丑了,实际开发中都需要自定义radio。如何实现呢?思路很简单,我们需要另外做一套好看的样式,然后把原来的radio标签隐藏掉即可。静态结构components/myradio.vue:<template> <div class="my-radio"> <span class="my-radio__input"> <span class="my-radio__inne转载 2021-10-20 09:53:27 · 1593 阅读 · 0 评论 -
vue props组件传值时的类型及写法,data箭头函数的写法
props支持类型:type 可以是下列原生构造函数中的一个: StringNumberBooleanArrayObjectDateFunctionSymbol 额外的,type 还可以是一个自定义的构造函数props各种的写法:Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的原创 2021-09-14 09:22:45 · 1650 阅读 · 0 评论 -
element table 实现input输入框回车键跳入下一行,自动获取焦点
element table 实现input输入框回车键跳入下一行,自动获取焦点使用动态绑定ref this.$refs获取的是一个所有id组成的对象。使用Object.keys(this.$refs) //遍历这个对象,返回的是一个包含所有id组成的一个数组,让当前的index+1获取到下一个input的id.再根据这个id 使用this.$refs获取到这个input 使用focus<template slot-scope="scope"> .转载 2021-09-06 14:34:40 · 1103 阅读 · 1 评论 -
ant-design vue组件库使用后总结
1、form组件 自定义校验template: <a-form-item fieldDecoratorId="articleNumber" label='编码:' :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入编码!'}, {max: 60, message: '编码不能超过60个字符!'},{validator转载 2021-08-02 09:46:21 · 787 阅读 · 0 评论 -
webpack,node.js,vue.js集成的Ueditor
1、下载ueditor前端包下载库包,http://ueditor.baidu.com/website/download.html将\ueditor1_4_3_3-utf8-jsp\utf8-jsp目录移植到项目public\ueditor下2、改造public\ueditor\ueditor.all.js文件,使它支持common.js规范require("./ueditor.config");varzhCn=require("./lang/zh-cn/zh-cn");...转载 2020-08-11 17:19:11 · 245 阅读 · 0 评论 -
avue从vue文件中拆分option
<avue-crud :data="data" :option="option"></avue-crud><br>export default { data() { return { data: [ { name:'张三', sex:'男', date:'1994-02-23 00:00:00' }, { .原创 2021-06-16 10:11:24 · 891 阅读 · 0 评论 -
avue 统计合计 动态赋值
添加完相关方法配置:原创 2021-07-15 09:00:36 · 2680 阅读 · 1 评论 -
封装 element 的el-dialog弹窗组件
封装 element 的el-dialog弹窗组件封装组件使用组件<template> <uq-dialog :show.sync="activePopShow"> <span>你好</span> <div slot="title">这是title</div> <div slot="footer">这是底部</div> <.转载 2021-06-08 17:58:21 · 1187 阅读 · 1 评论 -
Vue前后端交互
<template> <div id="app"> <h3>1. Promise基本使用</h3> <input type="text" disabled="false" v-model="msg" /> <input type="button" value="发送定时任务" @click="handler" /> <hr> <h3>2. 基于Pr.原创 2021-06-04 11:01:43 · 100 阅读 · 0 评论 -
Vue相关指令的使用
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <!--防止闪屏--> <h3 v-cloak>{{msg}}</h3> <!--填充文本信息--> <p v-text="msg1"></p> <p v-html="msg2"></p&g.原创 2021-06-04 10:58:36 · 55 阅读 · 0 评论 -
vue直接访问外部接口设置代理,解决跨域(vue-cli3.0)
vue-cli3.0搭建的项目,平时访问内部接口配置了拦截器,今天需要调用天气预报的外部接口,发现跨域问题,通过配置代理解决。1、在vue.config.js中配置代理module.exports = { devServer: { proxy: { // 为天气接口配置代理,解决跨域 '/proxy/': { 'target': 'https://www.tianqiapi.com', //天气接口地址 'secure': false,转载 2021-06-02 17:12:56 · 5706 阅读 · 1 评论 -
vue axios封装两种post请求方式
第一种:项目本来是上传一张pdf或者图片,后来需求变化需要上传多个文件,但是之前上传使用的是转换base64然后传给后端,后端再去转化。这种方式用于多文件的话由于转换base64后体积过大,会造成请求时间过长,上传时间过长等等问题。所以需要改造,上传文件需换成文件流形式,需要换成FormData形式。由于项目所有post接口之前都定义为默认请求头'application/x-www-form-urlencoded'而FormData需要'multipart/form-data'。所以对项目封装的axi转载 2021-04-27 14:18:27 · 4319 阅读 · 0 评论 -
ant design vue a-tabs下是树结构的赋值和回显
表单中有tabs、内容是树结构的赋值和回显// 以下是传值时有传父节点halfCheckedKeys<a-form-model-item label="" :wrapper-col="{ span: 22 }"> <a-tabs :tab-position="mode" :activeKey="defaultActiveKey" @change="callback"> <a-tab-pane v-f原创 2021-04-08 23:05:45 · 1830 阅读 · 1 评论 -
ant design of vue a-tree组件子节点不完全勾选获取父节点的值
<a-tree showLine checkable v-model='businessSelectedRowKeys' @check="onBusinessSelectChange" :treeData='businessData' :checkedKeys="businessSelectedRowKeys" :autoExpandParent="true" > .转载 2021-03-23 09:23:00 · 3501 阅读 · 1 评论 -
ant-design-vue中tree增删改
ant-design-vue中tree增删改1. 使用背景新项目中使用了ant-design-vue组件库.该组件库完全根基数据双向绑定的模式实现.只有表单组件提供少量的方法.所以,在使用ant-design-vue时,一定要从改变数据的角度去切换UI显示效果.然而,在树形控件a-tree的使用上,单从数据驱动上去考虑,感体验效果实在不好.2. 当前痛点通过阅读官方帮助文档,针对树形控件数据绑定.需要将数据构造成一个包含children,title,key属性的大对象.这样一个对象,要么通.转载 2021-02-04 15:11:18 · 2898 阅读 · 1 评论 -
vue+iview+less 实现换肤功能
vue+iview+less 实现换肤功能项目搭建用的vue—cli,css框架选择的iview1、首先安装less支持npm install --save-dev less-loader less然后去build文件夹下的webpack.base.conf.js文件中,添加对.less的支持2、准备工作做好了,开始换肤2.1新建一个文件夹styles,在里面新建一个文件theme.less定义一个.theme()方法,写上需要的颜色参数如图:2.2 styles文件转载 2021-01-27 09:23:53 · 472 阅读 · 0 评论 -
iview中tree的自定义样式高亮当前点击项问题
iview的tree功能真的很简陋,提供的API又很少。 如在树的文字边上增加图标的API也没有,只能自己自定义了。自定义后 selected的样式就丢失了,包括api中的选中事件也失效了,需要自己加上。参考了下网上的做法,一般都是自己写一个单击事件,并加上样式。1.Tree标签上增加render属性在Tree标签上 增加render属性,使用的是renderContent()方法<Tree :ref="tree" :data="treeData" :render="renderC.转载 2021-01-27 09:18:40 · 901 阅读 · 0 评论 -
将Vue页面导出为pdf格式并进行下载
1.使用npm下载两个插件a.将html页面转换成图片npm install --save html2canvas b.将图片生成pdfnpm install jspdf --save2.在utils文件夹中创建一个名字叫个htmlToPdf.js的文件,内容如下:// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default { install(Vue, o转载 2020-08-20 15:23:23 · 2462 阅读 · 2 评论