- 博客(42)
- 收藏
- 关注
RSS订阅原创 vitepress/vite vue3 怎么实现vue模版字符串实时编译
通常是因为 VitePress 的默认配置不支持在运行时编译 Vue 模板。VitePress 使用的是 Vite 作为其构建工具，而 Vite 默认配置是为了生产环境优化，不包含完整的 Vue 编译器。文件中的模板，并且正确地导入 Vue。在 VitePress 项目中，可以通过修改 Vite 的配置来做到这一点。要解决这个问题，需要确保 Vite 能够处理。
2024-04-10 14:36:28
518
原创 判断 文件地址 浏览器是否支持预览
属性为文件的网络地址来测试是否可以预览文件。如果浏览器能够预览文件，它通常会打开一个内置的查看器（如PDF阅读器、图片查看器等）。请注意，这种方法并不是百分百准确的，因为它依赖于浏览器对文件类型的支持以及内置的查看器。某些文件类型，尤其是非标准的或需要特定插件的文件类型，可能会导致错误，而不能预览。在JavaScript中，可以通过尝试创建一个元素（如。
2024-02-26 16:18:21
364
原创 el-upload多文件上传成功回调确只有一次
on-success="handleSuccess" 上传多个而回调只有一次。el-upload 开启 multiple 多选。
2023-10-12 10:48:23
1005
原创 div 可拉伸变高
test 为要被拉伸的div。里面的div class="bottom-result-resizable" 为空的一条线，鼠标放上去的时候加粗效果，这是触发拉伸的地方。重点为 @mousedown="handleMouseDown" 方法。-需求： 实现div 可以拉伸变高。html 代码 ，随便写了个测试。methods里方法。
2023-05-11 10:29:36
652
原创 JS语句中等某个方法执行完再执行后面逻辑
在写script语句的时候，常遇到在代码逻辑中需要请求后台或别的运算方法执行完拿到结果再继续执行代码的场景。
2023-02-21 11:13:20
4883
原创 leaflet 地图点击线图形时加marker标记 解决缩放后marker不在线上
解决leaflet 点击事件添加marker标记， 地图放大后标记不在理想点击位置问题
2022-08-16 17:16:51
2024
原创 js 判断属性是否存在 （小记）
判断属性值是否存在使用属性 ' . ' 点的方式来判断属性是否存在，这种方式当属性不存在的时候不会报underfined错误，会继续执行后续代码
2022-04-19 19:20:20
594
原创 css float布局样式的换行问题
使用float布局时候，存在多行数据要换行，出现了换行样式问题：如图：第二行的第一个浮动到右边，其他被挤下到第三行原因： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动的边框为止，解决办法：第二行第一个加入清除浮动样式：style="clear:both;"正常样式：备注 ：上图中 我的 开始按钮 是另起一个div写入，也需要清除浮动样式，不然就是跟在红色删除按钮后面...
2022-04-18 17:24:55
1401
原创 vue3常用vue.config.js配置
const webpack = require('webpack');const path = require('path'); function resolve(dir) { return path.join(__dirname, dir);} // 加载 stylus 文件，可以是多个function importStylus (rule) { rule.use('style-resource') .loader('style-resources-loader').
2022-04-18 14:25:49
828
原创 前端解决跨域CORS 设置代理
当请求地址出现CORS跨域问题时，解决办法：1.增加个 /api（ 可以叫别的） 字符来作为判断然后在vue.config.js里设置代理（vue.config.js 是 vue3 根目录下自己建的配置文件, vue2有对应的配置文件）devServer.proxy 配置 '/api' : { target: "http://121.41.14.175:10521", //请求目的ip： 端口 //...
2022-03-22 17:59:20
4926
原创 el-table 表头fixed固定某列自定义（添加按钮事件）
<!--在要自定义的el-table-column里 添加 render-header函数 --><el-table-column fixed="right" width="120" :render-header="renderBtn"> <template slot-scope="scope"> <div style="background: #063b6c; width: 120px"&g.
2021-10-20 15:14:47
655
原创 引入多个子组件时统一引入方法
<!-- 功能区 --> <div class="menu-fun"> <component :is="showContent" @testClick='testClick' @changeResultData='changeResultData' /> <!-- 土壤评价 --> <!-- <soil-eva v-if="showContent === 'SoilEva'"></soil-.
2021-09-14 09:36:25
557
原创 Js进行base64编码解码（解决中文乱码）
常规方法：编码// base64转字符串 getEncode64(str){ // 对字符串进行编码 var encode = encodeURI(str); // 对编码的字符串转化base64 var base64 = btoa(encode); return base64; },解码：// base64转字符串 getDecode(str){ // 对base64转编码 var decode = a
2021-07-23 15:20:51
28987
16
原创 前端自定义滚动条
在 app.vue 或者index.html 里 根路径处添加代码html ::-webkit-scrollbar { /*滚动条整体样式*/ width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ height: 8px;} html ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 4px; background: #0089ff;} html ::-webkit-scrollbar-.
2021-07-08 17:40:30
560
原创 el-form表单el-form-item验证规则里prop一次验证两个或多个值
需求要在表单的el-form-item 一次验证两个值，都不能为空图示：下图是圈起来的地方是我吗要验证的第一个值方法在验证规则rules里，要验证的值里加上validator验证规则，“valTowValue”是自己定义的。紧接着在data下定义validator验证规则。如果一个el-form-item里要验证多个，方法同理，在valTowValue里多判断几个就行了。...
2021-06-04 17:46:32
11688
2
原创 解决el-table表头错位
示例图：表头错误错位原因一般是由电脑显示的缩放引起解决方案（两种）在app.vue 或者 index.html 反正是根结构处，修改全局样式style加入样式代码 .el-table th.gutter{ display: table-cell !important;}加入样式代码.el-table--border th.gutter:last-of-type { display: block!important;}结果：...
2021-06-02 14:54:28
672
原创 leaflet地图上的 div里 禁止拖拽移动地图，双击放大，鼠标滑轮缩放地图
示例图：我要鼠标移到div的时候不能对地图进行操作：// 把以下内容 写在地图加载完后 页面渲染完后的方法里 let leftResultDiv = document.getElementById('leftResult'); //获取div的dom setTimeout(() => { leftResultDiv.onmouseover = function () { //监听鼠标移入
2021-05-31 17:48:50
2322
原创 vue常用修饰符 v-moble后面或者 @后面
v-modle例：{.number //自动清除无法转换为数字得类容.trim //首尾无法输入空格}v-on(@)例：<input @click.stop=“turnTo” type=“number”>{.stop //阻止事件冒泡，注：使用router.push时，事件可能会继续执行若干步。.prevent //阻止默认事件.self //子组件相同事件
2021-02-01 11:30:36
250
原创 Element UI Dialog 可拖拽移动
效果：是可移动的。步骤1.新建文件 directives.jsimport Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.q
2021-02-01 10:35:17
2373
原创 vue实践 Leaflet地图标注（图注，位置）带数字对应显示
效果：leaflet地图容器的初始化和图层的加载就不说了，都是基础。 上图用的是天地图,以下是在vue中步骤上图效果图主要为地图页面，和右侧列表页面主页面地图页面 index.vue 里（地图页面）列表页面queryResult<query-result @proQuery="proQuery" @setPoint_zk="setPoint_zk" @clear_marker_layer="clear_marke
2021-01-29 14:00:50
2877
1
原创 leaflet地图的popup冒泡替换setContent原生代码，popup自定义内容
事件setContent在官网上的leaflet冒泡popub里，内容里都是用原生代码加进去,如果只是简单的显示用原生的很好写，没问题。但是一旦涉及到如果popub要显示复杂的内容，那就很麻烦了，js都得写半天还不一定能一次成功。解决办法在vue里像平常一样定义div，然后给个id。我们用document.getElementById去获取节点。示例首先正常的初始化地图我就不说了，官网或百度例子很多。//准备popub显示的内容<div id="searchZuankongDetail"
2020-12-09 10:01:33
1513
原创 web系统维护时显示维护状态页面
1.为什么需要显示维护状态页面？在系统后台更新维护期间，用户按照原地址访问的时候会出现404， 如果不告诉用户当前系统处在维护状态， 用户会以为自己的网络有问题，亦或是自己记错了网站的地址。 因为给用户体验不好。2.如何实现系统维护状态在系统维护期间，我们不能将所有的服务器全部down掉， 如果都down掉， 没有服务器为用户提供任何请求响应，因此也无法将维护的状态反馈给用户。一般情况下，我们的应用程序最上层都有一层反向代理服务器，而反向代理服务器是与业务无关的服务器，一般情况下不会对它进行更新。
2020-12-04 10:10:16
7143
原创 搜索或选择时既可以输入又可以下拉选择
最近做一个功能要显示一个选择时要即可以输入又可以下拉选择，其实这种博客上例子特别多，学习整合了一下写了一个自己适用的。核心输入的时候@input事件，实时检索我们要查询的列表去获得对应数据，这里用到了indexOf方法，查找是否包含有某字符串，无返回 -1 。以及节流函数的使用，这个函数会在input事件触发的时候延时操作从而检索遍历数组的次数。代码直接上全部代码，很简单不复杂，理清楚逻辑就懂了。（学习代码的时候一定要先理清楚逻辑哟）<template> <div class
2020-11-09 10:27:34
1245
2
原创 vue element 实现表格table联动数据的分页功能
原文链接：https://blog.csdn.net/weixin_44863676/article/details/102545387
2020-08-07 10:56:11
2068
原创 vue 简单二级联动选择 select二级节点选择
本文用的是element-ui 的 select选择组件，简单写一个地区选择，其他用法也相同， 适用于已经知道枚举值的// templete 里<el-form-item label="区域" prop="projectDivision"> <el-select v-model="ruleForm.projectDivision" pl
2020-08-05 14:55:48
3162
原创 vue中 下拉框打印输出有值,但是选中后框里不显示
代码写法没毛病的情况下：原因：是因为下拉框数据是v-for接口请求来的数据，因为数据层次太多，render函数没有自动更新解决方法:在@chenge事件里手动强制刷新值// areaChange1 change的事件名areaChange1(){ // console.log(2) this.$forceUpdate()//强制更新 }转载于：https://blog.csdn.net/weixin_43835827/article/details/105677387...
2020-08-05 14:39:07
1427
原创 vue tab标签页动态增减 content换成组件形式 前面两个标签页不能删减
@TOCtab动态增减vue tab标签页动态增减 content换成组件形式这里使用的element-ui组件里的tab标签页，其他组件也是万变不离其宗首先，根据官方文档里引入tab组件// template里<div style="margin-bottom: 20px;"> <el-button size="small" @click="addTab(tabNameValue)" &g
2020-07-17 10:53:02
2475
1
原创 element-ui 使用表格布局切换表格渲染错乱或者掉下来一点
踩坑：使用表格的时候，切换表格表格的最左边固定列竟然掉下来一点，有时候又是正常的，查了资料，解决办法如下this.$nextTick(()=>{ this.$refs.tableRef.doLayout()})// table的ref为tableRef，更新渲染表格的数据后执行上面代码doLayout重新布局表格原文链接：https://blog.csdn.net/lydxw...
2020-01-08 18:28:38
2310
原创 vue，html中字符串溢出为省略号总结
三种方法css样式自带的文本溢出以下为必要样式.类名{ width: 50px; /*设置文本长度，像素或者百分比*/ overflow:hidden; /*溢出的部分隐藏*/ white-space: nowrap; /*文本不换行*/ text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）*/}2.过滤器过滤&l......
2020-01-07 11:38:33
1559
2
原创 vue事件跟随鼠标显示事件详情
本文是写与vue中，但用法html也一样，很简单贴上代码：<template> <div> <div class="a1" @mouseenter="enter($event)" @mouseleave="leave($event)">鼠标放上</div> <div class="a2" @mouseenter="ent...
2020-01-06 16:28:01
1473
原创 Fullcalendar日历插件的eventMouseover鼠标事件不起用原因是
这两天做到日历组件，用fullcalendar插件功能，发现 eventMouseover和eventMouseout两个鼠标事件不起用自己捣鼓半天各种找原因，最后竟然是，官方文档fallcalendar跟新4.0版本后，这两个事件分别换成了 eventMouseEnter和eventMouseLeave 就可以了已经试验成功，这里就不放代码了，没啥放的...
2019-12-31 15:15:05
3277
8
原创 继上篇日历，完善日历组件可以显示对应日程日期
此中有两种方法来遍历数组日程第一种根据日程数组来封装细分的数组 // 方法一 ；利用封装数组 先年 年下月份 再月份下具体日期 richengListDate (arr) { //console.log(arr); let data1 = {} let value1 = [] for (let i = 0; i < arr.len...
2019-12-17 12:02:20
500
原创 vue数组的截取并放入一个新数组
最近用到数组，捣鼓了好久，终于是自己想要的效果了首先先循环遍历data中的数组，取到我要的时间年月 richengList:[ {id: 0, name: '你有一个会议', region: '2019-12-11'}, {id: 1, name: '你你有一个会议', region: '2019-12-13'}, {id: 2, name: '...
2019-12-13 11:12:11
6359
原创 vue日历组件实现
最近要做一个日历插件，代码保存下来方便以后使用效果图：<template> <div class="calendar-container"> <div class="year"> <div> <span class="fl" @click="lastYear"&...
2019-12-08 16:14:04
353
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人