编程开发 - 教程之家

编程开发

分类导航：HTML/html5 CSS JavaScript PHP Python Java IOS .NET R语言 Rust Android Go语言鸿蒙OS C类语言综合编程正则表达式

76浏览

0评论

如何实现vue的tree组件

前言Tree一直是大家熟知的组件，做一些大型的后台管理系统都会用到。使用树组件可以完整的展现其中的层级关系，并具有展开收起选择等交互功能。效果节点可以无限的递归延伸
可...

2021-05-30 22:56:39

69浏览

0评论

如何正确解决VuePress本地访问出现资源报错404的问题

背景
最近发现好多小伙伴刚用VuePress，然后一build完就直接用本地浏览器访问，结果出现黑块。仅仅出现那种问题还好，给项目安装 vuepress-plugin-serve 插件就行了，
但是如果有需...

2021-05-30 22:56:38

60浏览

0评论

vue-calendar-component 封装多日期选择组件的实例代码

实现效果安装vue-calendar-component日历组件cnpm i vue-calendar-component --save //国内镜像引入import Calendar from "vue-calendar-component";export default { com...

2021-05-30 22:56:37

77浏览

0评论

解决vue下载后台传过来的乱码流的问题

后台返回的乱码流解决办法：请求方式用的是axios，主要加关键的 {responseType: 'blob'}axios封装export function postDownload(url, data) {　　return new Promise((resolve,...

2021-05-30 22:56:36

42浏览

0评论

Vue $attrs & inheritAttr实现button禁用效果案例

components/Button.vue<template> <div> <button :disabled="$attrs.disabled">点击</button> </div></template> <script> export default { inheritAttrs: false, }</s...

2021-05-30 22:56:34

71浏览

0评论

vue中利用three.js实现全景图的完整示例

粗暴一点,直接上代码:第一步:通过指令下载three.jsnpm install three -S第二步:
在组件中引用import * as THREE from 'three'第三步:html部分<div id="container"></div>js...

2021-05-30 22:56:33

116浏览

0评论

element中Steps步骤条和Tabs标签页关联的解决

步骤条和标签页的简单关联1.步骤条：

步骤条的acitve属性用来设置当前激活的步骤，类型为number<el-steps :active="active - 0" finish-status="success"> <el-step title="...

2021-05-30 22:56:31

67浏览

0评论

vue使用exif获取图片旋转，压缩的示例代码

<template> <div> <input type="file" id="upload" accept="image" @change="upload" /> </div></template><script>export default { data() { return { picValue:{},...

2021-05-30 22:56:30

71浏览

0评论

Vue router传递参数并解决刷新页面参数丢失问题

Vue Router 传参方式：
1. this.$router.push({ name: '模块名称', params: { // 各参数 } })
router.js：
export default new Router({ routes: [ { path: '/paramsPassing...

2021-05-30 22:56:29

82浏览

0评论

实用的 vue tags 创建缓存导航的过程实现

需求是要做一个tag，当切换页面的时候保留状态。效果图：思路既然涉及了router跳转，那我们就去查api 发现keep-alive，巧了就用它吧。这里我们用到了include属性，该属性接受一个数组...

2021-05-30 22:56:27

72浏览

0评论

vue表单验证之禁止input输入框输入空格

测试小姐姐让输入框不允许输入空格，安排。刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才...

2021-05-30 22:56:25

82浏览

0评论

vue基于Echarts的拖拽数据可视化功能实现

背景
我司产品提出了一个需求，做一个数据基于Echars的可拖拽缩放的数据可视化，上网百度了一番，结果出现了两种结局，一种花钱买成熟产品（公司不出钱），一种没有成熟代码，只能自己写了，...

2021-05-30 22:56:22

89浏览

0评论

vue+element_ui上传文件,并传递额外参数操作

需求：1、文件大小验证2、文件类型验证3、额外参数传输<template> <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUplo...

2021-05-30 22:56:21

49浏览

0评论

vue-router定义元信息meta操作

router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue'import NotFound fr...

2021-05-30 22:56:20

97浏览

0评论

在vue中使用inheritAttrs实现组件的扩展性介绍

1、首先我们创建一个input组件<template> <div class="inputCom-wrap"> <input v-bind="$attrs" /> </div></template> <script lang="ts">import { defineComponent } from...

2021-05-30 22:56:19

114浏览

0评论

vue中如何自定义右键菜单详解

在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下： <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.p...

2021-05-30 22:56:18

77浏览

0评论

基于vue项目设置resolves.alias: '@'路径并适配webstorm

在webpack的配置项中添加下面代码function resolve (dir) { return path.join(__dirname, dir)}webpackConfig = { resolve: { alias: { '@': resolve('src') } }}...

2021-05-30 22:56:17

83浏览

0评论

详解Vue3 Teleport 的实践及原理

Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了，除了这些比较亮眼的更新，Vue3 还新增了一个内置组件： Teleport 。这个组件的作用主要用来将模板内的 DOM...

2021-05-30 22:56:15

84浏览

0评论

对vue生命周期的深入理解

一.Vue生命周期简介官网：https://cn.vuejs.org/v2/api/#beforeCreateVue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、...

2021-05-30 22:56:14

79浏览

0评论

浅谈Vue使用Elementui修改默认的最快方法

相信大家都需要过，在Vue中使用Elementui的时候，遇到最多也最蛋疼的问题就是修改默认样式，接下来直奔主题；// template <el-progress :text-inside="true" :stroke-width="26"...

2021-05-30 22:56:13

113浏览

0评论

详解vue-cli项目在IE浏览器打开报错解决方法

首先要知道VUE官网已表明仅支持IE8以上版本（不包括IE8），css弹性布局flex各浏览器支持如下:假如项目用到弹性布局，则项目仅支持IE10以上版本。另外兼容其他低版本的，请另寻它法。...

2021-05-30 22:56:11

76浏览

0评论

vue 基于abstract 路由模式实现页面内嵌的示例代码

abstract 路由模式
abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实...

2021-05-30 22:56:09

70浏览

0评论

vue 在服务器端直接修改请求的接口地址

一个项目可能有很多环境，开发，测试，预生产，生产等环境，如果每一个环境都需要重新打包会显得比较麻烦，那么如何解决这个问题呢在vue和uniapp中以及其他框架下的都是可以按照如下操...

2021-05-30 22:56:08

137浏览

0评论

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

1.如果只使用config配置的相关js接口可采用如下方式引入执行 npm weixin-sdk-js --save局部引入在vue页面中 import wx from 'weixin-sdk-js';全局引入在vue 的main.js...

2021-05-30 22:56:06

64浏览

0评论

vue 数据操作相关总结

vue中有很多有关数据的操作方法，比如父子组件数据的传递，子组件修改父组件数据，props,computed,watch,sync等，今天就来总结一下这些操作方法的使用computed是计算属性
computed...

2021-05-30 22:56:04

75浏览

0评论

Vue与React的区别和优势对比

简单介绍
React--Facebook创建的JavaScript UI框架。它支撑着包括Instagram在内的大多数Facebook网站。React与当时流行的jQuery,Backbone.js和Angular 1等框架不同，它的诞生...

2021-05-30 22:56:03

65浏览

0评论

vue3.0实现插件封装

  最近公司有一个新的项目，项目框架是我来负责搭建的，所以果断选择了Vue3.x+ts。vue3.x不同于vue2.x，他们两的插件封装方式完全不一样。由于项目中需要用到自定义...

2021-05-30 22:55:56

67浏览

0评论

element-ui点击查看大图的方法示例

element-ui图片（查看大图），可通过 previewSrcList 开启预览大图的功能。写在element-ui表格中，使用作用域插槽循环图片<template slot-scope="scope"> <di...

2021-05-30 22:55:55

56浏览

0评论

8个非常实用的Vue自定义指令

本文在github做了收录 github.com/Michael-lzg…demo源码地址 github.com/Michael-lzg…在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令...

2021-05-30 22:55:54

96浏览

0评论

vue实现图片裁剪后上传

本文实例为大家分享了vue实现图片裁剪后上传的具体代码，供大家参考，具体内容如下一、背景目前负责的系统（商城后台管理系统）里面有这么一个需求，为了配合前台的展示，上传的商品图...

2021-05-30 22:55:51

68浏览

0评论

vue+elementUI动态增加表单项并添加验证的代码详解

参考elementUI官网以及网上的其他一些资料。话不多说，直接贴代码。
htmt部分：<div id="app" style="width: 500px;"> <el-form :model="environmentForm" ref="environ...

2021-05-30 22:55:50

104浏览

0评论

Vue中computed和watch有哪些区别

计算属性computed：
支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化 computed 属性值会默认走缓存，计算属性是...

2021-05-30 22:55:49

77浏览

0评论

vue监听滚动事件的方法

vue中监听滚动事件，然后对其进行事件处理，一般有：1. 滚动到顶部吸附； 2. 根据滚动的位置激活对应的tab键（锚链接tab键）这两种方式的处理都是可通过监听scroll来实现mounted(){　　...

2021-05-30 22:55:45

69浏览

0评论

Vue实现点击当前行变色

本文实例为大家分享了Vue实现点击当前行变色的具体代码，供大家参考，具体内容如下话不多说,先上效果默认第一行为红色,当点击第二行的时候,只有第二行变为红色代码如下:<!DOCTY...

2021-05-30 22:55:42

69浏览

0评论

VUE中鼠标滚轮使div左右滚动的方法详解

前言
技术点： addEventListener/attachEvent(传递参数)功能描述：鼠标停在div中，若div有x轴滚动条，则鼠标滚轮控制x轴滚动条横向滚动一、单个实现
1.定义变量data () { return {...

2021-05-30 22:55:41

108浏览

0评论

Vue解决移动端弹窗滚动穿透问题

一、问题描述
在移动端的H5页面中，我们经常会遇到 “点击按钮-->弹窗-->选择选项” 这样的场景。而在选项过多出现滚动条时，滚动滚动条至容器的底部或者顶部。再往上或往下...

2021-05-30 22:55:38

113浏览

0评论

vue图片裁剪插件vue-cropper使用方法详解

本文实例为大家分享了vue图片裁剪插件vue-cropper的使用方法，供大家参考，具体内容如下我在网上找了很多关于vue裁剪图片的文章，demo都太长了，实在是太长了。有些还都看不懂，最后...

2021-05-30 22:55:37

76浏览

0评论

Vue实现指令式动态追加小球动画组件的步骤

1. 小球组件
我们希望可以封装一个通用的小球动画组件,这个组件可以在任何地方调动,而且小球组件可以通过this.$ball({...props})这样的方式调用,让他在用法上接近element-u...

2021-05-30 22:55:36

78浏览

0评论

vue 通过base64实现图片下载功能

1. 使用场景
当我们处理图片下载功能的时候，如果本地的图片，那么是可以通过canvas获得图片的base64的，方法如下。但是如果图片的url存在跨域问题的话，下面的方法将行不通，这时候...

2021-05-30 22:55:35

79浏览

0评论

vue el-upload上传文件的示例代码

话不多说直接上代码<el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-...

2021-05-30 22:55:32

58浏览

0评论

vue实现滚动鼠标滚轮切换页面

本文实例为大家分享了vue实现滚动鼠标滚轮切换页面的具体代码，供大家参考，具体内容如下新项目产品被甲方的要求逼疯了，大概返稿了100+次吧，最后甲方网上找了个他们认为的比较有...

2021-05-30 22:55:30

82浏览

0评论

Vue如何跨组件传递Slot的实现

在开发过程中遇到这样一个问题，如何跨组件传递插槽。因为在开发类似树组件的过程中，插槽需要通过外部传递到树的根节点，然后通过根节点依次传递到各个叶子节点。那么如何把根节...

2021-05-30 22:55:28

44浏览

0评论

Vue 组件注册全解析

全局组件注册语法components中的两个参数组件名称和组件内容Vue.component(组件名称, { data: 组件数据, template:组件模板内容 })全局组件注册应用组件创建：Vue.compo...

2021-05-30 22:55:26

54浏览

0评论

vue 使用rules对表单字段进行校验的步骤

在实际开发过程中，发现以下的写法比较累赘，因为在后面的项目中，继续优化表单验证的方法，让代码更简洁。主要的修改是验证方法的修改和调用以前验证表单字段的最大长度，descriptio...

2021-05-30 22:55:22

94浏览

0评论

解决elementui表格操作列自适应列宽

业务需要前端根据用户权限动态显示对应按钮，直接把操作列的列宽写死的话，在按钮少的情况下不是那么好看，所以想到了一个骚操作...写死宽度时是这样的：开始给操作列绑定宽度属性:...

2021-05-30 22:55:21

114浏览

0评论

Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

我测试过很多遍,想要通过a标签的形式来直接点击url下载文件并重命名但是都失败了,最终只能下载却不能重命名所以换了java后台来修改名字.以下代码我做的网页是点击文件直...

2021-05-30 22:55:20

60浏览

0评论

vue 使用 sortable 实现 el-table 拖拽排序功能

本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能，具体内容如下所示：npm 下载：npm install sortablejs --save引入：import Sortable from "sortablejs";代码：<templa...

2021-05-30 22:55:18

57浏览

0评论

Vue仿百度搜索功能

简述学习vue的第二节，由于2.0版本并不向下兼容，视频中的不少内不能实现。下面列出一些主要知识点// v-on 可简写为@// 事件冒泡是指当点击div内部的button触发show1()时，必然会...

2021-05-30 22:55:17

56浏览

0评论

Vue.extend 登录注册模态框的实现

模态框是我们 UI 控件中一个很重要的组件，使用场景有很多种，我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建。文档中的解释是在最近在做一个常...

2021-05-30 22:55:16

72浏览

0评论

详解Vue的异步更新实现原理

最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有...

2021-05-30 22:55:14

首页 «805 806807808 809 »尾页

热门文章