vue
文章平均质量分 63
悟空_大师兄_
这个作者很懒,什么都没留下…
展开
-
【uniapp+node.js】用户式加班计算器项目
加班时长计算器(uniapp+node)原创 2023-02-02 18:02:27 · 326 阅读 · 0 评论 -
web前端开发 乱七八糟的 奇怪操作
Object.assign(this.$data,this.$options.data.call(this))原创 2022-08-04 17:49:32 · 248 阅读 · 0 评论 -
【vue3.2】项目开发常见 手册(持续更新。。。。)
1。父子组件之间的 相互xxemitdefineEmits defineProps refdefineExpose子组件接收父组件const props = defineProps({ name: { type: String, //类型 default: '', //默认值 required: true, // 是否必填 }})子组件调用父组件事件 或 更新父组件数据//子组件const emits =...原创 2022-05-14 17:21:48 · 862 阅读 · 0 评论 -
VUE3.2 使用vue-cropper 图片裁剪插件 并上传OSS
插件文档: https://github.com/xyxiao001/vue-cropperVue 3 组件内引入npm install vue-cropper@nextimport 'vue-cropper/dist/index.css'import { VueCropper } from "vue-cropper";Vue3 全局引入import VueCropper from 'vue-cropper'; import 'vue-cropper/dist/index.c..原创 2022-04-29 17:48:06 · 1418 阅读 · 4 评论 -
【VUE】vant-ui 浏览器适配 rem viewPort
vant浏览器适配vant-uivant组件及设置的px 自动转化为自适应单位 行内样式不生效Viewport 布局Vant 默认使用px作为样式单位,如果需要使用viewport单位 (vw, vh, vmin, vmax),推荐使用postcss-px-to-viewport进行转换。npm installpostcss-px-to-viewportpostcss-px-to-viewport是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单...原创 2022-03-30 14:44:35 · 882 阅读 · 0 评论 -
【VUE】关于长列表优化2022
设置box 显示区域 达到区域内滚动 并监听滚动事件代码如下:<template> <div class="box" ref="box" @scroll="handleScroll"> <ul class="list" ref="list" :style="{ transform: getTransform }"> <li class="item" v-for="(item, index) in visiba原创 2022-03-24 11:43:38 · 1619 阅读 · 0 评论 -
【前端VUE3】vue3 + ant-design-vue3 (axios vuex router)
检查是否已安装 node -v npm -vant-design-vue3 文档 (https://next.antdv.com/components/overview/)1.安装vue/cli:npminstall-g@vue/cli@next2.创建项目("vue":"^3.2.13")vue create ant-vue选择:Default(vue3)等待》》》创建成功cd ant-vuenpm run serve 运行3.安装ant-d...原创 2021-12-15 14:24:15 · 2623 阅读 · 0 评论 -
webpack5 安装 自定义配置使用
webpack 安装创建项目目录:webpakc-dome进入目录初始化npm操作:npm init -y安装webpack webpack-cli :npm install webpack webpack-cli -D运行命令:webpack --mode development (开发)运行命令:webpack --mode production(生产)webpack 基础模板const { resolve } = require('path')//nodejs 方法原创 2021-12-03 16:29:44 · 994 阅读 · 0 评论 -
Vue v-model、model 的使用
vue v-model 语法糖双向绑定 通过原生input的 value 跟 @input 实现vue model指定prop的值和监听的事件model: {prop: 'value',event: 'input// 随便命名事件,对应下面$emit即可}1、text和textarea元素使用value属性和input事件2、checkbox和radio使用checked属性和change事件3、select使用value和chan...原创 2021-11-19 10:10:40 · 944 阅读 · 0 评论 -
【前端 VUE echarts】前端 管理后台 vue 使用echarts 进行简单封装统一使用 数据动态刷新
使用echartsnpm install echarts --save || cnpm install echarts --save定义wkCharts.vue<template> <div :class="className" :style="{height:height,width:width}" /></template><script>import echarts from "echarts"export .原创 2020-08-31 15:10:36 · 635 阅读 · 0 评论 -
【前端 VUE】vue 对watch的使用 监听数据 并包含$store 数据变化的监听
watch 实现监听数据改变使用方法watch:{ data (n, m) { n: 变更后的数据 m:变更前的数据 }}以上方法 只有在数据发生改变的时候 才能监听到 这个时候 提供了参数immediate 立即执行监听内的函数使用方法watch:{ data (n, m) { n: 变更后的数据 m:变更前的数据 },immediate: true}如果遇到监听对象 以上的方法是无法实现的 那么我们...原创 2020-08-31 14:51:17 · 3528 阅读 · 0 评论 -
【前端 VUE】vue Elemente-UI 管理后台自定义 导航菜单栏
记录管理后台 侧边导航栏做成通用小组件借助Elemente-UI<el-aside>:侧边栏容器 <<el-menu>:导航菜单创建 父组件页面aside.vue*( default-active 为当前激活菜单的 index,(设置为当前的路由名称 this.$route.fullPath) @select 事件为 菜单选择触发的事件 借助跳转路由 并设置default-active 的值)<el-aside...原创 2020-08-18 13:57:02 · 2653 阅读 · 0 评论 -
【前端 VUE】vue 角色权限使用 hasPermission
main.js设置全局变量Vue.prototype.$hasPer=hasPermission;设置权限函数exportfunctionhasPermission(perm){letpermissionBtns=store.getters.btnPermissions?JSON.parse(store.getters.btnPermissions):[]letbtnName=permissionBtns.map(res=>{...原创 2020-08-12 14:25:42 · 6301 阅读 · 0 评论 -
【前端 VUE】Vue中 excel 导入导出 XLSX
npm安装npm install -S file-saver xlsx(这里其实安装了2个依赖)npm install -D script-loaderBlob.js,Export2Excel.js下载地址:https://gitee.com/BenDanXianSheng/excel_relyon.git然后再main.js中导入这两个文件;<input id="upload" type="file" @change="importfxx(this)" accept=".cs原创 2020-08-05 14:26:52 · 273 阅读 · 0 评论 -
【前端 VUE】vue学习笔记 打包流程!!!
打包前 修改下配置找到 config/index.jsbuild:{assetsPublicPath:'/' 改为assetsPublicPath:'./'}命令输入 npm run build等待........ 打包成功 找到dist文件 直接扔到服务器 就可以了额ke优化:webpack.prod.conf.jsplugins: [ newUglifyJsPlugin({uglifyOptions:{com...原创 2020-07-22 15:57:07 · 213 阅读 · 0 评论 -
【前端 VUE】vue 使用 sass 解决(Module build failed: TypeError: loaderContext.getResolve is not a function)
1.安装sass 依赖包 终端输入npm installsass-loader--save-devnpm installnode-sass--sava-dev2.build文件夹下的webpack.base.conf.js的rules里面添加配置{ test:/\.scss$/, loaders: ['style','css','sass']}3.使用scss时候在所在的style样式标签上添加lang=”scss”即可4.scss使用...原创 2020-07-21 10:47:45 · 416 阅读 · 0 评论 -
js 整理 前端知识点 前端面试题 (2020)(vue)
上下左右居中显示 cssdiv{ position:absolute; top:50%; left:50% height: 200px; width:200px; margin-top:-100px; margin-left:-100px;}margin 实现 必须设置width heightdiv2{ position:absolute; top:0; left:0;right:0; bottom:0;...原创 2020-06-23 14:56:38 · 710 阅读 · 0 评论 -
【微信公众号H5】 H5授权分享(vue框架) (解决安卓注册config正常 则ios注册config 签名错误问题)
调用授权地址 设置window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbbc27d6e2a2b7be9&redirect_uri="+ urlcode+"&response_type=code&scope=snsapi_userinfo&state...原创 2020-03-27 10:06:27 · 1498 阅读 · 0 评论 -
【前端 VUE】vue 图片剪切
templateCreat。vue 弹框组件<template> <div v-if="showDialog" class="dialog"> <div v-if="showDialog" class="back-drop"></div> <div class="alert" :class="{'alert-act...原创 2020-04-02 16:52:06 · 298 阅读 · 0 评论 -
vue H5 与 原生交互
H5调原生api.js/*** @name 判断iOS*/export const isiOS = ()=>{ let u = navigator.userAgent; let iOs = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端\ return iOs;}/*** @...原创 2020-03-27 09:42:21 · 881 阅读 · 0 评论 -
【前端 VUE】vue 时间戳转日期 校验正整数 校验数字带小数点 是否是字母数字
//验证 是否是字母数字 0 1 2export function checkPass(pass) { if (pass.length < 6) { return 0; } var ls = 0; if (pass.match(/([a-z])+/)) { ls++; } if (pass.m...原创 2021-05-06 16:23:44 · 580 阅读 · 0 评论 -
【前端 VUE】VUE HTTP 请求模块化 数据加密md5
数据加解密DESmd5config.jsimport CryptoJS from 'crypto-js';import md5 from 'js-md5';export const appKey = 'cb60158028a44b5234ce9ed1c03bc7acb0';export const calcuMD5 = (pwd) => { return md5(p...原创 2020-03-24 10:18:57 · 791 阅读 · 0 评论 -
【前端 VUE】vue vuex的使用 $nextTick的使用
vuex store 创建方法参数this.$store.commit('方法名称',参数) 存储获取computed: { searchResult() { return this.$store.getters.searchResult; } },监听watch: { searchResult: function(start...原创 2020-03-24 10:17:44 · 1177 阅读 · 0 评论 -
Vue 自定义动态弹框
引用import templateCreat from "@/components/templateCreat";components: { templateCreat },初始化用到的参数:creatShowTemplate: false, creatDismissTemplate: false,使用<templateCreat :show...原创 2020-03-24 10:16:52 · 579 阅读 · 0 评论 -
vue 地址 地图
<!-- <div class="MessageBox" v-if="form.exampleShow"> <div class="msgbox"> <div class="flexBet msgboxHeader"> <div>店铺地址</div> &l...原创 2020-03-24 10:16:21 · 209 阅读 · 0 评论 -
【前端 VUE】Vue input file 图片上传
<input type="file" @change="addImg" ref="inputer" multiple />addImg(e) { let inputDOM = this.$refs.inputer; this.fil = inputDOM.files; console.log(this.fil) for (le...原创 2020-03-24 10:15:46 · 201 阅读 · 0 评论 -
【前端 VUE vue-multilevel-picker】vue-multilevel-picker Vue 组件库 三级联动
npm install --save-dev multilevel-pickerimport multilevel from 'multilevel-picker';Vue.use(multilevel)<multilevel @change="change" columns=2 separator="--" placeholder="请选择地址" :data="city-jso...原创 2020-03-24 10:15:15 · 287 阅读 · 0 评论 -
【前端 VUE】VUE 模块化弹框 获取地图中心位置坐标地址
模块文件VUE<template> <div v-if="showDialog" class="dialog" @touchmove.prevent> <div v-if="showDialog" class="back-drop"></div> <div class="alert" :class="{'alert...原创 2020-03-24 10:14:38 · 502 阅读 · 0 评论 -
【前端 VUE】Vue tinymce 富文本编辑器 (图片过大适配,复制黏贴自动上传图片,拖拽上传图片)
编辑器,tinymce 不需要后端配合 只需要把最终编辑完的富文本传给后端就好 很简单下载tinymcenpminstalltinymce安装tinymce-vuenpminstall@tinymce/tinymce-vue下载完成后在node_modules 中找到 tinymce/skins目录 ,复制下来 放置static下载中文语言包...原创 2020-03-18 16:33:06 · 4310 阅读 · 4 评论 -
【微信小程序】小程序 html js 模块化 组件化 公共模块
//创建公共模板<template name="wxParse"><text>miniprogram/pages/common/gg.wxml</text><view>{{wxParseData}}</view></template>-------------------------------------...原创 2019-10-21 09:15:51 · 337 阅读 · 0 评论 -
【前端 VUE】VUE 微信网页扫码登录(微信)
//网页内调用微信扫码功能//首先必须引入微信JS<scripttype='text/javascript'src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>//1.html<divid="login_container"><...原创 2019-10-18 17:04:53 · 8974 阅读 · 4 评论 -
【微信公众号 H5 vue】vue H5 调用微信上传图片 微信支付
/***@name判断微信浏览器*/exportconstisWeiXin=()=>{letua=window.navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=='micromessenger'){returntrue;...原创 2019-10-15 16:46:49 · 791 阅读 · 0 评论 -
vue input 自定义组件化 只能输入 整数 小数点两位 最大值 最大位数
vue input 自定义组件化 只能输入 整数 小数点两位 最大值 最大位数d-input.vue<template><!--<el-inputtype="text":placeholder="placeholder":maxlength="maxLength"v-model="model"v-on:input="input...原创 2019-09-06 11:09:23 · 915 阅读 · 0 评论 -
【微信公众号H5】vue H5 公众号 授权分享
调用授权地址 设置window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbbc27d6e2a2b7be9&redirect_uri="+ urlcode+"&response_type=code&scope=snsapi_userinfo&state...原创 2019-09-06 11:05:07 · 504 阅读 · 0 评论