The_Fuir_ye-CSDN博客

原创常用CSS样式

常用CSS样式1.文字超出部分显示文字2.中英文自动换行3.设置placeholder的字体样式4.不固定高宽div垂直居中的方法5.解决IOS页面跳卡顿6.设置滚动条样式7.实现隐藏滚动条同时又可以滚动8.CSS吸气(三角形)9.Table表格合并合并10.文字之间的关键11.元素占满整个屏幕12.实现文字竖向排版13.字母大小写转换...

2021-10-29 14:40:25 401

原创大数据数值展示

效果图：<template> <div class="page"> <div class="bg-image"> <span class="text-num" v-for="(item, index) in formatZero(nums,6)" :key="index"> {{item}} </span> </div> </div></temp

2021-10-26 14:18:10 230

原创解决html中遇到标点带字换行的问题

解决html中遇到标点带字换行的问题word-wrap: break-word;overflow: hidden;text-align: justify;word-break: break-all; //兼容火狐text-align: justify;无效text-justify: distribute; //兼容火狐text-align: justify;无效

2021-10-18 15:25:15 1158

小程序安装vant插件步骤1.如果没有创建小程序项目就先创建一个小程序项目2.如果已有小程序项目：进入该项目文件目录npm init初始化项目命令安装vant：npm i @vant/weapp -S --production微信开发者工具里：工具-----构建npm完成上面会出现这个模块：miniprogram_npm文件夹微信开发者工具：详情----勾选使用npm模块使用：https://vant-contrib.gitee.io/（可参照官网使用方法）...

2021-09-14 16:08:40 1075

原创瀑布流布局

瀑布流布局1、column-count 把div中的文本分为多少列2、column-width 规定列宽3、column-gap 规定列间隙4、break-inside: avoid; 手机端瀑布流时候，会出现图片错乱，这个属性可避免元素内部断行并产生新列；<style>.waterfall{ column-count: 3; column-gap: 0;} .item{ box-sizing: border-box; br

2021-09-07 17:04:22 127

原创 vue侧边栏个头部固定（elementUi）

vue侧边栏个头部固定（elementUi）效果图<template> <div class="home-page"> <el-container ref="homePage"> <el-aside width="200px" style="background-color: rgb(84, 92, 100);"> <div class="top-logo"> <img s

2021-08-12 14:33:35 2343

原创 2021-08-12

创建vue项目1.下载安装node node.js官网下载以后双击安装一直下一步直到完成打开git Brash 或者命令提示符窗口检查node是否安装成功：node -V2.安装淘宝镜像安装命令： npm install -g cnpm --registry=https://registry.npm.taobao.org（可以使用cnpm 命令来安装模块）3.初始化项目安装vue-cli：cnpm install vue-cli -g //全局安装 vue-cli4

2021-08-12 11:56:51 91

原创冒泡排序小示例

冒泡排序var bubbleSort = function (nums) { for (let i = 0; i < nums.length; i++) { let flag = true; for (let j = 0; j < nums.length - i -1; j++) { if (nums[j] > nums[j + 1]) { swap(nums, j, j + 1); flag = false; }

2021-08-10 11:09:46 119

原创 Event Loop

Event Loop（宏观任务macroTask与微观任务microTask）–面试题过程：【宏任务（代码整体）——同步任务——微任务——DOM渲染】——宏任务——同步任务——微任务——DOM渲染…练习：console.log('1'); // ①同步任务 setTimeout(function() { // ① 宏任务 console.log('2'); process.nextTick(function() { console.log('3'); })

2021-08-10 10:42:35 95

原创计算高度动态赋值

计算高度动态赋值页面布局，分为左边和右边，右边为内容，右边为图片，要求右边图片的高度随着左边高度的变化而变化.左边：<ul class="tabNav" ref="leftList"> <li v-for="(nav, index) in navs" :key="index" class="tabNav-item" @click="changeNav(index)"> <div :class="['tabNav-item-name',{ active: ind

2021-08-09 11:17:42 510

原创 css水平垂直居中的几种方式

css水平垂直居中的几种方式方法一：绝对定位+ transition: translate(-50%,-50%)div{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}方法二：绝对定位+margin值减去盒子的一半div{ width: 100px; height: 100px; postion: absolute; top: 50%; margin：auto; margin

2021-08-06 16:39:24 302

原创 2021-08-06

CSS方法实现文字竖向排版效果图：span{ display: inline-block; font-size: 19px; font-weight: normal; font-stretch: normal; line-height: 20px; padding: 8.2% 0; letter-spacing: 0px; color: #060606; vertical-align: middle; word-break: break-al

2021-08-06 13:58:38 83

原创 vue必备安装依赖

vue必备安装依赖1.elementUI在这里插入代码片2.安装sassnpm install sass-loader node-sass --save-dev在build文件夹下的webpack.base.conf.js的rules里面添加配置{ test: /.sass$/, loaders: ['style', 'css', 'sass']}如果报错：node-sass 6.0.0版本与^4.0.0不兼容（Node Sass version 6.0.0 is incompat

2021-07-28 16:47:56 593

原创创建VUE项目安装sass报错问题

创建VUE项目安装sass报错问题1.安装命令npm install sass-loader node-sass --save-dev2.在build文件夹下的webpack.base.conf.js的rules里面添加配置{ test: /.sass$/, loaders: ['style', 'css', 'sass']}3.如果报错：node-sass 6.0.0版本与^4.0.0不兼容（Node Sass version 6.0.0 is incompatible with^4.

2021-07-28 10:31:12 648

原创获取数组的最大值、最小值的方法

获取数组的最大值、最小值的方法Math.max.apply(Array,[25,62,91,78,34,62]) // 91Math.min.apply(Array,[27,64,90,78,34,62]) // 27let arr = [10,20];let arr2 = arr.sort(function(a,b){ return b-a;});console.log(arr2[0]);let arr = [1,2,3,4] Math.max(...arr)

2021-07-08 15:46:00 454

原创移动轮播图片+视频（nuxt+vue-awesome-swiper）

移动轮播图片+视频（nuxt+vue-awesome-swiper）1.安装vue-awesome-swiper2.html<section class="banner"> <swiper :options="swiperOption" ref="videoSwiper" v-if="initOrNot"> <swiper-slide v-for="( item , index ) in BannersCn" :key="index"> <d

2021-06-29 12:06:18 340

原创创建Nuxt.js项目安装less并使用报错

创建Nuxt.js项目安装less并使用报错：（Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions is not a function）原因：less-loader的版本太高（当前为10）解决办法：降低less-loader的版本为7.3.0npm install less-loader@7.3.0 --save-dev重启后即可解决这个报错问题...

2021-06-21 15:56:03 909

原创 NUXT.js中使用Vant插件

NUXT.js中使用Vant插件1.安装依赖包安装命令：npm i vant -S2.在plugins文件夹下新建vant.js文件（分两种情况）按需引入：import Vue from 'vue'import Vant from 'vant';import 'vant/lib/vant-css/index.css' Vue.use(Vant)全局引用：import Vue from 'vue'import Vant from 'vant';import 'vant/lib/va

2021-06-21 11:40:35 1175

原创点击除了修改框以外的地方保存修改

点击除了修改框以外的地方保存修改html:<div class="EngravingModule" v-if="item.lettering"> <div class="seal"> <div class="buycort_Lettering">  <div class="inputBox" ref="container"> <span clas

2021-06-21 11:39:21 149

原创 VsCode 快速生成vue 模板(nuxt)

VsCode 快速生成vue 模板(nuxt)1.使用快捷Ctrl + Shift + P2，输入“snippets”并选择红框内的3.然后继续输入vue并选择红框内的4.在vue.json文件中添加以下代码：（可根据个人需求修改模板内容）"Print to console": { "prefix": "vue", "body": [ "<template>", "<div> $0 </div>", "</templa

2021-06-16 10:02:10 608

原创数组去重方法的一些方法

数组去重方法的一些方法1，利用ES6 Set去重（ES6中最常用）（这种去重的方法代码最少，这种方法还无法去掉“{}”空对象）var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];function unique (arr) { return Array.from(new Set(arr))}co

2021-06-15 16:16:53 125

原创 js判断数据类型的方法

js判断数据类型的方法1，typeof（用来检测一个变量的类型）2，instanceof（A instanceof B用来判断A是否属于B的实例，返回true或者false，[ ]既是arrray的实例，也是object的实例，ES5中可以用Array.isArray([])来准确判断数组的实例）3，Object.prototype.toString.call()...

2021-06-15 15:26:44 104

原创几种循环遍历的方法及用法

几种循环遍历的方法及用法1、for 循环（用于数组的循环遍历）***（常用）***let arr = [1,2,3];for (let i=0; i<arr.length; i++){ console.log(i,arr[i])// 0 1,// 1 2,// 2 3}2、for in 循环（用于遍历普通对象，for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去，所以最好在循环体内加一个判断，就用 obj[i].hasOwnProperty(i)，这样就避免遍

2021-06-15 15:09:17 7436

原创 Tab自动轮播切换内容

Tab自动轮播切换内容（nuxt）html:<section class="Topic" > <div class="content"> <div class="box"> <div class="classification"> <ul class="tabNav"> <li v-for="(nav, index) in newTabNav" :key="index" :cl

2021-06-11 11:45:18 370

原创移动点击底部弹出面板

移动点击底部弹出面板html:<div v-if="ifShowEditLetterPopup " class="edit-letter-popup"> <div class="bg" @click="ifShowEditLetterPopup = false"></div> <div class="edit-letter-box" :class="{active:ifShowEditLetterPopup}"&g

2021-06-11 11:24:48 203 2

原创 CSS自定义单选框样式

CSS单选框html:<div class="font-selection"> <div class="title">{{ $t(`${lang}.FontSelect`) }}</div> <div class="radios"> <div class="single-radio" v-for="(item,index) in fontDetail" :key="index">

2021-06-09 17:16:33 1374

原创字体自动换行第二行缩进一格（css）

字体自动换行第二行缩进一格（css）p{ font-size: 17px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: -1px; color: #000000; text-indent: -0.9em;/*em是相对单位，可根据自己实际情况来调节*/ padding-left: 0.9em;/*em是相对单位，可根据自己实际情况来调节*/

2021-05-27 14:35:19 2319

原创鼠标悬浮切换图片

(nuxt.js) 鼠标悬浮切换图片（css）html部分：<section class="new-recommendedRing" > <div v-if="language == 'en_US'" class="title-en">{{ $t(`${lang}.RecommendedRing`) }}</div> <div v-else class="title">{{ $t(`${lang}.RecommendedRing`) }}</

2021-05-17 14:34:04 246

原创弹性布局排列

弹性布局排列1,类似于以下排列样式2.父级样式 display: flex; flex-wrap: wrap; justify-content: space-between;3.子级样式 width: calc(calc(100% / 4) - 50px);

2021-05-17 13:54:35 228

原创文本内容超过两行影藏并显示省略号（css）

1.文本内容超过两行影藏并显示省略号（css） overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; /* 文本超过两行影藏并省略号显示，当前标签样式内使用padding影藏无效 */...

2021-05-17 13:52:39 186

原创（nuxt.js）点击指定地方使指定输入框自动获取焦点

（nuxt.js）点击指定地方使指定输入框自动获取焦点1.代码图片2.示例代码<div class="EngravingModule" v-if="item.lettering"><div class="seal"> <div class="buycort_Lettering">  <div class="inputBox"

2021-05-17 13:50:54 399

原创 Nuxt（Vue）+elementUI走马灯组件+html ＜video＞实现轮播视频，并自定义视频播放按钮

Nuxt（Vue）+elementUI走马灯组件+html ＜video＞实现轮播视频，并自定义视频播放按钮项目是用nuxt.js搭建的，最近需求需要首页的banner部分要图片+视频的轮播一下是完整的代码例子，因项目首页还有其他内容，我只提取出有关banner的部分相关代码<template> <div class="page"> <div class="new-index">  <

2021-05-17 12:35:41 1928 2