![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
敲之
我坐在你身边,手里摇着蒲扇,全世界的风,有我一半,也有你一半。
展开
-
前端实现预览文件流
1.图片类型文件//template<template> <img :src="src"></template>//scriptT.ajax({ url: xxx, beforeSend:xhr=>{ xhr.responseType = "blob"; // 返回类型blob }, dataFilter: e=>{ let flow = e.response let blob = new ..原创 2021-11-15 15:39:41 · 5700 阅读 · 9 评论 -
vue手动挂载组件到指定节点上
1.挂载直接引入的组件import DMap from './DMap.vue'const dmap = Vue.extend(DMap)let dmapComponent = new dmap({ // body...等指定节点 el: this.$refs.mapEl, store: this.$store, propsData: { // 传递参数 name: 'custom' }})// 监听事件dmapComp原创 2021-08-24 09:49:32 · 2393 阅读 · 0 评论 -
vscode自定义vue代码段 (自定义注释片段带动态时间)
{ "Print to vue temaplate": { "prefix": "vue-n", "body": [ "<template>", " <div class=\"wrapper\"></div>", "</template>", "", "<script>", "/*", " *@Author: 作者名", " *@Date: ${CURRENT_YEAR}-${CURRE.原创 2021-06-18 16:29:12 · 356 阅读 · 0 评论 -
Vue下 实时监听元素的高度变化
npm install element-resize-detectorimport elementResizeDetectorMaker from 'element-resize-detector'const erdm = elementResizeDetectorMaker()erdm.listenTo(this.$refs.box.$el, element => { console.log(element.offsetHeight);})相关api参阅:https:/...原创 2021-04-02 16:50:46 · 2652 阅读 · 0 评论 -
vue下处理企业微信授权页面重定向后回退空白问题
mounted () { //判断url是否存在code if(T.searchURL().code){ // 处理回退空白问题 window.history.pushState('_back',null,location.href) window.addEventListener('popstate',this.popstate,false) } }, destroyed(){ window.removeEventListe...原创 2021-03-11 09:04:34 · 1870 阅读 · 0 评论 -
vue下使用svga文件
<template> <div id="svgaplayerweb"> </div></template><script>import SVGA from 'svgaplayerweb'export default { mounted(){ this.loadSvga() }, methods: { loadSvga () { var parser = new SVGA.Parser('#svg.原创 2021-03-10 17:32:45 · 1705 阅读 · 0 评论 -
父级设置min-height最小高度子级设置100%,子级没有高度解决方案
//解决方式1.父级设置:display:grid;2.父级设置:display: table;3.父级设置:position: relative;子级设置:position: absolute;原创 2021-03-10 17:18:04 · 863 阅读 · 0 评论 -
js 获取浏览器类型
const getBroswer = () => { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (userAgent.indexOf("Opera") > -1) { return "Opera" }; //判断是否Opera浏览器 if (userAgent.indexOf("Firef.原创 2021-03-10 17:10:49 · 599 阅读 · 0 评论 -
js 获取cookie
const getCookie = (cname) => { let name = cname + "="; let cookieArr = document.cookie.split(";"); for (let i = 0; i < cookieArr.length; i++) { let cookieStr = cookieArr[i]; if (cookieStr.indexOf(name) != -1) return cookieStr.substring.原创 2021-03-10 17:07:11 · 1616 阅读 · 0 评论 -
js 平行数据转树形数据
const transData = (jsonData, idStr, pidStr, chindrenStr) => { let treeData = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = jsonData.length; for (; i < len; i++) { hash[jsonData[i][id]] = ...原创 2021-03-10 17:05:42 · 469 阅读 · 0 评论 -
vue + svg 绘制水波纹、波浪动画效果
效果:实现可配置图像大小、水面高度、波浪高度、波浪速度等<template> <div class="wave-svg" :style="`width:${width}px;height:${height}px;`"> <div style="width:100%;height:100%;"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="h原创 2021-03-10 16:55:45 · 3166 阅读 · 0 评论 -
Vue3.0获取路由的方法
Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例,然后通过 ctx 属性获得当前上下文ctx.$router 是 Vue Router 实例,currentRoute 可以获取到当前的路由信息<script> import { getCurrentInstance } from 'vue' export default { setup () { const { ctx } = getCurrentInstance()原创 2021-03-10 16:35:30 · 6436 阅读 · 0 评论 -
element-ui table 表格组件合并相同行
实现效果:实现代码:<template> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%"> <el-table-column prop="lv1" label="一级巡查项"> </el-table-column> <el-table原创 2021-03-04 14:07:21 · 1606 阅读 · 8 评论 -
vue3.0 watch 深度监听
vue3.0 watch 设置深度监听<script>import { watch } from 'vue';export default { props:["filter"], setup(props){ watch( () => { return props.filter }, state => { getStatistics(state.value) }, {原创 2021-02-26 14:50:24 · 13199 阅读 · 4 评论 -
vue计算属性computed方法传参
vue计算属性computed无法直接传参可以使用闭包函数实现传参数的需求<template> <span>{{fmtWeight(1)}}</span></template><script>export default { data() { return { weight: 100 }; }, computed: { fmtWeight() { return num原创 2021-02-26 14:28:24 · 286 阅读 · 0 评论