![](https://img-blog.csdnimg.cn/20190913141541545.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
.Passion
欢迎来看我的博客 ,原博客地址: https://www.cnblogs.com/lyr-2000/
现决定重新启用博客园的博客,一部分比较浅的笔记将写到这个博客上
欢迎打扰,另外,个人博客网站也搭建成功,欢迎打扰:
https://lyr-2000.github.io/
展开
-
对antd table组件的封装,让框架用法更简单一点【react】【毕设总结】【table】【前端】
对 antd 的 table 组件进行封装最近1个月来 都在搞毕设,很多时候前端写的都是 无用,重复性的代码, 对一些框架不熟练,要不停的看文档,效率比较低,这里 按照 自己的想法 ,对 封装了一下。这个是 写后台页面 经常要用到的table 组件import React,{useEffect, useState} from 'react'import { Table } from 'antd'const EasyTable = (props) => { let config = pr原创 2022-01-15 22:36:47 · 1427 阅读 · 0 评论 -
vue 中使用 animate.css实现左滑动效果
<transition name="fade" enter-active-class="animate_animated animate__slideInLeft" leave-active-class="animate__animated animate__slideOutLeft" > <div v-show="show" class="alert " :class="style"...原创 2021-01-28 00:14:34 · 941 阅读 · 0 评论 -
vue验证码计时效果
<a href="javascript:void(0)" @click.prevent="getCode" class="get-code" v-show="!prevent">获取验证码</a> <a class="get-code countdown" v-show="prevent">{{countdownSecond}}</a> countdownSecond = 60 //屏蔽,...原创 2021-01-27 22:55:16 · 113 阅读 · 0 评论 -
vue 实现一个弹框组件
参考文档:弹框组件<template> <teleport to="#modal"> <transition name="slide-fade"> <div class="modal d-block" tabindex="-1" v-if="!close"> <div class="modal-dialog" > <div class=原创 2021-01-27 18:46:49 · 414 阅读 · 0 评论 -
vue实现loading
使用实现:loading图标<template> <teleport to="#loadingMask"> <section class="mask loading-container" v-show="loadingStatus"> <div class="loading-icon spinner-border text-primary" role="status"> .原创 2021-01-27 13:25:02 · 303 阅读 · 0 评论 -
vuex decorator 的使用 #总结
import { createStore } from "vuex";export const store = createStore({ state: {}, mutations: {}, actions: {}, modules: { }});import {Module, VuexModule, Mutation, Action, getModule} from 'vuex-module-decorators'import {store} from "@..原创 2021-01-27 04:02:50 · 313 阅读 · 0 评论 -
对 scss的使用总结
可以把一些代码片段封装成mixins 方便复用//a标签样式@mixin a-link-color{ text-decoration: none; color: #333;}@mixin a-link-hover{ cursor: pointer;}@mixin a-link-hover-red{ @include a-link-hover; color: red;}//布局样式@mixin flex-row{ display: flex; flex-dir原创 2021-01-26 23:41:22 · 85 阅读 · 0 评论 -
vue中使用 video.js
使用 video.js 播放 mp4 代码如下<template> <div class="home"> <video id="player" preload="auto" controls class="video-js vjs-default-skin vjs-big-play-centered"> <p class="vjs-no-js"> no support .原创 2021-01-16 22:02:18 · 1584 阅读 · 0 评论 -
codemirror 显示代码
code mirror 高亮显示sql 代码<!DOCTYPE html><html lang="zh"><#--<head>--><#-- <meta charset="UTF-8">--><#-- <meta name="viewport"--><#-- content="width=device-width, initial-scale=1.0, maximum-原创 2020-12-14 21:20:23 · 715 阅读 · 0 评论 -
scroll view 换行解决办法
一定要加上这个width: 100%;white-space: nowrap;指定 scroll-view 不换行,这样就能横向滚动了。<scroll-view class="card-container" scroll-x="true"> <view class="item">aa</view> <view class="item">aa</view> <view class="item"&原创 2020-09-02 17:46:52 · 1803 阅读 · 1 评论 -
使用 flex布局,一行两个卡片
<view class="flex justify-around flex-wrap"> <video-card></video-card> <video-card></video-card> <video-card></video-card> <video-card></video-card> <video-card></video-card>..原创 2020-09-02 09:37:12 · 12563 阅读 · 6 评论 -
layui 点击右上角cancel 按钮后,重新刷新页面
//弹框 function openAlert(self) { // let $modal = $('#modal'); layer.open({ type:2, content:'editStudent?studentId=1', id:'888', area:['900px','600px'], .原创 2020-08-30 15:58:16 · 1125 阅读 · 0 评论 -
bootstrap label 和 input 一行显示
label和 input放到一行显示转载 2020-08-30 12:08:53 · 2785 阅读 · 0 评论 -
#项目#加载评论
后台发送一段 HTML文本,前台jQuery 将模板渲染使用ajax加载一段 HTML文本,并且替换掉原来的文本<div class="ui bottom attached segment" > <!--留言区域列表--> <div id="comment-container" class="ui teal segment"> &l原创 2020-08-24 22:16:08 · 229 阅读 · 0 评论 -
#管理系统#SemanticUI弹框
<script> function go(url) { $(".ui.modal") .modal({ //各种回调方法 onShow: function () { console.log("正在显示"); }, onVisible: function () { consol原创 2020-08-23 16:55:45 · 1058 阅读 · 0 评论 -
markdown编辑器的使用
markdown编辑器的下载和使用记得选排名前几的<section id="global"> <div style=" min-height: 700px;" class="container-fluid cm-container-white"> <div id="test-editormd"> <textarea style="display: none;" name="" id="" cols="30"原创 2020-08-08 11:54:08 · 190 阅读 · 0 评论 -
#前端#项目#vue使用echarts
npm install echarts vue-echartsmain.js 加入如下的配置import Echarts from 'vue-echarts'import 'echarts/lib/chart/line'import 'echarts/lib/chart/bar' //引入柱状图import 'echarts/lib/chart/pie' //引入饼图Vue.component('chart',Echarts)<template> <div原创 2020-07-29 11:42:06 · 139 阅读 · 0 评论 -
js#node#搭建简单服务器
npm install --save express然后npm init --yes然后npm i -S express就可以了var express = require('express')//1.创建 appvar app = express();app.listen(8080,function() { console.log('app running....')})这样就监听了 8080端口要进行请求处理响应var express = require('exp原创 2020-07-25 07:41:22 · 102 阅读 · 0 评论 -
js#offset和 scroll家族
js中有一套方便的获取元素尺寸的办法,就是 offset家族,offset家族包括:offsetWidthoffsetHightoffsetLeftoffsetTopoffsetParent <style> #p{ width:300px; height: 300px; margin: 10px; padding: 10px; background: greenyellow; } </s原创 2020-07-24 21:57:13 · 110 阅读 · 0 评论 -
css#过渡动画
<style> #p{ width: 300px; height: 400px; background-color: skyblue; box-shadow: 0 0 0px #ccc; transition: all; 0.7 ease; } #p:hover{ box-shadow: 0px 5px 10px #999; } </style> <body> <div.原创 2020-07-23 22:44:08 · 88 阅读 · 0 评论 -
css#基本选择器#聊天框三角案例
首先写一个 三角的样式,对于这种三角,可以使用伪元素,而不是单独再加 个 div <style> #p { width: 10px; height: 10px; border: 20px solid #666666; background-color: #0076BF; border: 10px solid gray; } </style> <body> <div id=.原创 2020-07-23 21:23:08 · 222 阅读 · 0 评论 -
css#基本的选择器#理论
<style> .parent div{ width: 100px; height: 100px; background-color: #0076BF; } </style> <body> <div class="parent"> <div class="a"> <div class="b"></div> </div> ...原创 2020-07-23 20:52:48 · 181 阅读 · 0 评论 -
推荐的前端插件
后期会继续收集多图上传并查看原创 2020-07-17 22:47:56 · 96 阅读 · 0 评论 -
js#原生#编辑导航栏案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAky.原创 2020-07-05 13:48:12 · 219 阅读 · 0 评论 -
js#原生#观察者模式案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .active{ color: red; } </style> </head> <body> <div class="container">.原创 2020-07-05 01:35:19 · 153 阅读 · 0 评论 -
js#原生#双向绑定案例1
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <input id="input" type="text" name="" id="" value="" /> <span id="bind"></span&.原创 2020-07-04 00:12:14 · 1773 阅读 · 0 评论 -
js#原生#双击编辑HTML元素案例
一个不错的案例转载 2020-07-03 22:54:21 · 222 阅读 · 0 评论 -
js#原生#拖拽组件的实现
实现拖拽组件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { position: relative; width: 200px; height: 20px; background: red; cursor: mov原创 2020-07-03 22:37:18 · 524 阅读 · 0 评论 -
css#原生#清除浮动影响2(对父级元素的影响)
蓝色边框塌陷了,没被子元素撑起来解决高度塌陷的方案:一种方法:直接在高度塌陷的父元素的最后,添加一个空白的 div这个 div 没有浮动,(他会跑到父元素的上面,还不能撑开父元素),然后对其清除浮动(他就会跑到子元素的下面),就可以撑开父元素了。然后就清除浮动了。这里可以用一个伪元素选择器:是伪元素,不是伪类.float::after 指的是 子元素的最后一个元素。这里插入了一个元素,清除了前面的浮动,使得父级塌陷有撑开了。总结:标准模板:<style> .原创 2020-06-26 02:15:10 · 573 阅读 · 0 评论 -
css#原生#清除浮动影响1
因为 abc 都浮动了,所以上层塌陷, box跑到 abc下面去了如果box不想被浮动元素影响,添加一个 clear:both, 这样 abc原来不浮动,box在哪,box就在哪(abc不浮动时,box所在的位置)<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">原创 2020-06-26 01:47:21 · 103 阅读 · 0 评论 -
node js安装和运行
npm install或者npm --registry https://registry.npm.taobao.org install#开发环境部署npm run dev#生产环境构建npm run build原创 2020-04-24 20:41:26 · 117 阅读 · 0 评论 -
自己动手实现一个从底部往上滑的动画 (css3的 animation实现)
<style> .post-list-row{ animation: post-list-row .9s; -webkit-animation: post-list-row .9s; } /*自定义动画*/ @keyframes post-list-row { ...原创 2020-03-05 14:47:15 · 5483 阅读 · 0 评论 -
背景图片居中(background-image)
.huojian{ background: url(img/huojian.png) center center no-repeat; background-size: auto 50%; width: 77px; height: 210px; position: fixed; right: 6px;...原创 2020-03-03 19:00:13 · 4293 阅读 · 0 评论 -
根据屏幕的大小来改变页面样式 (字体和 text-overflow等)
有一个样式需求,在移动端屏幕,要 text-overflow: ellipses, 还有要改一下 font-size1.使用 js来改,我试了下,好像有点bug ,部分标签好像搞不定<script> $(document).ready(function () { changeFontSize(); window.onresize=funct...原创 2020-03-02 20:07:15 · 279 阅读 · 0 评论 -
鼠标悬停,文章上浮,加阴影的过渡效果
<body> <div id="list8"> <section class="container8"> <img src="./img/0.jpg" alt=""> <article class="article8"> <h3>四重奏蛋糕</h3> &...原创 2020-03-02 14:36:10 · 612 阅读 · 0 评论 -
鼠标悬停,图片放大特效
.container8 img:hover{ z-index: 1; transform: scale(1.3); } .container8 img{ transition: all .8s ease }<div id="list8"> <section class="container8"> <img...原创 2020-03-02 14:33:32 · 193 阅读 · 0 评论 -
vue实现一个 todoList
v-model数据双向绑定,在 data里面注册v-on:click=“function” function在 methods 里面注册v-for 遍历列表元素1.实现一个todo List<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>...原创 2020-02-18 13:54:50 · 301 阅读 · 0 评论 -
vue.js 快速入门
个人感觉,用 vue的话就不用像原来 js操作 dom那样这么麻烦了通过一个大对象统一管理页面,进行渲染,很方便1.新建一个项目下载 js插件vue官网写一个 小 demo<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Hello worl...原创 2020-02-18 13:36:16 · 95 阅读 · 0 评论 -
flex布局
1. 指定容器为 弹性容器那么这个容器下的子元素叫做 flex item。如图所示:2.flex布局的特性给父容器加了 flex属性以后,子元素的块级特性就会消失我们可以指定 flex-direction 来回复block 属性,指定 flex-direction :column ,这样行方向就不会有 flex item 的特性(如下图所示)3. 倒序分布(方向)小程序中,vi...原创 2020-01-13 12:10:29 · 221 阅读 · 0 评论 -
如何让 textarea 的滚动条始终跑到最下方
function down() {var textarea = document.getElementById(“window-talk”);textarea.scrollTop = textarea.scrollHeight;}原创 2019-11-05 22:30:30 · 3701 阅读 · 0 评论