vue
文章平均质量分 51
vue相关
pixle0
实战项目技术与代码分享
展开
-
一文读懂vue+scss实现主题换肤功能
web实现主题换肤方案有很多种,例如css变量、动态加载样式文件、js变量。目前流行工程化开发自然少不了css预处理(less/scss)方案,这也是目前在脚手架项目中比较流行实现方案。less/scss实现主题换肤本质就是动态切换节点某个变量,这个变量可以是HTML标签属性值也可以是类名,这个变量位置既可以是最顶层也可以是需要换肤地方(子节点)。变量如果是类名的话需要设置一个独一无二的名称,这个我们无法保证后面开发一不小心类名被重复了特别是团队协同开发,所以更好的选择变量是属性值。//顶层方案。原创 2024-01-26 15:08:44 · 2928 阅读 · 0 评论 -
vue3 element-plus 省市区选择器组件封装
vue3封装一个省市区选择器组件,通过element-plus Cascader 级联选择器实现原创 2024-02-20 11:17:43 · 432 阅读 · 0 评论 -
vue移动端手把手教你封装一个可移动悬浮窗、可移动打开扇形悬浮按钮组件
本文将手把手教你封装一个可移动的悬浮框组件,利用悬浮窗在进阶封装一个可展开可移动的扇形悬浮按钮组件。本案例将以移动端为背景采用uniapp技术实现一个三端(H5、小程序、APP)通用的悬浮组件。原创 2023-06-18 17:49:26 · 6156 阅读 · 0 评论 -
海康视频WEB插件 V1.5.2 开发总结
海康视频插件v.1.5.2开发教程总结,vue版本开箱即用组件分享原创 2022-09-24 14:12:46 · 11606 阅读 · 31 评论 -
vue自定义指令——input输入类型限制(数字、浮点、整数、英文等),解决中文输入法双向绑定失效问题
实现一个vue自定义指令——输入框(input,el-input)输入内容类型限制,解决中文输入法双向绑定失效问题,多种类型支持,数字类型,浮点类型、英文类型、整数类型、四则运算等。原创 2022-11-12 12:27:03 · 6039 阅读 · 5 评论 -
vue element-ui表格(el-table)数据导出execl文件
功能实现:element UI 的el-table数据导出为execl文件使用到插件:xlsx、file-saver。原创 2022-11-21 15:45:53 · 3082 阅读 · 4 评论 -
vuex模块批量导入和模块数据、方法调用总结
1.批量导入模块假设模块目录与 index.js同级index.jsimport Vue from 'vue'import Vuex from 'vuex';Vue.use(Vuex);//导入modules所有模块const modulesFiles = require.context('./modules', true, /\.js$/);const modules={};modulesFiles.keys().forEach(key => { const modu原创 2021-08-23 15:51:18 · 842 阅读 · 0 评论 -
vue脚手架支持 es11 ??和?.语法——插件安装记录
?语法?.语法。原创 2023-03-25 21:30:33 · 490 阅读 · 1 评论 -
vue自定义指令实现图片懒加载
图片懒加载原理1.初始化src属性设置为默认图片(占位图片)2 .img标签自定义一个属性存储图片真实url3.监听页面滚动,当图片出现在可视区域把真实url赋值给src前2步都很容易实现,第三步怎么判断图片是否出现在可视区域?通过element.getBoundingClientRect()可获知图片顶部和底部分别距离可视区域顶部距离,假设。原创 2022-10-04 19:43:26 · 1342 阅读 · 0 评论 -
vue项目文件导入导出功能
已知: axios已通过Vue原型属性设置 (main.js) Vue.prototype.$axios=axios;1.导入文件(上传)://导入文件 success:成功回调函数 fail失败回调,url:上传地址,that:vue对象(this)function importFile(that,url,success,fail){ let input=document.createElement("input"); input.setAttribute('type','file');原创 2021-10-21 17:08:34 · 2293 阅读 · 0 评论 -
vue sync修饰符的使用
1.主要用途:因组件内无法直接修改prop属性,要想改变prop常规做法需要emit通知父组件修改,sync提供了一种糖语法简写方式,可自动修改prop属性无需在父组件内监听emit事件做响应修改2.常用例子:弹窗的显示关闭控制3.使用方法提炼: xxx.sync, $emit(‘update:xxx’); (其中xxx为prop属性)下面以popup弹窗为例子:实现点击黑色空白区域自动关闭子组件popup.vue<template> <div v-show="show原创 2021-10-30 11:51:49 · 155 阅读 · 0 评论 -
手写一个Vue Loading通过自定义api控制显示与关闭 记录
实现目标调用方法(类似element的loading):this.loading.show()显示this.loading.show() 显示this.loading.show()显示this.loading.hide()关闭应用vue知识点:extend函数,use函数简单分析,this.loading的实现通过use使用插件方式把loading的实现通过use使用插件方式把loading的实现通过use使用插件方式把loading属性绑定到Vue原型show()和hide()实现通过exten原创 2021-08-23 16:48:57 · 525 阅读 · 0 评论 -
vue自定义组件使用v-model 双向绑定
1.常用例子:一些自定义组件例如radio,checkbox的封装,实现数据双向绑定3.使用方法提炼:export default {data(){return{}},model:{prop:‘xxx’,//接收v-model传入的值,this.xxx访问event:‘xxxx’//emit发送出去定义的事件:this.$emit(‘xxxx’,改变值);},}以radio封装为例子实现目标类似element 的raido写法:父组件parent.vue <radio原创 2021-10-30 15:21:25 · 742 阅读 · 0 评论 -
vue3.2+ts 父子组件传值
child.vue<template> <div class="child"> <span>{{title}}</span> <button @click="onClick">跳转</button> </div></template><script lang="ts" setup> interface Props{ title?:原创 2022-05-05 16:51:35 · 984 阅读 · 1 评论 -
vue keep-alive 返回保存滚动条位置
export default{data(){ return{ scrollY:0 }},//页面离开前保存滚动条距离.page为滚动元素 beforeRouteLeave(to, from, next) { //保存滚动条元素scrollTop值 this.scrollY = document.querySelector(".page").scrollTop; next(); }, //进入页面 恢复滚动条位置 activated() { d原创 2021-11-13 15:18:09 · 992 阅读 · 0 评论 -
vue3 数学公式使用
vue3数学公式原创 2022-01-22 14:03:49 · 2417 阅读 · 1 评论 -
vue脚手架4.0安装和使用
下载并安装node.js安装vuenpm install -g vue卸载旧版脚手架npm uninstall -g vue-cli安装新版脚手架npm install -g @vue/cli查看脚手架版本vue -V新建项目vue create 项目名运行cd 项目名npm run serve打包npm run buildps:淘宝镜像(cnpm)安装npm install -g cnpm --regis...原创 2020-12-24 17:12:14 · 487 阅读 · 0 评论 -
vue watch监听初始化值
export default { data() { return { active: 0 } }, props: { current: { type: String, default: "" } }, watch: { current: { handler: function(newval, oldval) { this.active = newval; }, immediate: tru...原创 2020-09-29 14:30:12 · 2245 阅读 · 0 评论