- 博客(21)
- 收藏
- 关注
RSS订阅原创 前端实现预览文件流
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
6036
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
2448
原创 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
397
原创 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
2724
原创 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
1945
原创 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
1762
原创 父级设置min-height最小高度子级设置100%，子级没有高度解决方案
//解决方式1.父级设置：display:grid;2.父级设置：display: table;3.父级设置：position: relative;子级设置：position: absolute;
2021-03-10 17:18:04
924
原创 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
639
原创 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
1643
原创 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
504
原创 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
3349
原创 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
6499
原创 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
1669
8
原创 echart饼图设置堆叠效果 实现包含关系/占比关系(某项占比100%)
echart饼图设置堆叠效果option = { legend: { orient: 'vertical', left: 'left', }, series: [ { type: 'pie', radius: '50%', data: [ {value: 1000, name: '全部'}, ],
2021-02-26 15:41:11
1962
原创 javascript中 Date类setMonth后月份不准确问题及解决方案
假如此刻时间为：2020-01-30let time = new Date().setMonth(month + 1)//此时time的月份会是3月//因为2月没有30号会自动向后进一个月到3月//解决办法：let time = new Date().setMonth(month + 1,1)
2021-02-26 15:25:06
1551
2
原创 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
13462
4
原创 nrm 源管理工具使用
nrm(NPM Registry Manager)用于管理npm的包源地址# 安装nrmnpm i nrm -g# nrm内置包源地址nrm ls# 使用淘宝源nrm use taobao# 添加私有包源地址nrm add dayup http://xxx.net/npm/registry/# 切换nrm use dayup
2021-02-26 14:37:22
123
原创 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
307
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人