tnblog
首页
视频
资源
登录
排名
1
文章数
15030
总访问量
216.3万
粉丝数
30
评论数
120

element plus table 表格,开启多选,增加复选框。设置忽略可选属性。获取选择的值

element plus table 表格,要开启多选非常简单,手动添加一个 el-table-column,设 type 属性为 selection 即可; <el-table-column type="selection" width="55" /> [TOC]通过selectable可以设置忽略可选属性比如忽略id为1,和2的<el-table-column type="selection" :s...

前端 2024-12-25 浏览(17

vue3组件刷新,手动刷新组件,手动重新加载组件,类似reload方法

一般情况会封装一个refreshData来重新刷新数据,但是有些情况参数比较复杂,写这种刷新方法需要注意很多东西还要注意时机问题,所以可以在某些情况下直接去刷新组件来刷新数据。 如何是调用组件内部的方法这样调用就行了 const projectTeamMembersRef = ref(null) const getTrainingSubProgramList = async (_tr...

前端 2024-12-25 浏览(19

修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果。修改切换箭头的样式,位置,颜色等

代码如下: <!-- 修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果。 以及切换箭头的颜色加深 --> <style scoped="scoped" lang="scss"> /* 修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果 */ ::v-d...

前端 2024-12-23 浏览(18

vue 样式穿透写法

方法一:使用 ::v-deep示例代码如下: <style scoped="scoped" lang="scss"> // 修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果 ::v-deep .el-carousel__indicator--horizontal .el-carousel__button { width: 7px; height: 7px; ...

前端 2024-12-23 浏览(34

如何配置hosts,如何修改hosts文件

hosts如何的位置在:C:\Windows\System32\drivers\etc 使用Win+R或者Win+E,输入C:\Windows\System32\drivers\etc,然后按回车都可以进入该路径 因为hosts文件一般需要管理员权限才能编辑,不然你编辑了保存不了的,所以可以这样使用管理员身份打开host文件。 1:在搜索里边输入命令,选择以管理员身份打开 2:在...

随笔 2024-12-23 浏览(45

ts实现动态拼接字符串,实现类似 C# 的 string.Format的格式化字符串。ts,js动态给拼接字符串提供参数

模板是这样的:”于${0}通过${1}课程体系《${2}》课程授课”对于这种格式的模板字符串,可以使用一个简单的替换函数来处理,而不需要复杂的正则表达式转义。下面是一个处理这种模板的示例函数: function formatString(template: string, ...values: any[]): string { return template.replace(/\$\{(\d+)\}/...

前端 2024-12-19 浏览(79

ts实现面向对象编程,定义属性,方法,构造函数,私有方法,以及引用类,实例化类等。vue3使用ts对象

[TOC]ts实现面向对象编程,定义属性,构造函数等基础使用在 TypeScript 中,你可以使用类和面向对象编程(OOP)的概念来实现类似于 C# 的功能,包括构造函数、属性和方法。TypeScript 是 JavaScript 的一个超集,它添加了静态类型、类、接口等概念,使得代码更加健壮和可维护。 下面是一个简单的示例,展示如何在 ...

前端 2024-12-18 浏览(136

Canvas在绘制文字的时候,实现文字的水平间距调整,类似css里边的letter-spacing

在Canvas上绘制文字时,虽然Canvas的2D渲染上下文(CanvasRenderingContext2D)没有直接提供类似于CSS中letter-spacing的属性来调整文字的水平间距,但你可以通过一些技巧来实现类似的效果。 一种常见的方法是手动计算每个字符的宽度,并在它们之间添加额外的空间。这通常涉及到使用measureText()方法来获取文本的...

前端 2024-12-16 浏览(81

vue3 使用Canvas对图像进行编辑,图片里边添加文字,导出为图片,导出图片的时候按照一定比例进行导出

比如我想把原图为35082480的缩小三倍变成1169827下编辑,这个时候我把Canvas的宽高设置成1169827编辑后,后导出为图片的时候让图片可以变成原来背景图片所拥有的35082480。因为有些时候原图太大了,所以按图片大小来编辑不太方便,先缩小后编辑在放大导出。示例代码如下:<template> <div> &lt...

前端 2024-12-16 浏览(22

mysql 使用命令添加列,包含类型,注释,默认值等

代码如下: ALTER TABLE training_subprogram ADD COLUMN IsMustDo TINYINT DEFAULT 0 COMMENT '是否必做(用于公开类型的设置),0不是必做,1必做';

数据库 2024-12-12 浏览(64

vue3 实现div滚动到一定位置就固定他,实现一侧滚动到某个位置就固定,实现滚动条滚动到一边的最底部就固定

在vue2以及普通页面里边使用参考:https://www.tnblog.net/aojiancc2/article/details/1273本来在vue中最好不要去用jquery的,可以直接去监听滚动条的事件来实现的,这会比较忙就直接用一下jquery了。 <script setup lang="ts" name="labroomindex"> import { reactive, onMounted...

前端 2024-12-09 浏览(159

vue3 使用Transition实现一个侧边菜单

从左边弹出<template> <div> <button @click="showMenu = !showMenu">打开菜单</button> <transition name="slide"> <div v-if="showMenu" class="side-menu"> <!-- 菜单内...

前端 2024-12-04 浏览(108

vue3实现展开更多,加载全部

[TOC]方法一:分成两份来展示,一份显示出来,一份隐藏掉,点击加载全部在把隐藏的显示出来封装的组件的代码如下: <template> <div class="completeUerList-container"> <div class="cu-ct-title"> {{ props.title }} </div>...

前端 2024-12-03 浏览(119

不同宽度下不同分辨率下的自适应布局样式写法

使用media可以在不同宽度下写不同的样式,代码如下 <style> @media (min-width: 1024px) { .about { min-height: 100vh; display: flex; align-items: center; } } </style>

前端 2024-12-03 浏览(121

VUE, JS Base64上传图片或文件。Base64 编码的图片转成二进制图片。封装的直接调用接口的图片上传。canvas生成的图片上传。blob类型的图片文件上传。vue3签字图片上传

代码如下: // Base64 编码的图片转成二进制图片 const base64ToImg = (base64String: string) => { const byteString = window.atob(base64String.split(',')[1]) const mimeString = base64String.split(',')[0].split(':')[1].split(';')[0] ...

前端 2024-12-02 浏览(186

vue3 在线签字,生成一张图 。重置的时候保留背景颜色

主要使用插件vue-esign,官方文档:https://github.com/JaimeCheng/vue-esign [TOC]一:添加引用cnpm install vue-esign 二:简单使用先引用 import vueEsign from 'vue-esign' 就可以直接使用了 <vue-esign ref="esign" :width="800" :height="300"/> 在页面里...

前端 2024-12-02 浏览(172

flex实现一行尽可能的容纳更多子项,且每项的内容自适应宽度,自适应内部文字的宽度

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Layout Example</title> <...

前端 2024-11-21 浏览(248

element plus tree 把数据源里边的所有isShowMenu都赋值为false,在树节点右边增加操作按钮,只显示当前点击节点的菜单

效果图: 代码如下: <template> <div class="module-manage-container"> <div style="display: flex"> <el-card class="box-card" style="width: 300px; margin-right: 10px"> <el-scrollba...

前端 2024-11-18 浏览(236

这一生多幸运赶上过你.
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术