Vue
Vue
92huahua
每天积累一点点
展开
-
css样式穿透
在style中有scoped的时候修改样式,使用样式穿透的方式修改:1.父元素 /deep/ 子元素2.父元素 >>> 子元素原创 2022-02-14 11:07:10 · 333 阅读 · 0 评论 -
使用html2canvas实现HTML页面的echarts图表转成长图片
原创 2021-11-24 18:19:51 · 1095 阅读 · 0 评论 -
使用clipboard实现复制到剪切板功能(超详细~~)
原创 2021-11-19 16:31:34 · 4329 阅读 · 0 评论 -
vue中使用wangeditor实现富文本编辑(超详细~~)
先看看效果1.安装wangeditor包npm installwangeditor2.项目中使用// html中<div ref="editorElem" class="editorElem"></div>// script中<script>import Editor from 'wangeditor'export derault { data () { return { edi..原创 2021-11-19 16:04:00 · 1131 阅读 · 0 评论 -
ivewUI框架DatePicker点击空白区弹框收起
今天遇到一个问题就是,DatePicker组件点击其他区域无法收起的问题,后面查了下资料顺利解决,分享给大家!~~<DatePicker format="yyyy/MM/dd" :capture="false" type="daterange" style="width: 258px" placeholder="请选择有效期" v-model="searchTime" @on-change="getTime"></DatePicker>增加:capture="false原创 2021-11-16 10:10:09 · 1106 阅读 · 0 评论 -
vue2.x+ vue-cli4 + typescript+webpack项目搭建
1.环境检查1.检查是否安装node.js运行环境node -v2.全局安装vue-cli typscriptnpm i -g @vue/cli@4.2.3 typescriptvue -V检查安装情况3.全局安装webpack webpack-clinpm i webpack@4.x webpack-cli -gwebpack -v检查安装情况2.初始化项目使用命令 vue create 项目名,如下配置选择安装...原创 2021-07-27 20:44:01 · 359 阅读 · 0 评论 -
ivew Checkbox 组件阻止冒泡
<Checkbox@on-change='getCompareData(item)'@click.stop.native="()=>{}":disabled='item.disabled'></Checkbox>原创 2021-06-28 18:21:37 · 351 阅读 · 0 评论 -
ivew 的menu组件默认展开的处理
mounted(){this.$nextTick(()=>{this.$refs.menuName&&this.$refs.menuName.updateOpened()this.$refs.menuName&&this.$refs.menuName.updateActiveName()})},原创 2021-06-24 10:10:49 · 630 阅读 · 0 评论 -
i18n在vue项目中替换js文件中的文本
封装i18n.jsimport VueI18n from 'vue-i18n'import Vue from 'vue'Vue.use(VueI18n) // 通过插件的形式挂载// 引入ivew的国际化jsimport en from 'iview/dist/locale/en-US'import zh from 'iview/dist/locale/zh-CN'let getMyStorage = JSON.parse(sessionStorage.getItem('language原创 2021-05-19 17:09:41 · 1613 阅读 · 0 评论 -
vue3.x新特性总结(尝鲜总结!!!)
1. 新特性compositionAPI为vue应用提供更好的逻辑复用和代码组织reactivecomputedonMountedonUnmountedreftoRefswatherTeleport传送门提供一种简洁的方式可以指定它里面内容的父元素 Fragments//祖业可以拥有多个根元素 EmitsComponentsOption 1.原生事件会触发两次比如click 2.更好的指示组件工作方式 3.对象形式事件...原创 2021-04-21 17:47:16 · 250 阅读 · 0 评论 -
谷歌浏览器vue调试工具vue-devtools安装及使用
1.到github下载:git clonehttps://github.com/vuejs/vue-...2.在vue-devtools目录下安装依赖包:cmd中打开刚刚克隆文件的目录下: 在该目录下安装:npm install3.修改manifest.json文件将代码中 "persistent":false改成true4.安装完成后同在该目录npm run build5.扩展Chrome插件点击加载已解压程序按钮, 选择 vue-devtools ..原创 2021-04-14 12:09:39 · 377 阅读 · 2 评论 -
vue中图片遍历使用,图片的引入
HTML<div :class="['plan-item',activePlan === index ? 'planItemPlan' : '']" v-for='(item,index) in planList' :key='index'> <img :src="item.imgSrc"/></div>jsplanList: [ { title:'视觉引擎', imgSrc:re.原创 2021-02-23 17:02:36 · 405 阅读 · 1 评论 -
vue项目中实现词云图
首先看下效果图:实现步骤:一、安装包npm install vue-b2wordcloud --save二、main.js中引入包import VueWordcloud from 'vue-b2wordcloud'Vue.use(VueWordcloud)三、页面使用<template> <div class=""> <div class="warp-title word-cloud"> <!--.原创 2020-12-30 21:54:55 · 1576 阅读 · 0 评论 -
ivew/elment ui 中table组件合并单元格及多列合并
首先看下效果:原创 2020-12-28 16:30:05 · 418 阅读 · 0 评论 -
vue3.x的源码学习
一、迁出源码:git clone https://github.com/vuejs/vue-next.git二、安装依赖yarn --ignore-scripts三、生成sourcemap文件,package.json"dev":"node scrpts/dev.js --sourcemap"四、编译yarn dev原创 2020-12-16 20:51:48 · 220 阅读 · 0 评论 -
微信小程序---小程序中实现拖拽功能
wxml<view class="list"> <view class="warp warp-item" wx:for="{{typeList}}" wx:key="index"> <view class="icon" wx:if="{{edit}}" data-index="{{index}}" data-id="{{item.id}}" data-name="{{item.typeName}}" bindtap="del"> <imag.原创 2020-09-24 10:06:28 · 2339 阅读 · 1 评论 -
vue----i18n国际化使用教程
第一步:首先在自己的项目中安装 vue-i18n依赖包。这里使用NPM进行安装,安装方法如下:npm install vue-i18n --save-dev第二步:将i18n引入vue实例中,在项目中实现调用API和模板语法。现在在main.js中引入 vue-i18n。如下:import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'...原创 2020-12-08 21:37:29 · 478 阅读 · 0 评论 -
vue react 中的diff算法
说起diff算法,我们就得先说说虚拟dom这个概念.虚拟DOM就是开发框架的程序员,手动用js对象来模拟页面上的DOM元素和DOM嵌套关系 ,目的是为了实现页面的高效更新.那么问题来了,是如何实现高效更新的呢,所以就引申出了diff算法.diff算法从纬度上来分为:tree diff component diff 和element diff,但是diff算法核心还是递归,而且递归的时候是深度优先原则进行遍历....原创 2020-08-11 20:23:46 · 190 阅读 · 0 评论 -
vue的事件修饰符
.stop 阻止冒泡,在目标元素的加上例如: @click.stop = “函数名”.prevent 阻止默认行为 @click.prevent.capture 使用捕获事件模式 @在父元素身上加例如: @click.capture = “函数名.self 只当事件在该元素本身触发时触发回调,和stop的区别就是stop阻止自己以上的所有父元素的冒泡.once 只触发一次函数, @click.prevent.once = “函数名”...原创 2020-08-10 18:13:31 · 86 阅读 · 0 评论 -
Vue生命周期钩子的总结!
总结一下vue生命周期钩子的使用条件及作用:beforeCreate在beforeCreate钩子中,组件的data和methods以及页面的Dom结构都还没有初始化完成.created在这个生命周期中的时候,组件的data,methods已经有了,dom还没有渲染出来,此时可以发送ajax请求获取数据,可以拦截一些页面的路由跳转等beforeMount在beforeMount中时,模板已经在内存中编译完成,还没有真正的渲染到页面上,页面上没有真实的数据.mounted这是原创 2020-08-02 16:07:00 · 165 阅读 · 0 评论 -
Vue-Router的params和query传参的使用和区别
1.首先简单来说明一下$router和$route的区别//$router : 是路由操作对象,只写对象//$route : 路由信息对象,只读对象//路由跳转分为编程式导航和声明式导航//编程式路由跳转this.$router.push({ name:'hello', params:{ name:'word', age:'11' }})//声明式路由导航routes:[ { path:'/原创 2020-08-01 15:22:06 · 202 阅读 · 0 评论