Benz_s600的博客

关于vue/vue3做锚点定位效果

uniApp中使用彩色icon

如图所示，通过拖动来改变表单的宽度。但实际上，这边并不是表单的边框，而是一个单独的组件。通过监听鼠标的down，move以及up事件。我们可以单独的写个组件handle.vue。<template> <div class="x-handle" @mousedown="mouseDown"></div></template><script>export default { name: "XHandle", data() {.

<template> <div class="demo"> <ul class="fp-box"> <!-- 需要显示6列 --> <li ref="li" v-for="i in 6" :key="i"> <!-- 每列中的10行数字 --> <span v-for="num in 10" :key="num">{{ num - 1 }}</spa.

1.注册点击事件 @click=“goQ”2.data中定义是否全屏的一个布尔值data(){ return{ fullscreen:false } },3.点击事件goQ(){ this.fullscreen = !this.fullscreen let element = document.documentElement ; if(this.fullscreen){ if(documen

原文地址

1.脚手架创建项目vue create test-app2.安装axios 和 vantnpm instaill axios vant --save3.进入项目根目录新建两个文件.env.development (开发环境).env.production (测试环境).env.development { /* 文件中的内容主要是对开发环境和生产环境的请求接口路径做修改 */ NODE_ENV = 'development' VUE_APP_API_U

1.搭建vue项目,使用vue/@cli搭建的项目 vue create process（项目名）2.简单配置vue.config 由于是cli3版本 没有vue.config文件需要自己创建const path = require('path');const resolve = (dir) => path.join(__dirname, dir);const IS_PRODUCTION = ['production', 'prod'].includes(process.env.NO

1.api文件夹中定义的下载接口tpis:这里的responseType需要设置成blob//点击导出，导出数据表格export function exportTable(data,params){ return axios({ url:'/api/conversation/excel/export', method:"post", data:data, params:params, responseType:'blob', headers:{ 'Content-Typ

前言：记一个在使用element-ui过程中遇到的一个问题，项目是vue/cli组合elementui框架搭建的，项目采用了按需引入组件的形式，在项目中有个地方需要使用到message提示框，所以使用了这种方法然后报错，上代码main.js文件夹中import {Message} from 'element-ui';Vue.use( Message);报错截图且会报错undefined /下图就是按需引入message然后使用报错的错误修改使用方法main.js文件夹中import {

因为楼主使用的npm下载方式，此处也介绍的是npm的使用方式1.npm下载npm install animate.css --save2.进入vue的main.js文件中引入并注册import animated from 'animate.css' Vue.use(animated)3.项目文件中使用<div class="animate__animated animate__rubberBand ">我是测试</div>...

前言:在开发过程中，使用antd-desgin-vue框架的时候，使用a-time-picker这个时间组件时遇到了一个问题，业务：需要在编辑的时候先回显用户之前已经填过的时间，这个时候我刚开始的处理逻辑就是在mounted中请求完数据之后，直接赋值就行 ，看代码错误的姿势打开就是这个样子解决办法就是：先将这个值赋值为null，再用v-if判断栗子：最后 谢谢这位大哥~~~~~~!!!...

前言:因为项目中需要做一个类似于拖动坐标勾选划分区域的功能，所以使用到了vue-amap这个插件。首先我们还是要先来安装哈npm install vue-amap --save安装完成后，在vue的入口文件main.js中引入//引入高德地图import AMap from "vue-amap";Vue.use(AMap);// 初始化vue-amapAMap.initAMapApiLoader({ // 高德key key: "******************", //

问题描述:在使用antd-desgin-vue中的select插件时，需要传递自定义的参数，而官网提供的使用案例中有value和option值，达不到我们的需求，所以我们需要进行修改需要传递的参数值:后面的item.lable是我们需要传递的参数值，接收参数：...

问题描述:在开发过程中，使用antd-desgin-vue框架中的select选择器时，由于要展示给用户是中文，自己筛选条件时需要其中的key值，而官网给出的change事件中返回的value就是中文，这个并不符合我们筛选条件，所以我们需要获取到每个下拉项的key值数据结构:我们需要直接获取到 key值 而value返回的是 我们的name值，所以我们需要做下处理处理方法:option中的key值就是我们当前选择的一项的key值...

前言:公司项目使用vue框架搭建，但客户方需要使用antd-design-vue这个ui框架进行ui视图，所以我们在搭建的时候碰到了这样一件事情，使用的组件都是英文状态,比如我们想要这里变成中文的 页 怎么办呢1.找到官网https://www.antdv.com/components/locale-provider-cn/备注：官网显示的是有这两段代码,但是我们并没有下载，所以会报错，删除即可import moment from 'moment';import 'moment/local

1.安装elementuinpm i element-ui -S2.按需引入需要下载插件npm install babel-plugin-component -D3.然后，将 .babelrc 修改为： "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]4.将

1.npm install --save-dev sass-loader2.npm install --save-dev node-sass之后在vue脚手架的webpack.base.conf.js文件下，加入对应的代码{ test: /\.scss$/, loaders: ["style", "css", "sass"]}如果不能正常使用，那么就检查自己的sass-loader版本号 2.x版本的脚手架不能支持高版本的sass-loader...

前言，小编今天码代码的时候，运行项目的时候突然运行不起来了，报错如下网上各种百度，下插件啊啥的都弄了，就是没解决，后来在机缘巧合之下解决解决方法如下,安装了最新的sass就可以正常运行了，只是楼主这样解决了噢yarn add node-sass@latest...

前言：在做后台管理系统的时候，小伙伴经常会遇到多个页面会使用到表格，我们如果不进行封装的话，那么每个页面都得引用一次，并且书写一定的样式。所以，在这里我做了一个简装的基于elementui封装的表格。技术不好 ，望理解。1.子组件<el-table :data="data"> <el-table-column v-for="(col, index) in ...

前言：小编在编写过程中，利用elementui框架的dialog对话框做了一个弹框，想在组件中引用，但是一关闭弹框的时候就报这个错这个错是说不允许在子组件中修改值。该如何解决呢？1.我们首先定义了一个dialog组件2.我们在组件中引用3.子组件中tips:一定要在关闭前的回调中将当前的状态传回去,由父组件修改当前状态值4.父组件中，修改值。达到效果...

1.今天楼主在运行项目的时候，突然发现,妈耶报错了2.找了很多没有找到解决办法，问了下旁边大佬。修改了下sass的版本号，就可以了3.正确操作如下：前面还有小尖尖号的 我也去掉了...

1.安装富文本编辑器npm install wangeditor --saveyarn add wangeditor --save //npm下载https://unpkg.com/wangeditor/release/wangEditor.min.js //cdn引入2.构建html结构<div class="editor" id="editor" r...

1.定义子组件,在失去焦点的时候，向父组件发送数据2.在父组件中监听 ‘inputChanged’ 事件并作出反应3.在这个地方，因为我们接收的是一个多条数据，就采用了这个arguments方法4.完成数据的切换。...

1.定义正则方法2.在使用的文件里面引入3.在methods方法中定义，必须 不然会报错4.在模板里面使用，即可实现效果

1.首先我们需要在同一局域网下，连着同一个wifi（描述不太准确哈）2.查看自己电脑的ip，window + r组合键 调出命令行，输入cmd3.在窗口中再输入ipconfig，找到ipv4地址3.在vue项目中 config-index.js中,将host替换为你的ipv4地址4.在这个时候我们利用手机浏览器输入你的ip地址+端口号再加路由，有可能会进不去，这个时候查看下我们电脑的...

举个栗子<template> <div class="box-wrap"> <div class="box-item" v-for="(item,index) in list" @click="edit(index)"> {{item.name}} </div> </div></template><scr...

1.使用elementui组件 <el-upload action="/api/v2/base/upload?type=1" :on-success="(value)=> SingleSuccess(index, value)" :on-error="Singleerror" :headers="headers" :name="upfile" li...

1.在当前时间往前推7天this.$moment().add(7, 'd')2.在指定时间往前推7天this.$moment(this.$moment(this.day).add(7, 'd'))就是是否传参数的原因。tips：这里我是将moment挂载到原型上了，使用的this...

1.如何使用v-viewe安装 npm install v-viewer --save在main.js中使用import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.cssVue.use(Viewer, { defaultOptions: { zIndex: 9999, (控制显示层级为最高) "inline...

关于vue接口query传递数组重中之重

vue使用vue-awesome-swiper分页后，不能回到顶部解决办法。思路：1.首先我们使用这个插件，使用详情往这里看 vue-awesome-swiper使用教程2.在分页后使用回调函数，on: { slideChangeTransitionEnd（这里可以修改为Start）: function(){ console.log(this....