博客园 - 周文豪
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=146590
2024-03-27T07:02:22Z
周文豪
https://www.cnblogs.com/zwh0910/
feed.cnblogs.com
https://www.cnblogs.com/zwh0910/p/18098511
html中table如何在td中画对角线 - 周文豪
在HTML中,要在<td>单元格中绘制对角线,可以使用CSS样式。具体做法是在<td>元素中添加一个<div>元素,并使用CSS的::before伪元素来创建对角线。 代码如下: <td style="width:3%" class="diagonal-line"> <div></div> </td
2024-03-27T03:09:00Z
2024-03-27T03:09:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】在HTML中,要在<td>单元格中绘制对角线,可以使用CSS样式。具体做法是在<td>元素中添加一个<div>元素,并使用CSS的::before伪元素来创建对角线。 代码如下: <td style="width:3%" class="diagonal-line"> <div></div> </td <a href="https://www.cnblogs.com/zwh0910/p/18098511" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/18090946
jquery在父组件中访问子组件的DOM元素 - 周文豪
父组件 1、引入子组件 import MarkDialog from "@/views/home/digitalMap/markDialog.vue"; 2、注册子组件 components: { MarkDialog }, 3、使用子组件 <mark-dialog ref="markDialog"
2024-03-23T03:59:00Z
2024-03-23T03:59:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】父组件 1、引入子组件 import MarkDialog from "@/views/home/digitalMap/markDialog.vue"; 2、注册子组件 components: { MarkDialog }, 3、使用子组件 <mark-dialog ref="markDialog" <a href="https://www.cnblogs.com/zwh0910/p/18090946" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/18072222
修改el-tabs的样式 - 周文豪
element-ui代码 <template> <div style="width: 800px;"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane label="用户管理" name
2024-03-14T02:11:00Z
2024-03-14T02:11:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】element-ui代码 <template> <div style="width: 800px;"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane label="用户管理" name <a href="https://www.cnblogs.com/zwh0910/p/18072222" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/18069914
JavaScript学习--splice()函数入门与精通 - 周文豪
一、splice入门 splice方法:通过删除(两个参数)或替换现有元素(三个参数)或者原地添加新的元素(三个参数)来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。 参数: index —— 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置(从1开始)。 howm
2024-03-13T03:11:00Z
2024-03-13T03:11:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】一、splice入门 splice方法:通过删除(两个参数)或替换现有元素(三个参数)或者原地添加新的元素(三个参数)来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。 参数: index —— 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置(从1开始)。 howm <a href="https://www.cnblogs.com/zwh0910/p/18069914" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/18060477
el-date-picker type=datetime时设置默认时间 - 周文豪
vue2设置默认时间 <el-date-picker v-model="value3" type="datetime" placeholder="选择日期时间" default-time="12:00:00"> </el-date-picker> vue3设置默认时间 <el-date-picker
2024-03-08T02:39:00Z
2024-03-08T02:39:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】vue2设置默认时间 <el-date-picker v-model="value3" type="datetime" placeholder="选择日期时间" default-time="12:00:00"> </el-date-picker> vue3设置默认时间 <el-date-picker <a href="https://www.cnblogs.com/zwh0910/p/18060477" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17942754
亿图图示:流程图的快速绘制 - 周文豪
一、流程图的要求 确定流程的开始和结束:在画流程图时,首先要确定流程的起始点和终止点。通常,起始点用椭圆形表示,终止点用三角形表示。 按照流程顺序绘制:从起始点开始,按照流程的顺序,一步步地绘制出流程的各个环节。每个环节用矩形表示,并标注出该环节的名称或操作。 确定流程分支:在绘制流程图时,如果存在
2024-01-30T06:25:00Z
2024-01-30T06:25:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】一、流程图的要求 确定流程的开始和结束:在画流程图时,首先要确定流程的起始点和终止点。通常,起始点用椭圆形表示,终止点用三角形表示。 按照流程顺序绘制:从起始点开始,按照流程的顺序,一步步地绘制出流程的各个环节。每个环节用矩形表示,并标注出该环节的名称或操作。 确定流程分支:在绘制流程图时,如果存在 <a href="https://www.cnblogs.com/zwh0910/p/17942754" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17956646
微信小程序:滚动tab栏 - 周文豪
1、wxml <view > <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}"> <view wx:for="{{tabs}}" wx:for-index="index" wx:key="id" class
2024-01-30T06:24:00Z
2024-01-30T06:24:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】1、wxml <view > <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}"> <view wx:for="{{tabs}}" wx:for-index="index" wx:key="id" class <a href="https://www.cnblogs.com/zwh0910/p/17956646" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17980603
微信小程序: 传递对象数据 - 周文豪
一、传递参数的页面 wxml <view class="right"> <view class="status" style="color: {{item.color}}"> {{item.status}} </view> <view class="Dealstatus" style="backgr
2024-01-30T06:22:00Z
2024-01-30T06:22:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】一、传递参数的页面 wxml <view class="right"> <view class="status" style="color: {{item.color}}"> {{item.status}} </view> <view class="Dealstatus" style="backgr <a href="https://www.cnblogs.com/zwh0910/p/17980603" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17582085.html
微信小程序:弹框 - 周文豪
一、自定义弹框组件 1、组件定义 在components目录下创建dialog文件夹,然后选择文件夹,右键,点击"新建Component",就会创建四个文件。如下所示: wxml <!--components/dialog/index.wxml--> <view wx:if="{{isShow}}"
2024-01-29T07:39:00Z
2024-01-29T07:39:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】一、自定义弹框组件 1、组件定义 在components目录下创建dialog文件夹,然后选择文件夹,右键,点击"新建Component",就会创建四个文件。如下所示: wxml <!--components/dialog/index.wxml--> <view wx:if="{{isShow}}" <a href="https://www.cnblogs.com/zwh0910/p/17582085.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17994047
微信小程序:生成二维码 - 周文豪
wxml <view> <button bindtap='createQrcode' type="primary" style="width: 400rpx;margin-top: 400rpx;">生成二维码</button> <canvas id='qrcode' type="2d" style
2024-01-29T02:53:00Z
2024-01-29T02:53:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】wxml <view> <button bindtap='createQrcode' type="primary" style="width: 400rpx;margin-top: 400rpx;">生成二维码</button> <canvas id='qrcode' type="2d" style <a href="https://www.cnblogs.com/zwh0910/p/17994047" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17965989
js中逻辑运算符|| - 周文豪
JS中的||符号: 1、运算规则: (1)、只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。 (2)、只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。 比如:var a= b || c 这相当于一个赋值语句
2024-01-15T10:13:00Z
2024-01-15T10:13:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】JS中的||符号: 1、运算规则: (1)、只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。 (2)、只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。 比如:var a= b || c 这相当于一个赋值语句 <a href="https://www.cnblogs.com/zwh0910/p/17965989" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17933055.html
vue3+lottie实现动画 - 周文豪
1、安装lottie-web npm i lottie-web 2、使用在线json文件 <template> <div class="box"> <div id="lottie_box" style="width: 800px;height: 800px;margin-left: 1000px;b
2023-12-28T09:57:00Z
2023-12-28T09:57:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】1、安装lottie-web npm i lottie-web 2、使用在线json文件 <template> <div class="box"> <div id="lottie_box" style="width: 800px;height: 800px;margin-left: 1000px;b <a href="https://www.cnblogs.com/zwh0910/p/17933055.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17932048.html
CSS实现滚动贴合效果 - 周文豪
一、滚动贴合介绍 滚动贴合:鼠标滚动的时候,自动贴合到浏览器的底部或顶部 设置CSS滚动贴合需要使用到两个属性: 1、给滚动容器设置scroll-snap-type,值为滚动的方向和方式 .container { /* display: flex; */ /* 第一个值为滚动贴合的方向,y表示纵向滚
2023-12-28T03:14:00Z
2023-12-28T03:14:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】一、滚动贴合介绍 滚动贴合:鼠标滚动的时候,自动贴合到浏览器的底部或顶部 设置CSS滚动贴合需要使用到两个属性: 1、给滚动容器设置scroll-snap-type,值为滚动的方向和方式 .container { /* display: flex; */ /* 第一个值为滚动贴合的方向,y表示纵向滚 <a href="https://www.cnblogs.com/zwh0910/p/17932048.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17921998.html
CSS object-fit - 周文豪
一、object-fit object-fit属性定义了被替换的元素(如img或video)的内容应如何调整大小以适应其容器。object-fit的默认值是fill,这可能导致图像被挤压或拉伸。 让我们来看看可能的值。 object-fit的可能值:contain、cover、fill、none 1
2023-12-22T09:21:00Z
2023-12-22T09:21:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】一、object-fit object-fit属性定义了被替换的元素(如img或video)的内容应如何调整大小以适应其容器。object-fit的默认值是fill,这可能导致图像被挤压或拉伸。 让我们来看看可能的值。 object-fit的可能值:contain、cover、fill、none 1 <a href="https://www.cnblogs.com/zwh0910/p/17921998.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17921944.html
background-size: cover与background-size: contain - 周文豪
background-size的可能值 background-size的可能值是auto, contain, 和cover. 1、background-size: cover 在这里,图像将被调整大小以适应容器。如果长宽比不一样,那么图像将被屏蔽以适应。 当使用background-size: co
2023-12-22T08:41:00Z
2023-12-22T08:41:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】background-size的可能值 background-size的可能值是auto, contain, 和cover. 1、background-size: cover 在这里,图像将被调整大小以适应容器。如果长宽比不一样,那么图像将被屏蔽以适应。 当使用background-size: co <a href="https://www.cnblogs.com/zwh0910/p/17921944.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17919194.html
SVG动画 - 周文豪
一、下载SVG 网站:https://undraw.co/ 点击“browse now” 点击“search” 点击第一个 点击“Download SVG for your projects” 对代码进行格式化 将代码拷贝到vs code中,用快捷键“Shift+Alt+F”进行格式化,格式化之后如
2023-12-22T03:29:00Z
2023-12-22T03:29:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】一、下载SVG 网站:https://undraw.co/ 点击“browse now” 点击“search” 点击第一个 点击“Download SVG for your projects” 对代码进行格式化 将代码拷贝到vs code中,用快捷键“Shift+Alt+F”进行格式化,格式化之后如 <a href="https://www.cnblogs.com/zwh0910/p/17919194.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17918586.html
font-size 设置字体不生效解决方案 - 周文豪
使用 font-size 设置小于 12px 的字体时,发现并不生效(字体不会再缩小了)。 原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px,大部分浏览器都是如此,所以小于12px字体不会在变小,而是保持12px的大小 添加如下代码: display:
2023-12-21T03:15:00Z
2023-12-21T03:15:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】使用 font-size 设置小于 12px 的字体时,发现并不生效(字体不会再缩小了)。 原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px,大部分浏览器都是如此,所以小于12px字体不会在变小,而是保持12px的大小 添加如下代码: display: <a href="https://www.cnblogs.com/zwh0910/p/17918586.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17903920.html
style中通过import引入样式时,scoped不生效 - 周文豪
通过import引入的外部css文件,这种引入方式是全局的,也会影响其他组件的页面样式 <style lang="scss" scoped> @import url(../style.scss); </style> 此时虽然用了scoped,但是样式还是全局的。 造成样式污染的案例: (1)、父页面
2023-12-15T09:57:00Z
2023-12-15T09:57:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】通过import引入的外部css文件,这种引入方式是全局的,也会影响其他组件的页面样式 <style lang="scss" scoped> @import url(../style.scss); </style> 此时虽然用了scoped,但是样式还是全局的。 造成样式污染的案例: (1)、父页面 <a href="https://www.cnblogs.com/zwh0910/p/17903920.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17897200.html
mysql递归查询 - 周文豪
MySQL with Recursive的作用是基于一组初始数据,进行递归查询,返回符合条件的数据集。这种递归查询方式可以应用在很多场景下,比如对于树形结构、层级结构的数据处理,以及对数据进行分类汇总等。 MySQL with Recursive的使用限制? MySQL with Recursive
2023-12-12T08:30:00Z
2023-12-12T08:30:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】MySQL with Recursive的作用是基于一组初始数据,进行递归查询,返回符合条件的数据集。这种递归查询方式可以应用在很多场景下,比如对于树形结构、层级结构的数据处理,以及对数据进行分类汇总等。 MySQL with Recursive的使用限制? MySQL with Recursive <a href="https://www.cnblogs.com/zwh0910/p/17897200.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/zwh0910/p/17883374.html
vue3视频播放器组件vue-video-player - 周文豪
1、安装 npm i vue3-video-play --save 2、全局注册 import vue3videoPlay from 'vue3-video-play' // 引入组件 import 'vue3-video-play/dist/style.css' // 引入css app.use(
2023-12-07T08:47:00Z
2023-12-07T08:47:00Z
周文豪
https://www.cnblogs.com/zwh0910/
【摘要】1、安装 npm i vue3-video-play --save 2、全局注册 import vue3videoPlay from 'vue3-video-play' // 引入组件 import 'vue3-video-play/dist/style.css' // 引入css app.use( <a href="https://www.cnblogs.com/zwh0910/p/17883374.html" target="_blank">阅读全文</a>