湖南长沙前端开发与培训－通途工作室-前端开发,技术培训,动效研究,求职信息

在contenteditable的div中的段落文字中获取光标位置，并在光标处插入字符

作者:admin 日期:2021-12-23

vue项目中的一个小需求如题，代码整理如下：

Javascript代码

<template>
<el-container class="about">
<el-main>
<section class="bgBox">
<h1>在诗句上任意位置点击，再点击“插入字符”按钮，即可在光标处插入字符</h1>
<div class="h20"></div>
<el-button type="primary" @click="insertChar">插入字符</el-button>
<div class="h30"></div>
<div class="edit" contenteditable>
<p
v-for="(item, index) in sentenses"
:key="item"
@click="getCurrentSent(index)"
>
{{ item }}
</p>
</div>
</section>
</el-main>
</el-container>
</template>
<script>
const insertStr = (soure, start, newStr)=>{
return soure.slice(0, start) + newStr + soure.slice(start);
}
import { getTableList, uploadFile } from "@/api/system/api_user";
export default {
data() {
return {
current_sent: null,
sentenses: [
"凌波不过横塘路。但目送、芳尘去。",
"锦瑟华年谁与度。月桥花院，琐窗朱户。只有春知处。 ",
"飞云冉冉蘅皋暮。彩笔新题断肠句。若问闲情都几许。",
"一川烟草，满城风絮。梅子黄时雨。"
]
};
},
computed: { },
methods: {
getCurrentSent(index) {
// 获取当前句子
this.current_sent = index;
},
insertChar() {
// 获取getSelection对象，这个对象有很多内容，自己找到有用的数据
let select = window.getSelection();
// 利用insertStr函数，在光标位置插入###三个字符
let newSent = insertStr(
this.sentenses[this.current_sent],
select.anchorOffset - 1,
"###"
);
// 更新sentenses数组视图
Vue.set(this.sentenses, this.current_sent, newSent);
}
}
};
</script>
<style lang="scss"></style>

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3231

用moment.js构造带操作区的VUE个性化日历

作者:admin 日期:2021-12-01

这次项目需要用到这样一个稍有点特别的日历，每一天有一个“操作区”（根据数据有不同的操作），因为这个形态有点特殊，所以无法直接使用vant的日历组件。之前这个日历列表是由后端同事提供的。后来我自己对moment.js的操作比较熟练了，自己构造了一个，主要代码如下。

Javascript代码

initCale(){
const NOW = moment('2021-05-16')
let _first = _.cloneDeep(NOW).startOf('month') //月头
let _last = _.cloneDeep(NOW).endOf('month') //月尾
// 计算本月数据
let days = NOW.daysInMonth() //本月天数
let list = [] //最终日期列表，存入这个数组
for (let ii = 0; ii < days; ii++) {
let dd = _.cloneDeep(_first).add(ii, 'days') //从月头开始往后推算整月
list.push(
{
date:dd.format('YYYY-MM-DD'),
sd:dd.format('DD'),
day:dd.day(), //星期几
used:true,
today:dd.format('YYYY-MM-DD')==NOW.format('YYYY-MM-DD') //今天
}
)
}
// 补月头（上个月剩下的几天）
let lenHead = _first.day()-1 //本月第一天是星期几？从而推算月头天数
for (let ii = 1; ii <= lenHead; ii++) {
let dddd = _.cloneDeep(_first).add(-ii, 'days')
list.unshift(
{
date:dddd.format('YYYY-MM-DD'),
sd:dddd.format('DD'),
day:dddd.day(),
used:false
}
)
}
// 补月尾
let lenTail = 7 - _last.day() //月尾天数
for (let ii = 1; ii <= lenTail; ii++) {
let dddd = _.cloneDeep(_last).add(ii, 'days')
list.push(
{
date:dddd.format('YYYY-MM-DD'),
sd:dddd.format('DD'),
day:dddd.day(),
used:false
}
)
}
this.caleList = list //caleList是VUE中用于渲染出日历的变量
},
主要HTML:
<ul class="caleList">
<li class="top">一</li>
<li class="top">二</li>
<li class="top">三</li>
<li class="top">四</li>
<li class="top">五</li>
<li class="top">六</li>
<li class="top">日</li>
<li v-for="item in caleList" :key="item.date"
:class="[{'used':item.used},{'today':item.today}]"
>
<div class="date">{{item.sd}}</div>
<div class="opt" v-if="item.used">操作</div>
</li>
</ul>
主要CSS（LESS):
.caleList{
display: flex; flex-wrap: wrap;
li{
flex:1 0 100%/7;
border: 1px #fff solid;
background-color: #aaa;
color: #777;
&.top{
background-color: #fff; color: #900;
border: none;
height: 40px; display: flex; align-items: center; justify-content: center;
}
&.used{
background-color: #eee;
color: #333;
}
&.today{
background-color: rgb(163, 10, 31); color: #fff;
}
.date{
font-size: 24px;
display: flex; align-items: center; justify-content: center;height: 35px;
}
.opt{
font-size: 12px;
padding: 0px 15px 10px; text-align: center;
color: rgb(112, 11, 11);
line-height: 120%;
}
}
}

因为逻辑比较简单，此处并没有抽象成组件，有需要再说。

特别感谢知友的这篇文章：

Sail：moment的高频用法总结

Tags: vue vue 个性化日历个性化日历

分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2700

一页面试题

作者:admin 日期:2021-11-20

Javascript代码

// 第1题
let str = "2434cab"
let arr = [...str]
console.log(arr)
let sss = []
do {
let rrr = _.takeRight(arr, 2)
arr.length = arr.length - 2
sss.push(rrr[0]+rrr[1])
} while (arr.length>2);
sss.push(_.replace(_.toString(arr),',',''))
console.log("第1题答案：",sss)
// 第2题
let sss = []
for (let i = 1; i < 101; i++) {
let flag35 = (i % 3 == 0) && (i % 5 == 0)
let flag3 = (i % 3 == 0)
let flag5 = (i % 5 == 0)
if(flag35){sss.push("bb35");continue;}
if(flag3){sss.push("bb3");continue;}
if(flag5){sss.push("bb5");continue;}
sss.push(i)
}
console.log("第2题答案：",sss)

//第3题
let rect = document.getElementById('rect')
console.log("第3题答案：", [rect.getBoundingClientRect().width,rect.getBoundingClientRect().height])

分类:开发心得 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 5012

纯CSS实现文字水波动画

作者:admin 日期:2021-10-11

点击打开：

http://blog.258754.cn/2021/test_water/test_water.html

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2299

vite2+vue2.6.12+vant2.12.12提速移动端开发

作者:admin 日期:2021-06-25

试着用网上的一个vite2的脚手架做了个移动端的尝试。vite最大的好处就是--真的快！也可能是我页面比较少，但是每次热更新，基本就是一存盘，浏览器就完成了变更，体验太好了。

换新脚手架，要把所有常用配置都验证一下，并且把原来webpack中的选项都做到在vite中等价实现。

包括：

* px2rem的解决方案，在postcss.config.js中配置，转化为vw单位，比rem方式要先进点。

* vant基础样式定义，在theme.less中。

* lodash及moment全局引入，在/index.html中直接用<script>标签引入的，在vue文件中和.js中直接可用，但是在.ts文件中，如果不做import，会有红色的错误波浪线出现，但不影响使用。

* import后缀为vue的组件时，必须带上vue后缀，但js/ts不用带后缀。

* 有时候大的变化要CTRL+F5强制刷新页面，热更新才会生效。

* 图片引入方式：

background-image: url("@img/aaa.png");

* 静态资源在/public目录下，在页面中用/images这样的路径引入即可。

* webpack允许的require在此都不能用，要改为import。写法方面，@import "~@/assets/less/_variable.less" vite中要去掉~写成：@import "@/assets/less/_variable.less";

* 控制台过滤。vite会出现一些控制台输出，暂时没有配置方法屏蔽，折中办法，在控制台搜索框输入-vite,可以过滤掉这些输出。

* 运行命令与环境变量。跟webpack略有不同。运行方式看package.json就知道了。环境变量可放在.env.development这样的文件中，跟webpack一致。在所有代码中输出import.meta.env，可以看到环境变量的所有。具体看文档。

我本人对于vue3和ts不是很熟悉（学不动了），所以宁愿工作在vue2+js的环境中。在vite脚手架中，这两种方式是可以混用的。所以按自己合适的模式使用就行了。

放心去享受vite带来的快速体验吧！

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2673

本次YT项目的一些收获

作者:admin 日期:2021-06-02

今年4月1号开始在YT公司参与一个商业管理系统的开发，担任前端开发，跟十几个同事一起工作了二个月时间。

到今天项目已经基本告一段落。写写心得。

一是业务理解能力和抗压能力比较重要。项目刚开始时，碰到比较复杂的逻辑，我心理上有犹豫及抗拒，总觉得理解起来很吃力。尤其是在工期压力下，有时会感到头脑一片空白。

比如第一期开发阶段，需要构造一个自定义的日历。我跟后端同事小刘商量，由他来写算法，我前端只负责渲染。我坦承自己并不擅长日期算法。小刘却认为这个日期运算应该由前端的我来负责，我们两个互不相让，产生了一点分歧。后来组长曾工主动承揽了此算法，他花了较少的时间完成了，解决了这个小矛盾。

后来随着项目的进展，我才逐渐发现项目中有大量的日期运算。我查查文档、问问同事，不知不觉也熟练了这项技能。到二个月后的今天，项目没那么紧张了，我又系统地读了一下moment.js的文档，发现自己居然熟练了大多数常用方法，于是试着重新写一下那个日历，结果只用了大约1小时，就完成了。---这真是一个神奇的变化，也是我此次项目的第一个收获，就是提升了自己面对复杂情况的心理阀值。

二、项目进度跟踪。开发团队有比较成熟的进度管理，每天做了几个页面，调试成功几个接口，都要登记在文档中，早会时组长点评。这样挺好，每个人都会按照工期推进，减少项目风险。我跟其它前端同事的分工也逐渐默契，互相取长补短。

三、松散的分工模式。拿前端来说，几个前端同事其实是各写各的，没有公用的规范，也没有共同的JS工具和CSS片段。你愿意怎么写就怎么写，愿意放哪个目录就放哪个目录，只要最终页面逻辑能跑通。--我开始面对这个事实有点吃惊，但后来发现也没啥大问题。这样减少了团队磨合成本，VUE本身的模块化方式，也避免了变量冲突和样式冲突。这样做的缺点，就是每个人的“埋头工作”有时候是重复劳动，写了一大块儿，发现别人早就写过相同的代码了。

另外，有些同事的前端代码效能比较差，对于我这样的"老师傅"来说，总觉得这样做缺乏“工匠精神”，但是事实上并不影响最终使用。将来万一出了问题，会有人去改这些“差代码”，但至少不是我。

当然，这里面少不了梁工这位熟悉全局的神人，他凭一己之力，写了很多公共代码块，经常第二天上班被他告知，几个页面被加上了某个代码块。这家伙简单高效地把帮我们把代码升级了。

确实，有些业务逻辑，讲一遍太麻烦，还不如直接帮着写了来得爽快。这种搞法，也适合于我们这种快组快闪的团队。

四、隐患。项目交工后，还是要提炼经验，并把一些公共建筑搭建好。比如我们这个项目，我觉得可以固定下一些公共配置及工具，把环境变量的最佳实践方法整理好，写成文档，等等。

当然，我参与的很多外包项目，本来就是雇佣军，打一枪换个地方，成员不固定。既然成员不固定，沉淀经验也就无从谈起。最劳神的，还是公司的留守老员工，象老母亲一样把旧项目缝缝补补，案牍劳形。

我自己这次收获颇丰：熟练了GIT操作，深入了VANT组件库，加强了moment运算。最大的收获，是了解了5人以上协作开发的一些普遍做法。

当然，团队中坚的年轮人，为了项目做出艰苦赴出：连贯一二个月加班，有人身体出现不适，也还在坚持工作。深夜时他们还在钉钉上提BUG、凌晨时全组人测试跨天逻辑、每天中午所有人都趴在桌上午睡。每当看到这些，我都觉得IT人的谋生不易。

对我这样一个老同志来说，能保证每天按时下班，每天搞搞锻炼，每天中午能在自己的折叠床上小睡一个午觉，真是千金不易的人生甘甜。

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2654