Vue
关注
分享
扫一扫
maxiaoxin1314
Ctrl篮球，编程
展开
-
vue中使用openstreetmap当div大小改变会出现空
项目中通过点击放大缩小界面从而去渲染openstreetmap地图的时候，会出现空白的的地图界面，如何缩放地图都不会填充原创 2023-02-18 10:17:16 · 361 阅读 · 0 评论 -
vue中使用leaflet加载open street map的一些使用
vue使用leaflet原创 2022-07-02 17:04:27 · 1600 阅读 · 1 评论 -
vue中使用leaflet渲染osm地图，使用leaflet-linear-measurement插件
leaflet-linear-measurement插件原创 2022-07-02 10:38:14 · 870 阅读 · 2 评论 -
vue中使用elementui的loading实现局部加载中
在做渲染表格或者其他请求后台数据时做加载中过渡直接上代码，在uitls文件下新建一个loading.js，代码如下，可以直接使用import Vue from "vue";import { Loading } from "element-ui";let loadOn;let loadingCount = 0;function startLoading(target) { const options = { lock: true, text: "Loading...",原创 2022-05-26 18:08:54 · 2519 阅读 · 2 评论 -
vue中使用webpack-bundle-analyzer分析打包大小
1，在vue-cli3中：首先先安装webpack-bundle-analyzer：npm install webpack-bundle-analyzer --save-dev在vue.config.js文件中chainWebpack: (config) => { if (process.env.use_analyzer) { config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle原创 2022-04-27 10:49:23 · 4265 阅读 · 0 评论 -
vue图片裁剪插件vue-cropper
vue-cropper插件的官网的地址：https://github.com/xyxiao001/vue-cropper在线的demo展示：http://github.xyxiao.cn/vue-cropper/example/安装npm install vue-cropper使用在需要的组件中直接引用，或者在main.js中import VueCropper from 'vue-cropper'Vue.use(VueCropper)组件内1.设置出一个点击展示裁原创 2022-01-28 15:37:00 · 6685 阅读 · 0 评论 -
pc端和移动端鼠标事件,实现与微信按住说话差不多的按键
1、移动端：事件类型：touchstart : 触摸开始（手指放在触摸屏上）touchmove : 拖动（手指在触摸屏上移动）touchend : 触摸结束（手指从触摸屏上移开）直接上栗子，做一个简单的按住说话，移开一定距离提示松开取消：put type="button" name="" id="messageBtn" value="按住 说话" />js：initEvent() { var btnElem = document.getElementBy原创 2021-12-29 11:01:10 · 817 阅读 · 0 评论 -
谷歌地图地理编码两种方式请求返回地址
首先到谷歌账号中启用Geocoding API，该API是需要付费的，每个月超过一定的数量来计算。谷歌地图语言设置：https://malagis.com/google-maps-js-map-display-language.html1.官网中的方法：导入script：https://maps.googleapis.com/maps/api/js?key=youkey&sensor=false&libraries=places&language=en-us"...原创 2021-07-14 10:16:00 · 1071 阅读 · 0 评论 -
vue中封装组件优化页面的数据的展示
开发项目时，有时候一页的数据过多，但是只想展示可视框列表时，滚动时再加载出来<template> <div> <div class="list" id="scroll-list" :style="{ height: contentHeight + 'px' }" ref="contentRef" @scroll="scrollList"> <div class="scroll-bar" ref="scrollBar">原创 2021-07-02 14:31:38 · 228 阅读 · 0 评论 -
vue中简单的中英文切换组件
<template> <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)"> <span><i class="iconfont icon-yuyanqiehuan"></i></span> <ul v-dpl ref="ul_cont"> <li v-for="(ite.原创 2021-07-02 14:15:19 · 484 阅读 · 0 评论 -
vue的table表格组件的封装
封装的vue表格组件，整理记录下1，分为两个组件去封装，一个是基本的表格的框架组件，一个是行内容组件基本的表格框架组件：增加了移动调整列大小功能<template> <div class="data-table"> <!-- 表格标题 --> <table> <thead> <tr ref="dataTableHead"> <th v-if="i原创 2021-05-07 10:02:03 · 3068 阅读 · 0 评论 -
vue中使用iview中upload上传图片显示出来
代码是用pug模板写的Col(span='24') FormItem(label="Photos & Videos") Upload( multiple ype="drag" action="//jsonplaceholder.typicode.com/posts/" :before-upload='handlePhotoSuccess' ) div(style="padding: 20px 0".原创 2020-07-16 15:01:30 · 2612 阅读 · 0 评论 -
Vue实现简单的留言板
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <style ty...原创 2020-03-12 22:04:19 · 1190 阅读 · 0 评论