常见代码
有用的网址汇总
超出省略号显示
1）单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
2）多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow:ellipsis;
JavaScript SubString、substr和slice的区别
1）substr返回的是一个从指定位置开始的指定长度的字符串。
var str="Hello Word!";
var s=str.substr(7,2);
alert(s); // "or"
2）substring 返回从一个指定位置到另一个指定位置之间的值。
var str="Hello Word!";
var s=ss.substring(1,3);
alert(s); // "el"
3）slice 返回从指定位置到最后位置之间的值。
var str="Hello Word!";
var s=str.slice(2);
alert(s); // "llo Word!"
git 常用命令
git status 查看状态
git add . 全部添加到暂存区
git commit -m"备注说明" 提交本地仓库
git branch wss 创建wss分支
git checkout master 切换到主分支
git checkout wss 切换到wss分支
git merge wss 将wss分支上的内容合并到master主分支
git branch -d wss 删除wss分支
git log 查看全部日志（只要提交这个git仓库的所有人员）
git log --author="提交人" 查看这个提交人的所有日志（按q结束，按 j 或者 向下箭头继续往下看）
git show commitId 查看那个提交id的日志（commitId 在上，备注在下，提交日期是从最新的往以前的排）
$ git config user.name 查看本机git的用户名
$ git config user.email 查看本机git的邮箱地址
$ git config --global user.name "username" 修改用户名
$ git config --global user.email "email" 修改邮箱地址
flex布局
1）6大属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
2）主轴方向（项目的排序方向）
flex-direction:row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿
3）flex-wrap属性（轴线换行）
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行
wrap:换行，第一行在上方
wrap-reverse:换行，在第一行的下方
4）flex-flow（flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。）
flex-flow:<flex-direction> || <flex-wrap>;
5）justify-content属性（主轴的对齐方式）
justify-content:flex-start | flex-end | center | space-between |space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between:两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
6）align-items属性（项目在交叉轴上如何对齐。）
align-items:flex-start | flex-end | center |baseline | stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
小程序获取两地的距离
1）封装计算方法
var RADIUS = 6371;
var toRad = function(n) {
return n * Math.PI / 180;
};
var getDistance = function(from, to) {
var fromLat = from[0];
var fromLon = from[1];
var toLat = to[0];
var toLon = to[1];
var dLat = toRad(toLat - fromLat);
var dLon = toRad(toLon - fromLon);
var fromLat = toRad(fromLat);
var toLat = toRad(toLat);
var a = Math.pow(Math.sin(dLat / 2), 2) +
(Math.pow(Math.sin(dLon / 2), 2) * Math.cos(fromLat) * Math.cos(toLat));
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return RADIUS * c;
};
var measurePath = function(points) {
return points.reduce(function(memo, point) {
var distance = memo.lastPoint === null ? 0 : getDistance(memo.lastPoint, point);
return { lastPoint: point, distance: distance + memo.distance };
}, { lastPoint: null, distance: 0 }).distance;
};
module.exports = function(fromLat, fromLon, toLat, toLon) {
if(typeof fromLat === 'number'){
return getDistance([fromLat, fromLon], [toLat, toLon]);
} else {
return measurePath(fromLat);
}
};
2）距离单位判断方法
// 距离单位的判断
const format_gpsdistance = function(val) {
let km = Math.round(val);
return (km > 0 ? (val.toFixed(1) + 'km') : (Math.round(val * 1000) + ' m'));
}
3）计算距离方法
// 获取当前位置并且调用相隔距离计算的方法（即目的地的经纬度-当前的经纬度）
const count_gpsdistance = function(widgetname, index, i) {
var _this = this;
// 定义目的地的数据数组
var arr = _this.data.widgets[widgetname][index].items;
// 获取当前位置
wx.getLocation({
type: 'gcj02',
success: function(res) {
let set = {};
// 获取当前经纬度
// 这个计算待确认，用于减少偏差，不能大于100米距离
let diff = getGpsDistance(_this.data.userLatitude * 1, _this.data.userLongitude * 1, res.latitude * 1, res.longitude * 1);
if (diff > 0.1) {
_this.setData({
userLatitude: res.latitude,
userLongitude: res.longitude,
});
}
// 以上待确认
let gpsdistance = getGpsDistance(res.latitude,
res.longitude, arr[i].cooperative.latitude, arr[i].cooperative.longitude);
arr[i].cooperative.gpsdistance = format_gpsdistance(gpsdistance);
set['widgets.cooperative.' + index + '.items'] = arr;
_this.setData(set);
}
},
fail: function(res) {
do something
}
});
}
小程序获取可视化的宽高
var w = wx.getSystemInfoSync().windowWidth;
var h = wx.getSystemInfoSync().windowHeight;
本地分支提交代码步骤
1、在自己的分支上修改代码，修改完 git status
2、根据状态 git add . 或者 git commit -m"备注"
3、转到主分支 git checkout master
4、在主分支 git status
5、在主分支 git pull
6、把自己分支修改的内容合并到主分支 git merge wss
7、最后提交 git push
注意两点：1、有冲突解决了必须重新add ； 2、提交之前必须是先在主分支 git pull 然后才 git push
（另一种情况：在自己的分支上修改代码，但是未修改完，需要拉取最新代码，先转为主分支拉取最新代码然后再转为自己的分支继续修改，是否正确？）
拉取最新代码（在自己的分支上修改代码，未修改完但是需要拉取最新代码）
1、在自己的分支上 add . 以及 commit -m "备注" 后
2、切换到主分支 checkout master
3、在主分支 git pull
4、切换回自己的分支 checkout wss
小程序之在家办公
1、用了另一个git账号密码拉取项目代码，需要重新生成密钥然后发给后台开放权限；（如果是http地址就可以随便拉）
2、拉取项目下来，报config.js文件未定义，则直接复制config.eg.js文件改个名字即可；
3、报app.json文件中config.js的wxml文件未找到，则把app.json中配置的pages路径里的config/config.js删除；
4、报插件未授权使用，在公众号开发工具设置关联该插件；
5、报request未授权问题，在开发工具项目配置中，有域名配置，在公众号开发可以设置添加修改为自己项目的测试上线域名；
6、在后台已经处理好微信手机号登录或者手机好登录，报appid没有权限，则需要自己在project.config.json设置为后台给的appid，而不是自己的电脑上的或者说自己公众号的appid（如果在开启项目的时候用的是后台给的appid，那可能就不用配置了，具体看project.config.json里配置的是否是后台给的，这样才能有权限）
小程序中调用自定义函数
定义好函数，调用的时候保证this指向app的实例，如
onLoad: function(options) {
var _this = this;
util.checkMember.call(this, function() {
util.wxRequest({
url: config.BASE_URL + '/m/myserviceorders-detail-'+order_id+'.html',
success: function(res) {
var pagedata = res.data;
var verificationtime_time = _this.timeFormat(pagedata.order.verificationtime);
_this.setData({
verificationtime: verificationtime_time
})
}
})
)}
},
add0:function(m){ return m < 10 ? '0' + m : m },
timeFormat:function(timestamp) {
var time = new Date(parseInt(timestamp) * 1000);
var year = time.getFullYear();
var month = time.getMonth() + 1;
var date = time.getDate();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
return year + '-' + this.add0(month) + '-' + this.add0(date) + ' ' + this.add0(hours) + ':' + this.add0(minutes) + ':' + this.add0(seconds);
}
小程序日期+时间显示
//获取当前时间戳
var timestamp = Date.parse(new Date());
timestamp = timestamp / 1000;
console.log("当前时间戳为：" + timestamp);
//获取当前时间
var n = timestamp * 1000;
var date = new Date(n);
//年
var Y = date.getFullYear();
//月
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
//日
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
//时
var h = date.getHours();
//分
var m = date.getMinutes();
//秒
var s = date.getSeconds();
console.log("当前时间：" +Y+M+D+h+":"+m+":"+s);
//转换为时间格式字符串
console.log(date.toDateString());
console.log(date.toGMTString());
console.log(date.toISOString());
console.log(date.toJSON());
console.log(date.toLocaleDateString());
console.log(date.toLocaleString());
console.log(date.toLocaleTimeString());
console.log(date.toString());
console.log(date.toTimeString());
console.log(date.toUTCString());
时间戳转换成日期格式
/** 时间戳转日期 格式2017-01-20 00:00:00*/
getLocalTime: function (ns) {
//needTime是整数，否则要parseInt转换
var time = new Date(parseInt(ns) * 1000); //根据情况*1000
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
},
//小于10的补零操作
add0:function(m){
return m < 10 ? '0' + m : m
},
/**时间戳转日期 格式17/12/28*/
getYMD: function (ns){
var allStr = this.getLocalTime(ns);
var year = allStr.substr(2,2);
var month = allStr.substr(5, 2);
var day = allStr.substr(8, 2);
return year+'/'+month+'/'+day;
},
/**时间戳转日期 格式2017/12/28*/
getYearMD: function (ns) {
var allStr = this.getLocalTime(ns);
var year = allStr.substr(0, 4);
var month = allStr.substr(5, 2);
var day = allStr.substr(8, 2);
return year + '/' + month + '/' + day;
},
/**时间戳转日期 格式2018年01月01日*/
getChaYMD: function (ns) {
var allStr = this.getLocalTime(ns);
var year = allStr.substr(0, 4);
var month = allStr.substr(5, 2);
var day = allStr.substr(8, 2);
return year + '年' + month + '月' + day + '日';
},
对象数据判断
Object.keys(object) 返回数组 长度为0就是没有数据
vue项目运行
在本地运行时需要在config文件夹中index.js中修改两处（当打包给后台部署的时候记得改回来）（编译调式的时候只能在本地上看效果）
odule.exports = {
dev: {
env: require('./dev.env'),
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: './', // 修改成 '/'
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
env: require('./prod.env'),
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', // 修改成 '/'
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
小程序点击预览报错某个文件没找到
因为在app.json配置路由的时候多写了一个/
小程序自定义遮罩层滚动下拉没遮住
因为遮罩层用了绝对定位，改成fixed固定定位就好了
vue父组件传值给子组件数据不实时更新问题（子组件没拿到实时的数据）
在子组件用watch监听父组件传过来的值，然后在methods写请求方法，直接使用this.index当参数请求，在watch里调用方法即可
vue中watch的使用
前端框架Vue中methods,computed,watch的调用时机的理解
ajax和axios的区别
点击查看
1、区别：
axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
axios是ajax ajax不止axios
axios：
axios({
url: '/getUsers',
method: 'get',
responseType: 'json', // 默认的
data: {
//'a': 1,
//'b': 2,
}
}).then(function (response) {
console.log(response);
console.log(response.data);
}).catch(function (error) {
console.log(error);
}）
ajax：
$.ajax({
url: '/getUsers',
type: 'get',
dataType: 'json',
data: {
//'a': 1,
//'b': 2,
},
success: function (response) {
console.log(response)；
}
})
2、优缺点：
ajax：
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务
axios：
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）
阿里巴巴矢量图引入与添加
参考点击
1、在阿里巴巴矢量图标官网登陆自己账号，然后添加项目
2、选好图标，然后加入购物车
3、点击购物车，然后添加至项目
4、下载至本地，在本地打开压缩包解压，把需要的文件复制到项目assets下icon文件夹里
5、在mian.js里引入iconfont.css
6、在项目直接使用图标类名或者unicode
7、如果后续继续添加图标，则最好多加几个先，在我项目里点击生成代码，此代码复制到自己本地新建的iconfont.css 文件中即可！
对于后台返回的html修改样式
使用/deep/ 深度修改，最好再加 !important后面
阿里巴巴矢量图标放到项目中颜色变了的问题
自己在项目中修改
身份证号正则
vuex的使用（详见h5 phoneNum页面）
1、定义好store里的全部方法
2、在页面通过this.
s
t
o
r
e
.
d
i
s
p
a
t
c
h
（
′
a
c
t
i
o
n
F
n
’
,
请
求
获
取
的
数
据
）
赋
值
给
s
t
a
t
e
里
某
个
对
象
如
果
是
修
改
某
个
s
t
a
t
e
里
对
象
的
值
则
需
要
：
1
、
取
出
旧
对
象
：
v
a
r
o
l
d
O
b
j
=
t
h
i
s
.
store.dispatch（'actionFn’, 请求获取的数据）赋值给state里某个对象 如果是修改某个state里对象的值 则需要： 1、取出旧对象：var oldObj = this.
store.dispatch（′actionFn’,请求获取的数据）赋值给state里某个对象如果是修改某个state里对象的值则需要：1、取出旧对象：varoldObj=this.store.state.userInformation
2、请求成功后的新值： var newPhone = res.data.data.mobile
3、替换旧的值：oldObj.mobile = newPhone
4、组成新对象：var newObj = oldObj
5、更新vuex： this.$store.dispatch(‘setUserInformationAction’, newObj)
自定义数组循环添加类名
在html中
<ul class="loginType">
<li v-for="( item , index ) in liList"
:key="index"
v-on:click="addClass(index)"
:class="{classred:index==current}"><i :class=item.iconArea></i>{{item.title}}</li>
</ul>
在js中
liList: [
{ title: '手机号', iconArea: 'iconfont iconshouji--' },
{ title: '身份证号登录', iconArea: 'iconfont iconshenfenzheng-tianchong' }
]
js计算百分比
(Math.round(num / 21 * 100)) + '%'
视频状态（刚开始默认第一正在播放，其它按照后台返回的状态渲染）
html部分：
<ul class="list_items">
<!-- ing正在播放 -->
<!-- finish已看完 -->
<li :class="item.class"
@click="itemClick(item,index)"
v-for="(item,index) in mp4Data"
:key="index"
>
<h5>{{index + 1 }}.{{item.biaoti}}</h5>
<div class="item_bt">
<span v-if="item.wancheng === 1 && item.class !== 'active'">已看完</span>
<span v-if="(item.wancheng === 1 || item.wancheng === 0) &&item.class == 'active'">正在播放</span>
<span v-if="item.wancheng === 0 && item.class !== 'active'">未观看</span>
<em class="time">{{item.shichang}}</em>
</div>
</li>
</ul>
js部分：
// 数据请求
getdata() {
zhibojian(this.mp4Id, this.$store.state.userInformation.id)
.then((res) => {
res.data.mp4_data.forEach(item =>{
console.log(item)
if (item.wancheng == 0) {
// 未观看
item.class = 'item'
} else if (item.wancheng == 1) {
// 已看完
item.class = 'finish'
} else {
// 未看完
item.class = 'active'
}
})
this.mp4Data = res.data.mp4_data
// 进来第一个视频默认正常播放中
this.mp4Data[0].class = 'active'
this.video = res.data.video
this.chapterId = res.data.video.id
this.biaoti = res.data.video.biaoti
this.mp4 = res.data.mp4
this.onePhoto = res.data.config.title
this.twoPhoto = res.data.config.keywords
this.threePhoto = res.data.config.description
// 默认播放第一个视频
this.playVideo(0)
})
},
// 点击某个视频获取当前以及索引
itemClick (item,index) {
this.mp4Data.forEach(item2 =>{
if (item2.wancheng == 0) {
// 未观看
item2.class = 'item'
} else if (item2.wancheng == 1) {
// 已看完
item2.class = 'finish'
} else {
// 未看完
item2.class = 'active'
}
})
item.class = 'active'
this.biaoti = item.biaoti
// this.mp4_id = item.mp4_id
this.chapterId = item.id
this.playVideo(index)
},
三个样式（item,finish,active）
从仓库拉下来的项目只有三个文件，前端需要搭建vue脚手架
1、使用https地址把项目拉取下来
2、在本地先自己搭建一个项目[摘自](https://www.cnblogs.com/qq1272850043/p/9812421.html)
npm install -g @vue/cli
vue create project-name
npm run serve
打开http://localhost:8080
3、把project-name中的所有文件直接复制到自己的项目中
vscode 使用ESLint 自动检查，保存时自动格式化
全局安装 ：npm install -g eslint （项目搭建的时候选择安装就有了）
打开vscode 点击 “文件”-----》“首选项”----》“设置”，在右侧“用户设置”里加入一下配置：
//eslint 代码自动检查相关配置（setting.json文件中）
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [".js",".vue"]
},
"eslint.validate": [
"javascriptreact",
"vue",
"javascript", {
"language": "vue",
"autoFix": true
},
"html", {
"language": "html",
"autoFix": true
}
],
保存的时候可能会提示一堆英文，大概意思是手动移除..... 点击yes就好了
控制台报错sockjs.js?9be2:1606 GET http://192.168.3.37:8080/sockjs-node/info?t=1593483841797 net::ERR_CONNECTION_REFUSED
不影响的 是定义了接口然后未使用
代码提交出现的权限问题
在git push 的时候 提交是成功的 但是后面报remote: Access deny: You do not have permission to push to protection branch 'master'
remote: Matching rule: 'master'. creation time: 2020-06-29 01:18:00
remote: Please visit: https://gitee.com/help
To https://gitee.com/edward27/NineForesight_Web.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://gitee.com/edward27/NineForesight_Web.git'
去仓库刷新的时候提交的内容没看到，原因是后台创建仓库的时候设置了权限！
vue 路由懒加载
import异步加载的写法实现页面模块lazy loading懒加载（Vue中的路由异步加载）：
Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
}
Vue使用socket
第一步：npm install vue-socket.io @3.0.7 --save 以及 npm install socket.io-client
注：一开始我直接下了最新的3.0.9，然后就是永远连接不上，后面改了版本就可以了
第二部：在main.js引入
import VueSocketio from 'vue-socket.io'
import socketio from 'socket.io-client'
Vue.use(new VueSocketio({
debug: true,
connection: socketio('ws://118.89.35.95:10002')
}))
注：后台只给了118.89.35.95:10002 ，我自己加ws://（ws: http wss: https）
第三步：在组件内直接使用
mounted () {
this.$socket.emit('connect') // 触发socket连接
},
destroyed () {
this.$socket.emit('disconnect')
},
sockets: {
// 查看socket是否渲染成功
connect (data) {
console.log('连接connect', data)
},
// 检测socket断开连接
disconnect () {
console.log('socket已断开连接')
},
// 重新连接socket事件
reconnect (data) {
console.log('重新连接', data)
this.$socket.emit('connect', 1)
},
R2C_Login (data) {
console.log('接收消息', data)
},
C2R_Login (data) {
console.log('发送消息', data)
}
},
methods: {
// 点击登录调用方法
submitForm (formName) {
var data = {
RpcId: 90,
Account: this.ruleForm.userName,
Password: this.ruleForm.password
}
console.log(JSON.stringify(data))
// 发送数据
this.$socket.emit('disconnect', JSON.stringify(data))
}
}
vue之轮播图（轮播上布局自定义）(使用element-ui中的走马灯)
// html (布局自己写)
<el-carousel trigger="click">
<el-carousel-item>
<div class="lunbotu">
<div class="lunbotu_left">
<div class="lunbotu_top">
<div class="lunbotu_title">
<span>专业人士都在用的调研平台</span>
</div>
<div class="lunbotu_des">
<span>平台是一个汉语词语，读音为ping tai,一指提供人们舒展才能的舞台,二指为操作方便而设置的工作台.</span>
</div>
<div class="lunbotu_line">
<span></span>
</div>
</div>
<div class="lunbotu_bm">
<div class="releaseBtn" @click="releaseNeed">
<span>发布需求</span>
</div>
</div>
</div>
<div class="lunbotu_right">
<div class="lunbotu_img">
<img src="../assets/imgs/des.jpg" alt="">
</div>
</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="lunbotu">
<div class="lunbotu_left">
<div class="lunbotu_top">
<div class="lunbotu_title">
<span>专业人士都在用的调研平台</span>
</div>
<div class="lunbotu_des">
<span>平台是一个汉语词语，读音为ping tai,一指提供人们舒展才能的舞台,二指为操作方便而设置的工作台.</span>
</div>
<div class="lunbotu_line">
<span></span>
</div>
</div>
<div class="lunbotu_bm">
<div class="releaseBtn" @click="releaseNeed">
<span>发布需求</span>
</div>
</div>
</div>
<div class="lunbotu_right">
<div class="lunbotu_img">
<img src="../assets/imgs/des.jpg" alt="">
</div>
</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="lunbotu">
<div class="lunbotu_left">
<div class="lunbotu_top">
<div class="lunbotu_title">
<span>专业人士都在用的调研平台</span>
</div>
<div class="lunbotu_des">
<span>平台是一个汉语词语，读音为ping tai,一指提供人们舒展才能的舞台,二指为操作方便而设置的工作台.</span>
</div>
<div class="lunbotu_line">
<span></span>
</div>
</div>
<div class="lunbotu_bm">
<div class="releaseBtn" @click="releaseNeed">
<span>发布需求</span>
</div>
</div>
</div>
<div class="lunbotu_right">
<div class="lunbotu_img">
<img src="../assets/imgs/des.jpg" alt="">
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
去掉element-ui中tab栏的下划线
/deep/.el-tabs__nav-wrap::after {
position: static !important;
}
在element-ui中表单组件中，使用select不能触发问题
<!-- :inline="true" 行内表单域 -->
<el-form ref="form" :model="form" label-width="90px" :inline="true">
<el-form-item label="项目编号:" class="projectNum">
<el-input v-model="form.number"></el-input>
</el-form-item>
<el-col :span="10">
<el-form-item label="项目类型:" class="projectType">
<el-select v-model="form.type" placeholder="项目类型">
<el-option label="项目类型一" value="guangzhou"></el-option>
<el-option label="项目类型二" value="shenzhen"></el-option>
</el-select>
<img src="../../assets/releaseProgress/xiala.png" alt="" class="selectIcon">
</el-form-item>
</el-col>
</el-form>
如果你使用了<el-col> 却没有:inline="true"，则是触发不了下拉操作的
element-ui中button鼠标移入背景色改变（几个按钮中选中某一个）
// button 鼠标移入背景色不变(在一个盒子下有几个按钮的情况)
/deep/ :nth-child(1).el-button:hover {
background-color: #fff;
}
暂存
html中显示特殊符号: https://blog.csdn.net/sunbocong/article/details/81032758
CSS 画一条横线/竖线: https://blog.csdn.net/qq_31878883/article/details/83418447
tower: https://tower.im/teams/9f69a12b20945f33357338c50bfb12f4/projects/
洛客： https://www.lkker.com/
蓝湖： https://lanhuapp.com/web/#/item?tid=47579ea0-10fc-4abf-94cc-47a5c108a1aa&fid=all
公司官网： http://www.9foresight.com/solutions
奉贤旗github: https://github.com/fengxianqi
单点登录
单点登录是后台为主，后台判断是否登录，如果没登录，后台返回错误代码，并重定向公共登录页面，登录成功返回项目地址，并在url携带临时token。前端获取临时token并向后台换取真实token并获取用户信息
vue中element-ui输入框无效问题（即不显示输入的内容）
切记：必须要有v-model绑定一个变量
vsc提示信息处理
出现这种情况点击“是”
vue动画横屏出现滚动条以及颤动问题
给包括动画区域以及其他x轴内容的最大盒子加
overflow-x: hidden; // 动画出现滚动条处理
在动画样式中加
.slide-fade1-leave {
opacity: 0;
transform: translateX(-100%);
position: absolute; // 解决颤动问题
}
vue输入框聚焦和失焦样式改变
聚焦时边框使用 outline: none即可去边框；
默认边框使用 border: none去边框
// 输入框默认样式覆盖
/deep/ .el-form {
/deep/ .el-input {
font-size: 16px;
/deep/ .el-input__inner {
padding: 0px 50px;
border: none;
border-bottom: 1px solid #eee;
border-radius: 0px;
}
/deep/ .el-input__inner:focus {
padding: 0px 50px;
border: none;
border-bottom: 1px solid #3f2087;
border-radius: 0px;
}
}
}
vue导航栏吸顶效果（滚动始终固定在顶部）
mounted () {
// 事件监听滚动条
window.addEventListener('scroll', this.watchScroll)
},
methods: {
watchScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// 当滚动超过 50 时，实现吸顶效果
if (scrollTop > 49) {
this.navBarFixed = true
} else {
this.navBarFixed = false
}
}
}
在对应的标签中加入修改后的样式
<div :class="navBarFixed == true ? 'navBarWrap' :''">
.navBarWrap {
position:fixed;
top:0;
z-index:999;
}
修改vsc背景
源地址
注意：安装这个插件的时候看内容，它会有个恶作剧，就是编辑器会提示code损坏，点击齿轮，点击不再提示就可以了，小伙伴们别慌！
html5特殊字符
< < 小于号或显示标记
> > 大于或显示标记
« 《 前书名号或显示
» 》 后书名号或显示
& & 可用于显示其他特殊字符
" “ 引号
® ® 已注册
© © 版权
™ ™ 商标
不断行的空白
× x 表示关闭的小x
html显示特殊字符：
源地址
sass中hover以及active的写法
比如在li标签上使用
li {
&::after {
position: absolute;
right: vw(30);
bottom: 0;
left: vw(30);
height: vh(1);
background-color: #dfdfe1;
content: '';
}
&.active,
&:hover {
border-bottom: 4px solid #3F2087;
}
}
注意: active是一个 . hover是冒号 :
opacity属性
如果父元素使用了opacity属性，则子元素会继承父元素的透明值，不管子元素怎么设置，所以要使用rgba设置透明度
vue中data图片引入路径写法
data () {
return {
src:require('../assets/c.png')
}
},
放在数组中这样表示：
imgBase64: [require('../../assets/imgs/zhuce.jpg')],
关于element-ui中switch组件文字显示在开关上
html代码，最好取个类名，预防污染
<el-switch
class="switchCom"
v-model="scope.row.isOpen"
active-color="#8091DF"
inactive-color="#C0CCDA"
active-text="是"
inactive-text="否"
@click.native="set(scope.$index, scope.row)"
></el-switch>
css代码，我放在公共样式，即全局
// switch开关样式，全局样式，使用时加switchCom类名 项目中 active-color="#8091DF" inactive-color="#C0CCDA"
.switchCom {
// 左边文字的位置
.el-switch__label--left {
position: relative;
left: 45px;
color: #fff;
z-index: -1111;
}
// 按钮的宽度
.el-switch__core{
width: 50px !important;
}
// 右边文字位置
.el-switch__label--right {
position: relative;
right: 46px;
color: #fff;
z-index: -1111;
}
// 操作开关时的样式
.el-switch__label--right.is-active {
z-index: 1111;
color: #fff !important;
}
// 操作开关时的样式
.el-switch__label--left.is-active {
z-index: 1111;
color: #fff !important;
}
}
点击改变样式（加多一个打勾）
.deliveryType_ul {
display: flex;
flex-wrap: wrap;
.deliveryType_li {
width: 120px;
height: 36px;
line-height: 36px;
background: #fff;
text-align: center;
border: 1px solid #ccc;
border-radius: 22px;
margin-right: 60px;
margin-bottom: 28px;
span {
font-size: 16px;
color: #848484;
}
&.isActive {
text-align: center;
background: #8091DF;
.el-icon-check {
color: #fff;
margin-right: 2px;
}
span {
color: #fff;
}
}
}
}
选中子元素最后一个类
<div class="commentList">
<article class="comment " id="com21"></article>
<article class="comment " id="com20"></article>
<article class="comment " id="com19"></article>
<div class="something"> hello </div>
</div>
选中id位com19的元素
.comment:last-of-type {
border-bottom:none;
margin-bottom:0;
}
vertical-align属性
<el-button round class="onPayMoneyBtn" @click="onPayMoney">
<img src="../../assets/operation/icon-zhifuanquan.png" alt="" class="onPayMoneyBtn_img">
支付保证金
</el-button>
样式会出现问题，就是图片会相比文字高出一点点，即居中不了，
给img{
vertical-align: middle
}
js操作数组常用方法
push()方法可以在数组的末属添加一个或多个元素
shift()方法把数组中的第一个元素删除
unshift()方法可以在数组的前端添加一个或多个元素
pop()方法把数组中的最后一个元素删除
element-ui中el-input需要改变placeholder的字体颜色以及位置
input::-webkit-input-placeholder {
color: #c0c4cc;
}
input::-moz-input-placeholder {
color: #c0c4cc;
}
input::-ms-input-placeholder {
color: #c0c4cc;
}
/deep/ input::-ms-input-placeholder{text-align: center;}
/deep/ input::-webkit-input-placeholder{text-align: center;}
如果不生效，加/deep/
关于使用element-ui中表单label宽度的值修改
需求：每一个label的宽度不一致，或者说是行内，但是字数不同，宽度也不一样，则需要我们为每一个 标签设置相应的宽度
input占位符文字颜色修改
input::-webkit-input-placeholder {
color: #c7c7c7;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #c7c7c7;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #c7c7c7;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #c7c7c7;
}
vue输入框input以及element-ui中el-input组件只能输入数字
input标签或者el-input标签
<input type="text" placeholder="请输入手机号" class="search_txt" v-model="searchPhone" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')">
<el-input v-model="searchForm.phone" placeholder="请输入手机号" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
方法是一致的
只能输入数字： oninput = “value=value.replace(/[^\d]/g,’’)”
最大长度11位： maxlength=“11”
关于element-ui日期组件报错
报错图示：
代码：
html:
<el-form-item label="招标截止时间:" class="endTime" prop="endTime">
<el-date-picker
@focus="changeIcon4"
@blur="noChangeIcon4"
v-model="form.endTime"
type="datetime"
format="yyyy-MM-dd hh:mm"
value-format="yyyy-MM-dd hh:mm"
placeholder="选择日期时间"
default-time="12:00:00"
:picker-options="pickerOptions">
</el-date-picker>
<img src="../assets/releaseProgress/xiala.png" alt="" class="selectIcon" :class="{'isChange4': isChange4}">
</el-form-item>
js:
data(){
return {
pickerOptions: { // 日期选择禁用
disabledDate (time) {
// 只能选择大于今天的时间
return time.getTime() < Date.now()
}
},
rules: {
endTime: [
{ type: ‘date’, required: true, message: ‘请选择招标截至时间’, trigger: ‘change’ }
],
}
}
}
首先说明出现原因，elementUI的日期选择器【el-date-picker】在加上格式
value-format="yyyy-MM-dd" format="yyyy-MM-dd"
和校验规则时
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
当选择日期时间后就会出现上图的报错。
解决：type: ‘date’ 改为 type: ‘string’
{ type: 'string', required: true, message: '请选择日期', trigger: 'change' }
vue当前页强制刷新
setTimeout(() => {
location.reload() // 强制刷新
}, 1000)
vue获取页面路由
当前页面
完整url可以用 window.location.href
路由路径可以用 this.$route.path
路由路径参数 this.$route.params
2021，不平凡不妥协
扫一扫
2405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
