前端日常
关注
分享
扫一扫
前端日常
我先来一碗
我先来一碗
展开
-
CSS样式拖曳底图(一)
拖曳底图view原创 2022-06-09 11:06:39 · 333 阅读 · 1 评论 -
css-html
效果：代码：<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> &原创 2022-04-24 15:28:06 · 349 阅读 · 0 评论 -
span 文字宽度自动换行/超出部分自定义行数...显示
style="word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;"<div class="" style="margin-top:10px;background: #fff;"> <span style="word-break:normal; width:auto; display原创 2022-01-06 11:46:35 · 2761 阅读 · 0 评论 -
CSS实战 - 奇Y技巧之div展示
效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS实战 -按钮</title> <style type="text/css"> html,body{ /*box-sizing:border-box;*/ margin:0; height:100%; /*background:#000000原创 2021-10-27 11:57:08 · 195 阅读 · 0 评论 -
CSS实战 - 奇Y技巧之浮动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS实战 -浮动</title> <style type="text/css"> html,body{ /*box-sizing:border-box;*/ margin:0; height:100%; /*background:#000000;*/}.原创 2021-10-19 12:03:07 · 166 阅读 · 0 评论 -
CSS实战 - 奇Y技巧之box-shadow属性
参考 博客box-shadow属性四个值_css中的boxshadow属性详解原创 2021-10-19 11:26:33 · 145 阅读 · 0 评论 -
CSS实战 - 角标的奇Y技巧
参考文章1：暗夜无月参考文章2：自由的小白原创 2021-10-14 17:45:14 · 243 阅读 · 0 评论 -
var、let、const的区别和使用
var、let、const的区别和使用原创 2021-08-31 10:51:54 · 111 阅读 · 0 评论 -
在vue中使用svg-sprite-loader
参考地址：友情博客地址链接***正文：**1.引入依赖npm install svg-sprite-loader --save2.在assets文件夹下创建icons文件夹用来存放svg文件夹和index.js文件3.在components下创建组件SvgIcon.vue<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"/>原创 2021-08-27 16:32:03 · 1213 阅读 · 0 评论 -
Vue中出现“‘xxx‘ is defined but never used”解决办法
在文件.eslintrc.js 配置规则：源：https://blog.youkuaiyun.com/qq_33189961/article/details/107165910"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-cat原创 2021-04-01 15:47:15 · 11248 阅读 · 0 评论 -
vue 动态渲染style
:style="getMembertemporaryStatus(status)"方法： getMembertemporaryStatus(status) { if (status) { return 'background:#f5ccff' } return '' },第二种：文章：https://www.cnblogs.com/lpp-11-15/p/13163492.html<el-input .原创 2021-02-01 17:42:56 · 654 阅读 · 0 评论 -
Vue子组件调用父组件的方法
本文转载：John的WEB前端学习日记 文章地址：https://blog.youkuaiyun.com/zgrkaka/article/details/100528714第一种：直接在子组件中通过this.$parent.event来调用父组件的方法父组件：<template> <div> <child></child> </div></template><script> import ch..转载 2021-01-20 11:13:49 · 354 阅读 · 0 评论 -
Vue js 字符串和number（typeof）
console.log(typeof me_id)首先打印字段类型，在进行对比原创 2021-01-19 15:50:11 · 2034 阅读 · 0 评论 -
div距离页面底部的距离
效果：代码： <div class="1" style="background:#5cbdaa;height: 300px;margin-top: 10px;"> <div class="2"原创 2021-01-13 14:46:28 · 5392 阅读 · 0 评论 -
el-upload 按钮与普通按钮一行显示（element-ui）
参考文章：https://blog.youkuaiyun.com/weixin_30698527/article/details/94971098?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.co原创 2020-12-10 17:37:29 · 5177 阅读 · 3 评论 -
css标签总结大全
https://blog.youkuaiyun.com/amelia1560/article/details/81974993转载 2020-06-06 15:50:33 · 249 阅读 · 0 评论 -
div宽度自适应文字内容
<div class="band-bg" style="padding: 0 5px;"> <span >{{ 天猫国际 }}</span> </div>.mall-bg{ text-align: center;width:fit-content;width:-webkit-fit-content;width:-moz-fit-content; background-color:rgb(0, 0, 0); border-radiu..原创 2020-11-24 12:16:05 · 1978 阅读 · 0 评论 -
html table表格固定thead，tbody可滑动（转载）
资源来源于网络：效果：代码：<!DOCTYPE HTML><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>转载自·威易网CSS教程</title> <style> table tbody { display:block;翻译 2020-05-18 18:07:40 · 2808 阅读 · 0 评论 -
HTML之按钮hover背景变化
效果动图：代码示例：<!DOCTYPE html><html><head><style>button:hover{ background: #ccc;}.ntrol-layout .cheader .menu-bottom .yl-button { min-width: 96px; position:...原创 2020-04-13 11:38:21 · 1483 阅读 · 0 评论 -
html学习(三)之div里的拖动
文章来源：runoob效果：代码实现：<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>.droptarget { float: left; w...原创 2020-01-15 15:44:47 · 406 阅读 · 0 评论 -
html学习(四)盒子模型
三大组成部分:(1).border(盒子壁)(2).padding(内边距)(3).宽+高(width+height) (盒子内容)盒子模型:margin(外边距)+border(盒子壁)+padding(内边距)+(width+height=content内容)...原创 2018-12-21 17:40:36 · 405 阅读 · 0 评论 -
html学习(三)属性介绍
（一)属性文本:text-align: left; (1).left ( 默认:left )(2).center(3).right(二) 单行文本:line-height: 16px;垂直居中的一个方法:单行文本高度=容器高度,此时文本内容就会居中示例:<!DOCTYPE html><html> <head> ...原创 2018-12-21 17:23:41 · 217 阅读 · 0 评论 -
html学习(二)之标签
行标签：包含a、span、em、strong、img、var；（1）a标签：主要用来链接一个其他的网页；（2）span标签：主要用来对行内的文字进行一些样式以及其他的操作；（3）em标签：一般用来对文字进行强调，使用斜体体现出来；（4）strong标签：一般用来对文字进行强调，使用加粗字体体现出来；（5）img标签：图片引用标签，其中 src属性中写入图片的地址；（6）va...原创 2018-12-19 17:59:25 · 299 阅读 · 0 评论 -
JS数组排序
第一种：转载（https://blog.youkuaiyun.com/stone10086/article/details/83752227注意：array数组中要全为字符串，不能出现数字类型的，不然会出项报错；） var array = ['西城区', '海淀区', '昌平区', '朝阳区'] var resultArray = array.sort( ...原创 2019-04-01 12:19:08 · 383 阅读 · 0 评论 -
ES6新特性-函数的简写（箭头函数）
通常函数的定义方法var fn = function(...){ ...... }//例如：var add = function(a,b){ return a+b;}//或者：function fn(...){ ......}//例如：function add(a,b){ return a+b;}简写方法速记将原函数的“f...转载 2019-01-06 12:06:53 · 1758 阅读 · 0 评论 -
JavaScript中函数定义和调用
在JavaScript中，定义函数的方式如下：abs()函数的定义如下：function指出这是一个函数定义； abs是函数的名称； (x)括号内列出函数的参数，多个参数以,分隔； { ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。请注意，函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回。因此，函数内部通过条件判断和循环可以实...转载 2019-01-06 11:57:21 · 490 阅读 · 2 评论 -
javaScript学习(一)之字符串的切割
代码：效果：需求截取第三部分：代码：效果：原创 2018-05-31 11:41:38 · 455 阅读 · 0 评论 -
javaScript学习(一)之DOM简单操作修改内容和标签属性
代码效果：原创 2018-05-31 10:55:06 · 1663 阅读 · 0 评论 -
javaScript学习(一)之onmouseover和onmouseout事件的鼠标移动
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><meta> <style> #ceshi{width: 200px;height: 100px;background: #68e} </s原创 2018-05-29 16:42:51 · 1075 阅读 · 0 评论 -
vuex数据更新,页面数据没有跟着刷新
conputed计算属性，是依赖于数据属性中的数据存在的，只有数据依赖中的数据变化，计算数据才会变化，视图才会更新原创 2018-06-01 14:40:05 · 23441 阅读 · 0 评论 -
vuex 最简单的入门与内附示例样本(一)
初步认识:单一的使用场景:vuex使用场景:当组件2---->用getter获取数据----->从store里面取添加组件---->用mutation---->更改store的数据尝试做一个例子出来:(1.)建一个vuex的项目:浏览器画面:(2)....原创 2018-05-24 16:31:09 · 444 阅读 · 0 评论 -
Vue子组件调用父组件的方法
参考文章：https://blog.youkuaiyun.com/zgrkaka/article/details/100528714原创 2020-11-26 10:00:35 · 158 阅读 · 0 评论 -
vue el-dialog 点击空白不消失
<template> <el-dialog :close-on-click-modal="false" :visible.sync="dialog" :title="编辑信息" append-to-body width="570px"> </el-dialog></template>添加：:close-on-click-modal="false"原创 2020-11-16 11:26:12 · 883 阅读 · 0 评论 -
Vue-Injection elForm not found
将el-form-item标签是否在el-form标签包裹下原创 2020-06-09 16:20:41 · 2812 阅读 · 0 评论 -
基于element ui下拉框的省市二级联动Vue组件
参考链接：https://blog.youkuaiyun.com/u013253924/article/details/84372034翻译 2020-04-21 10:15:47 · 1921 阅读 · 0 评论 -
vue dialog关闭触发事件
<el-dialog title="房间" :visible.sync="dialog" size="small" @close='close'></el-dialog>//关闭弹框的事件close(){ console.log('点击了关闭按钮======')}原创 2020-04-19 20:17:28 · 11653 阅读 · 0 评论 -
vue el-input输入框输入纯数字
原文：https://blog.youkuaiyun.com/weixin_40137911/article/details/84754029?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog...转载 2020-04-17 14:35:47 · 3607 阅读 · 0 评论 -
vue async/await同步
async created() { await List({}).then((response) => { console.log(response) this.Data = response }) this.change() },methods: { change() { // 会议选择框选择 c...原创 2020-04-03 20:18:42 · 1497 阅读 · 0 评论 -
Vue el-select 组件设置 clearable
底层源码：handleClearClick(event) { this.deleteSelected(event); },deleteSelected(event) { event.stopPropagation(); const value = this.multiple ? [] : ''; this.$emi...原创 2020-03-05 15:16:28 · 31083 阅读 · 0 评论 -
vue学习（五）el-upload 组件自动上传
demo直接提交类型：data带参数<el-table-column label="数据" align="center" prop="data"> <template slot-scope="scope"> <el-upload ...原创 2020-02-28 14:53:34 · 3454 阅读 · 0 评论