预览模式: 普通 | 列表

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

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

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

Javascript代码
  1. <template>  
  2.   <el-container class="about">  
  3.     <el-main>  
  4.       <section class="bgBox">  
  5.           <h1>在诗句上任意位置点击，再点击“插入字符”按钮，即可在光标处插入字符</h1>  
  6.           <div class="h20"></div>  
  7.         <el-button type="primary" @click="insertChar">插入字符</el-button>  
  8.         <div class="h30"></div>  
  9.         <div class="edit" contenteditable>  
  10.           <p  
  11.             v-for="(item, index) in sentenses"  
  12.             :key="item"  
  13.             @click="getCurrentSent(index)"  
  14.           >  
  15.             {{ item }}  
  16.           </p>  
  17.         </div>  
  18.       </section>  
  19.     </el-main>  
  20.   </el-container>  
  21. </template>  
  22.   
  23. <script>  
  24. const insertStr = (soure, start, newStr)=>{     
  25.    return soure.slice(0, start) + newStr + soure.slice(start);  
  26. }  
  27.   
  28. import { getTableList, uploadFile } from "@/api/system/api_user";  
  29. export default {  
  30.   data() {  
  31.     return {  
  32.       current_sent: null,  
  33.       sentenses: [  
  34.         "凌波不过横塘路。但目送、芳尘去。",  
  35.         "锦瑟华年谁与度。月桥花院，琐窗朱户。只有春知处。 ",  
  36.         "飞云冉冉蘅皋暮。彩笔新题断肠句。若问闲情都几许。",  
  37.         "一川烟草，满城风絮。梅子黄时雨。"  
  38.       ]  
  39.     };  
  40.   },  
  41.   computed: {  },  
  42.   methods: {  
  43.     getCurrentSent(index) {  
  44.       // 获取当前句子  
  45.       this.current_sent = index;  
  46.     },  
  47.     insertChar() {  
  48.       // 获取getSelection对象，这个对象有很多内容，自己找到有用的数据  
  49.       let select = window.getSelection();  
  50.   
  51.       // 利用insertStr函数，在光标位置插入###三个字符  
  52.       let newSent = insertStr(  
  53.         this.sentenses[this.current_sent],  
  54.         select.anchorOffset - 1,  
  55.         "###"  
  56.       );  
  57.   
  58.       // 更新sentenses数组视图  
  59.       Vue.set(this.sentenses, this.current_sent, newSent);  
  60.     }  
  61.   }  
  62. };  
  63. </script>  
  64. <style lang="scss"></style>  

 

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

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

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

 

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

Javascript代码
  1. initCale(){  
  2.     const NOW = moment('2021-05-16')  
  3.     let _first = _.cloneDeep(NOW).startOf('month')  //月头  
  4.     let _last = _.cloneDeep(NOW).endOf('month')     //月尾  
  5.   
  6.     // 计算本月数据  
  7.     let days = NOW.daysInMonth()    //本月天数  
  8.     let list = []   //最终日期列表，存入这个数组  
  9.     for (let ii = 0; ii < days; ii++) {  
  10.         let dd = _.cloneDeep(_first).add(ii, 'days')    //从月头开始往后推算整月  
  11.         list.push(  
  12.             {  
  13.                 date:dd.format('YYYY-MM-DD'),  
  14.                 sd:dd.format('DD'),  
  15.                 day:dd.day(),       //星期几  
  16.                 used:true,  
  17.                 today:dd.format('YYYY-MM-DD')==NOW.format('YYYY-MM-DD') //今天  
  18.             }  
  19.         )  
  20.     }  
  21.   
  22.     // 补月头（上个月剩下的几天）  
  23.     let lenHead = _first.day()-1    //本月第一天是星期几？从而推算月头天数  
  24.     for (let ii = 1; ii <= lenHead; ii++) {  
  25.         let dddd = _.cloneDeep(_first).add(-ii, 'days')  
  26.         list.unshift(  
  27.             {  
  28.                 date:dddd.format('YYYY-MM-DD'),  
  29.                 sd:dddd.format('DD'),  
  30.                 day:dddd.day(),  
  31.                 used:false  
  32.             }  
  33.         )  
  34.     }  
  35.       
  36.     // 补月尾  
  37.     let lenTail = 7 - _last.day()   //月尾天数  
  38.     for (let ii = 1; ii <= lenTail; ii++) {  
  39.         let dddd = _.cloneDeep(_last).add(ii, 'days')  
  40.         list.push(  
  41.             {  
  42.                 date:dddd.format('YYYY-MM-DD'),  
  43.                 sd:dddd.format('DD'),  
  44.                 day:dddd.day(),  
  45.                 used:false  
  46.             }  
  47.         )  
  48.     }  
  49.     this.caleList = list  //caleList是VUE中用于渲染出日历的变量  
  50. },  
  51. 主要HTML:  
  52.   
  53. <ul class="caleList">  
  54.     <li class="top">一</li>  
  55.     <li class="top">二</li>  
  56.     <li class="top">三</li>  
  57.     <li class="top">四</li>  
  58.     <li class="top">五</li>  
  59.     <li class="top">六</li>  
  60.     <li class="top">日</li>  
  61.     <li v-for="item in caleList" :key="item.date"  
  62.         :class="[{'used':item.used},{'today':item.today}]"  
  63.     >  
  64.         <div class="date">{{item.sd}}</div>  
  65.         <div class="opt" v-if="item.used">操作</div>  
  66.     </li>  
  67. </ul>  
  68. 主要CSS（LESS):  
  69.   
  70. .caleList{  
  71.     display: flex; flex-wrap: wrap;  
  72.     li{  
  73.         flex:1 0 100%/7;  
  74.         border: 1px #fff solid;  
  75.           
  76.           
  77.         background-color: #aaa;  
  78.         color: #777;  
  79.           
  80.         &.top{  
  81.             background-color: #fff; color: #900;  
  82.             border: none;  
  83.             height: 40px; display: flex; align-items: center; justify-content: center;  
  84.         }  
  85.         &.used{  
  86.             background-color: #eee;  
  87.             color: #333;  
  88.         }  
  89.         &.today{  
  90.             background-color: rgb(163, 10, 31); color: #fff;  
  91.         }  
  92.         .date{  
  93.             font-size: 24px;  
  94.             display: flex; align-items: center; justify-content: center;height: 35px;  
  95.         }  
  96.         .opt{  
  97.             font-size: 12px;  
  98.             padding: 0px 15px 10px; text-align: center;  
  99.             color: rgb(112, 11, 11);  
  100.             line-height: 120%;  
  101.         }  
  102.     }  
  103. }  

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

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

 

Sail：moment的高频用法总结

Tags: vue 个性化日历

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