Vue
关注
分享
扫一扫
黑色咖啡 Ken
走别人的路让别人无路可走
展开
-
腾讯地图绘制-（开始地-结束地）-路线
腾讯地图绘制-（开始地-结束地）-路线原创 2022-10-28 09:51:43 · 1933 阅读 · 0 评论 -
uni- app 腾讯地图发货地和收货地路线规划-includePoints
【代码】uni- app 腾讯地图发货地和收货地路线规划。原创 2022-10-08 13:55:56 · 1150 阅读 · 0 评论 -
uni-app中使用钉钉h5微应用扫码功能
1.2 我们需要安装钉Dev开发版USB在线链接，打开开发者模式，同时需要在浏览器输入edge://inspect/#devices 这样就可以随时随地进行调试。具体测试步骤和安装，我会在后面详细针对钉钉开发者测试步骤进行详解。1.1 首先为了随时随地能在本地测试钉钉情况，我们需要在钉钉开发平台注册一个个人的H5微应用，通过企业内部开发中的应用部署本地项目地址。备注：大家在开发钉钉项目时，花最多的时间会在搭建本地测试工具上，因为钉钉相对其他测试工具来比较麻烦。然后在局部文件中引入，您也全局可以引入。....原创 2022-08-30 15:17:05 · 2815 阅读 · 3 评论 -
cryptojs加密解密
代码】cryptojs加密解密。原创 2022-08-16 15:18:07 · 491 阅读 · 0 评论 -
vue 二维码 生成、渲染
代码】vue二维码生成、渲染。原创 2022-07-25 09:14:52 · 382 阅读 · 0 评论 -
vue 二维码识别读取/相册
代码】vue二维码识别读取/相册。原创 2022-07-25 09:11:17 · 910 阅读 · 0 评论 -
H5+ vue+扫描二维码相册
代码】H5+vue+扫描二维码相册。原创 2022-07-25 08:44:15 · 785 阅读 · 0 评论 -
elementui el-upload 上传文件
手动上传文件转Base64<el-form-item label="上传文件"> <el-upload class="upload-demo" drag action multiple :auto-upload="false" :file-list="fileUpList" :on-change=.原创 2022-04-29 14:20:09 · 1152 阅读 · 0 评论 -
Vue+Element中Table树形懒加载，添加，修改，删除后数据动态更新
数据准备结果呈现添加最外层菜单添加子菜单界面直接上代码index.vue<template> <div class="table-container"> <vab-query-form> <vab-query-form-left-panel :span="3"> <el-button icon="el-icon-plus" type="success..原创 2022-02-24 20:32:56 · 4274 阅读 · 0 评论 -
根据日期获取周数的计算
/****根据日期获取周 这里的周不是自然周 有相应的计算逻辑** */import moment from "moment";export const GetDateWeeksFn=function(date){ let obj={ code:0, data:null } let currDate = moment(date); let w=currDate.startOf("year").format('YYYY-MM-DD');//获取本年度的.原创 2022-01-18 11:26:41 · 1451 阅读 · 0 评论 -
Vue3+TS+Elementui-Plus 局部引用封装
1.安装babel的插件npm install babel-plugin-import -D2.配置babel.config.js////当我们在element-plus引入组件的时候 我们去找 为 name 的样式module.exports = { plugins: [ [ "import", { libraryName: "element-plus", customStyleName: (name) => {.原创 2022-01-14 14:26:38 · 791 阅读 · 0 评论 -
VUE3+TS脚手架安装+目录文件规范
1.安装步骤原创 2022-01-10 23:02:39 · 540 阅读 · 0 评论 -
VUE 代码压缩优化
1、设置productionSourceMap为false如果不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。设置为false打包时候不会出现.map文件module.exports = { productionSourceMap: false}2、代码压缩安装uglifyjs-webpack-plugin插件，可以去除项目中console.log和debuggernpm install uglifyjs-webpack-原创 2021-12-13 17:24:19 · 2090 阅读 · 0 评论 -
vue3 打包后部署nginx清除缓存问题
打包的文件路径添加时间戳vue.config.js 文件修改const Timestamp = new Date().getTime();module.exports = { assetsDir: 'static', configureWebpack: config => { // 打包编译后修改 js 文件名 output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `sta.原创 2021-10-13 11:25:19 · 1428 阅读 · 1 评论 -
vue 监听全屏窗口变化
created(){ //监听各浏览器fullscreenchange 事件处理 document.addEventListener('fullscreenchange', () => { this.isfullscreen=!this.isfullscreen }); document.addEventListener('mozfullscreenchange', () => { this.isfullscreen=!this...原创 2021-10-08 16:35:52 · 874 阅读 · 0 评论 -
elementui type=“week“ 回显赋值处理方式
<el-date-picker :picker-options="{ firstDayOfWeek: 1}" v-model="StartWeek" type="week" format="yyyy第WW周" placeholder="选择周范围"></el-date-picker>vue-cli 利用moment.js转化时间格式为YYYY-MM-DD日，或者是YYYY-MM-DD HH:MM:SS 等格式。import getDates from ...原创 2021-03-10 09:31:39 · 1557 阅读 · 0 评论 -
vue级联组件单选，多选组合限制个数
需求：组件搜索：系列（单选）=》成品（多选限制3个）=》物料（多选限制3个）类似于Cascader 级联选择器组件 使用JQ+Vue数据xi_chengpin_wuliao存在vuex里 命名：SeriesProductsMateriel "xi_chengpin_wuliao": [{ "id": '系列id', "title": "系列名称", "children": [{ "title": "成品1", .原创 2020-12-10 11:49:27 · 1176 阅读 · 0 评论 -
chekbox【2】 父级多选（选择父，子不能选择），字节多选（选择子，父不能选择），可限制个数
Vuex state：{ "SeriesProductsAll": [ //系列-成品 { name: "ping", id: 1, disabled: false, checked: false, model: [{ name: "HW1623", id: "1_1", disabled: false, checked: false }, { name: "HW1633", id: "1_2", disabled: false, checked: false }, { n原创 2020-11-02 17:17:19 · 211 阅读 · 0 评论 -
chekbox 每项可多选，可限制个数
Vuex数据 state：{ "SeriesProductsAll": [ //系列-成品 { name: "ping", id: 1, disabled: false, checked: false, model: [{ name: "HW1623", id: "1_1", disabled: false, checked: false }, { name: "HW1633", id: "1_2", disabled: false, checked: false }, .原创 2020-10-21 14:43:58 · 318 阅读 · 0 评论 -
elementui el-checkbox-group 自定义全选
<div class="itemTime"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox > <el-checkb...原创 2020-09-26 13:41:50 · 2954 阅读 · 1 评论 -
vue 世界城市下拉模拟组件
1.引入AddresJson.js城市数据文件<template> <div> <div style="text-align:center;margin-bottom:10px;"> <el-link type="primary" v-show="obj.GlobalRegionName">{{obj.GlobalRegi...原创 2020-03-19 11:16:20 · 469 阅读 · 0 评论 -
JS 计算单位 ("万元", "亿元", "万亿")
function SetUnitConversion(num) { var moneyUnits = ["", "万元", "亿元", "万亿"] var dividend = 10000; var curentNum = num; //转换数字 var curentUnit = moneyUnits[0]; //转换单位 for (...原创 2020-01-08 10:37:35 · 1877 阅读 · 0 评论 -
VueCli3.0全栈项目
VueCli3.0全栈项目-资金管理系统带权限(node/element/vue)课程视频教程下载。通过本系列课程,可以快速的掌握全栈开发流程, 包括node.js的接口搭建, vue前端项目的构建, element-ui视图的构建. 一套应有尽有的课程!课程大纲01、Vue全栈-最终成果展示.mp402、Node接口搭建-express搭建服务器.mp403、Node接口搭建-连接Mon...翻译 2019-12-26 17:10:00 · 452 阅读 · 0 评论 -
VUE2.0自动打包项目到服务器
五步带你完成vue-cli 项目打包一键部署（测试）服 务@一键部署 vue2.0~3.0 都可以使用1、在根目录 新建deploy 文件夹：.env.dev类容如下VUE_APP_SERVER_ID=0.env.prod类容如下VUE_APP_SERVER_ID=12、index.js 文件类容如下：const scpClient = require('sc...原创 2019-12-24 17:42:44 · 1113 阅读 · 0 评论 -
element 后台分页
<template> <div class="app"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column>...转载 2019-11-01 11:22:12 · 805 阅读 · 0 评论 -
vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题一个数据驱动的组件，为现代化的 Web 界面而生。具有可扩展的数据绑定机制，原生对象即模型，简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-u...翻译 2018-11-27 18:19:19 · 3458 阅读 · 1 评论 -
码云管理项目同步本地操作流程
1.正在更新中... 2.码云项目分支管理原创 2018-11-23 11:42:34 · 1266 阅读 · 0 评论 -
vue 图标菜单列表带分页（APP）
<template> <div class="icons"> <swiper :options="swiperOption"> <swiper-slide v-for="(page, index) of pages" :key="index"&原创 2018-11-23 11:16:27 · 1114 阅读 · 0 评论 -
vue中DOM的操作
<template> <div> <li class="sidebar-list" v-for="(item, index) in meunList" @click="setPageMenu(index)" ref="menuItem" :key="index" :id="index"&am原创 2018-11-22 14:30:26 · 988 阅读 · 0 评论 -
vue 组件定义
全局组件定义 <!--全局--> <div class="app"> <my-object></my-object> <my-object></my-object> </div> <div class="app2"&原创 2018-07-18 15:41:02 · 697 阅读 · 0 评论 -
js组合算法
//三个组合算法a数组，m组合3位一组 arryFunThree(a,m){ const _this=this let r = [] if (m <= 0 || m > a.length) { return r } f...原创 2018-12-06 17:01:12 · 2041 阅读 · 0 评论 -
vue轮播图插件vue-awesome-swiper
第一步安装npm install vue-awesome-swiper --save第二部在main.js中引入import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)然后就可以在组件中使用该插件 <template> ...原创 2018-12-19 11:37:32 · 224 阅读 · 0 评论 -
vue移动端h5调用支付宝支付接口（案例2）
介绍一种比较简单的h5调用支付宝支付接口的方法首先，肯定是后台写好接口，将订单信息传给后台，后台根据文档，向支付宝请求h5的支付数据，返回一个form表单到前端上，格式如下:得到这个form之后怎么用呢，我们需要在ajax请求的异步回调上，将返回的form输出到html界面上，代码如下：payMoney() { this.$http.get('/api/w......原创 2019-01-08 13:37:52 · 532 阅读 · 0 评论 -
vue跳转支付打开新窗口
后台返回数据"<script language="javascript">window.onload=function(){document.pay_form.submit();}</script><form id="pay_form" name="pay_form" action="http://gateway.lianyin88.com/GateW原创 2019-01-10 10:26:27 · 3946 阅读 · 2 评论 -
vue+axios实现登录拦截（方式一）
路由拦截项目中某些页面需要用户登录后才可以访问，在路由配置中添加一个字段requireAuth在router/index.js中const router = new Router({ routes: [ { //登陆 path:'/Login', component:Login }, { //用户中心 ...原创 2019-03-26 10:38:01 · 791 阅读 · 0 评论 -
element-ui table 前台分页
<el-table border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%" v-else> <el-table-column prop="n" label="序列号" width="80" align="cen...原创 2019-08-29 16:08:35 · 919 阅读 · 0 评论 -
使用vue实现模拟数字键盘（1）
input.vue <div class="l_input"><input type="tel" value="" v-model="preMoney" min="1" id="input_id" ref="keyboard" @focus="onFocus($event)"> 元原创 2018-11-21 18:04:57 · 4758 阅读 · 0 评论 -
使用vue实现模拟键盘（字母，数字），支持移动端和pc端（2）
Keyboard.vue<template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList"> <template v-for="key in原创 2018-11-21 17:47:49 · 2718 阅读 · 3 评论 -
vue的生命周期
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>生命周期</title> </head> <body&原创 2018-07-13 15:19:07 · 207 阅读 · 0 评论 -
vue 动态组件（tabs切换）keep-alive：主要用于保留组件状态或避免重新渲染
通过keep-alive 保留数据值 填写数据时切换到其他页面，后返回当前页数据保留 ，主要用于保留组件状态或避免重新渲染 <!--动态组件-component使用--> <div class="app"> <ul> <li @click="currView='home'">首页</li> &am原创 2018-07-19 15:12:52 · 15574 阅读 · 0 评论