WingDust

WingDust 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

WingDust 提出了问题 · 11月21日

Elisp 返回成 带英文引号的字符串

Elisp 怎么将

(concat "TODO" (setq c "将 Org 写作结构"))

返回成 带英文引号的字符串 "TODO将 Org 写作结构"

而不是 TODO将 Org 写作结构

我要将这个字符串用在命令行中

关注 1 回答 0

WingDust 提出了问题 · 11月11日

Rust-Wasm 向 Vue3 传递函数,并绑定到dom事件上

本人想通过由 Rust 语言 写的事件函数经过编译成 Webassembly

然后给 Vue3 的事件绑定函数使用

Rust 语言使用的包为 wasm-bindgen
编译工具为 wasm-pack
编译命令:$ wasm-pack build --target web

Cargo.toml:

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2.55"
gloo = "0.2.0"


[dependencies.web-sys]
version = "0.3.4"
features = [
  'Document',
  'Element',
#  'CssStyleDeclaration',
  'HtmlElement',
#  'HtmlParagraphElement',
#  'HtmlTextAreaElement',
#  'Node',
  'Window',
  'console',
  'KeyboardEvent',
]

Rust 代码:

#[wasm_bindgen]
pub fn hidesibebar(e:web_sys::KeyboardEvent){
        console_log!("ok1");
        console_log!("{}",e.key())
        // if e.ctrl_key() && e.alt_key(){
        //     console_log!("true");
        // }
}
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s:&str);
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

Vue3 代码

<template>
      <div class="TagsContainer" @keydown="hidesibebar">
          <ul>
              <li>123</li>
              <li>123</li>
          </ul>
      </div>
</template>

<script>
import "keyevent/keyevent_bg.wasm"
import init,{hidesibebar} from "keyevent/keyevent.js"
import {defineComponent} from "vue"
export default defineComponent({
    async setup(){
        // async function run() {
        //     await init()
        // }
       let wasm = await init()
        // console.log(wasm);
    //    let hidesibebar = wasm.hidesibebar
    //    let hidesibebar = hidesibebar

       return {hidesibebar}
    }

})
</script>
<div>
    <Suspense>
    <tagscontainer></tagscontainer>
    </Suspense>
<div/>
//...
//...
//...

我使用了 Vite 来运行了这个项目

wasm 文件要被线上初始化,所以我引入了这个文件 keyevent/keyevent_bg.wasm

我从它的外包 JS 文件keyevent/keyevent.js引入 init 方法与 Rust函数 编译出来的函数

并要使用 async setup 来异步初始化 init

且这个组件被使用要使用 Suspense 包裹

可从 Vite playground借鉴

但是在 Rust 代码中 hidesibebar 函数中

如果我不写对 事件参数e:web_sys::KeyboardEvent调用

只有 console_log!("ok"); 是可以被绑定上,

但我是想使用这个事件参数,不知道怎么解决,希望有解决方案

关注 1 回答 0

WingDust 提出了问题 · 10月24日

解决Vue3 setup语法 怎么去写scroll的防抖功能

function debounce(fn, wait) {
    var timeout = null;
    return function() {
        if(timeout !== null) 
                clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}
// 处理函数
function handle() {
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

这个代码用 setup 写时,这个绑定怎么写
下面代码有问题

<div @scroll="debounce(mousewheel,1000)"></div>

setup(){
        function debounce(fn,wait) {
            let timeoutID = null
            return function () {
                if (timeoutID != null) clearTimeout(timeoutID) 
                timeoutID = setTimeout(fn,wait)
            }
        }

        function mousewheel(e){
            console.log(e);
        }
        
                return {
            mousewheel,debounce
        }

}

关注 1 回答 1

WingDust 提出了问题 · 10月23日

解决Vue3 保存持续存在的Dom元素

在写一个 Vue3 的组件,
其中有一个功能为将 div 的每次滚动距离为自己控制的固定距离

实现思路:
通过使用Element.scrollBy() + WheelEvent 事件来实现

由于这个是在写 Vue3 组件
所以我保持着 Dom 操作尽量由 Vue 操作
而这个又必须访问 Dom ,
所以我想持续保存这个 Dom 元素,因为这个元素会在页面上存在很长时间,
来在 WheelEvent 事件触发时不用再次
getElementsByClassName()

另一种访问这个元素的方法是事件的对象
却经过测试 WheelEvent有个问题 ,
使用鼠标滚动时,这个事件的对象
当鼠标在内容上时 为内容,
当鼠标在内边距时为容器,
但我想获取到是容器元素

<div class="e" @wheel="mousewheel">
 <div class="item">
     0
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     1
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     2
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     3
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     4
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     5
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     6
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     7
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     8
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     9
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     10
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     11
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     12
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
 <div class="item">
     13
     <img data-original="safe-file-protocol:://G:/test/1.PNG" alt="">
 </div>
</div>

//script
 setup() {
         function mousewheel(e){
         console.log(e);
         // e.preventDefault();

         console.log('wheel');
     }
             return {
         mousewheel
     }
     

关注 2 回答 1

WingDust 收藏了文章 · 10月17日

建议收藏!超全的 Linux Shell 文本处理工具集锦

本文将介绍Linux下使用Shell处理文本时最常用的工具:find、grep、xargs、sort、uniq、tr、cut、paste、wc、sed、awk;提供的例子和参数都是最常用和最为实用的;对shell脚本使用的原则是命令单行书写,尽量不要超过2行;如果有更为复杂的任务需求,还是考虑python吧.

1、find 文件查找

查找txt和pdf文件

find . ( -name "*.txt" -o -name "*.pdf" ) -print

正则方式查找.txt和pdf

find . -regex  ".*(.txt|.pdf)$"
#-iregex:忽略大小写的正则

否定参数:查找所有非txt文本

find . ! -name "*.txt" -print

指定搜索深度:打印出当前目录的文件(深度为1)

find . -maxdepth 1 -type f

定制搜索

#按类型搜索:
find . -type d -print  //只列出所有目录
#按时间搜索:
-atime 访问时间 (单位是天,分钟单位则是-amin,以下类似)
-mtime 修改时间 (内容被修改)
-ctime 变化时间 (元数据或权限变化)
最近7天被访问过的所有文件:
find . -atime 7 -type f -print
#按大小搜索:
寻找大于2k的文件
find . -type f -size +2k
#按权限查找:
find . -type f -perm 644 -print //找具有可执行权限的所有文件
#按用户查找:
find . -type f -user weber -print// 找用户weber所拥有的文件

找到后的后续动作删除:

#删除当前目录下所有的swp文件:
find . -type f -name "*.swp" -delete
#执行动作(强大的exec)
find . -type f -user root -exec chown weber {} ; //将当前目录下的所有权变更为weber
注:{}是一个特殊的字符串,对于每一个匹配的文件,{}会被替换成相应的文件名;
eg:将找到的文件全都copy到另一个目录:
find . -type f -mtime +10 -name "*.txt" -exec cp {} OLD ;

结合多个命令tips: 如果需要后续执行多个命令,可以将多个命令写成一个脚本。然后 -exec 调用时执行脚本即可;

-exec ./commands.sh {} ;
#-print的定界符
  • 默认使用' '作为文件的定界符;
  • -print0 使用''作为文件的定界符,这样就可以搜索包含空格的文件;

2、grep 文本搜索

grep match_patten file // 默认访问匹配行

常用参数:

  • -o 只输出匹配的文本行 VS -v 只输出没有匹配的文本行
  • -c 统计文件中包含文本的次数

grep -c "text" filename

  • n 打印匹配的行号
  • i 搜索时忽略大小写
  • l 只打印文件名

在多级目录中对文本递归搜索(程序员搜代码的最爱):

grep "class" . -R -n

匹配多个模式

grep -e "class" -e "vitural" file

grep输出以作为结尾符的文件名:(-z)

grep "test" file* -lZ| xargs -0 rm

xargs 命令行参数转换

xargs 能够将输入数据转化为特定命令的命令行参数;这样,可以配合很多命令来组合使用。比如grep,比如find;

将多行输出转化为单行输出

cat file.txt| xargs
  • 是多行文本间的定界符
  • 将单行转化为多行输出
cat single.txt | xargs -n 3
#-n:指定每行显示的字段数

xargs参数说明

  • -d 定义定界符 (默认为空格 多行的定界符为 )
  • -n 指定输出为多行
  • -I {} 指定替换字符串,这个字符串在xargs扩展时会被替换掉,用于待执行的命令需要多个参数时
cat file.txt | xargs -I {} ./command.sh -p {} -1
#-0:指定为输入定界符
#统计程序行数
find source_dir/ -type f -name "*.cpp" -print0 |xargs -0 wc -l

3、sort 排序

字段说明:

  • -n 按数字进行排序 VS -d 按字典序进行排序
  • -r 逆序排序
  • -k N 指定按第N列排序
sort -nrk 1 data.txt
sort -bd data // 忽略像空格之类的前导空白字符

4、uniq 消除重复行

消除重复行

sort unsort.txt | uniq

统计各行在文件中出现的次数

sort unsort.txt | uniq -c

找出重复行

sort unsort.txt | uniq -d

可指定每行中需要比较的重复内容:-s 开始位置 -w 比较字符数

5、用 tr 进行转换

通用用法

echo 12345| tr '0-9''9876543210' //加解密转换,替换对应字符
cat text| tr '    '' '  //制表符转空格

tr删除字符

cat file | tr -d '0-9'   // 删除所有数字

-c 求补集

cat file | tr -c  '0-9'   //获取文件中所有数字
cat file | tr -d -c '0-9'  //删除非数字数据

tr压缩字符

tr -s 压缩文本中出现的重复字符;最常用于压缩多余的空格
cat file | tr -s ' '

字符类:tr中可用各种字符类

  • alnum:字母和数字
  • alpha:字母
  • digit:数字
  • space:空白字符
  • lower:小写
  • upper:大写
  • cntrl:控制(非可打印)字符
  • print:可打印字符
使用方法:tr [:class:] [:class:]
eg: tr 
'[:lower:]''[:upper:]'

6、cut 按列切分文本

#截取文件的第2列和第4列:
cut -f2,4 filename
#去文件除第3列的所有列:
cut -f3 --complement filename
#-d 指定定界符:
cat -f2 -d ";" filename

cut 取的范围

  • N- 第N个字段到结尾
  • -M 第1个字段为M
  • N-M N到M个字段cut 取的单位
  • -b 以字节为单位
  • -c 以字符为单位
  • -f 以字段为单位(使用定界符)
cut -c1-5 file //打印第一到5个字符
cut -c-2 file  //打印前2个字符

7、paste 按列拼接文本

将两个文本按列拼接到一起

cat file1
1
2
cat file2
colin
book
paste file1 file2
1colin
2 book

默认的定界符是制表符,可以用-d指明定界符

paste file1 file2 -d ","
1,colin
2,book

8、wc 统计行和字符的工具

wc -l file // 统计行数
wc -w file // 统计单词数
wc -c file // 统计字符数

9、sed 文本替换利器

首处替换

sed 's/text/replace_text/'file   //替换每一行的第一处匹配的text

全局替换

sed 's/text/replace_text/g' file

默认替换后,输出替换后的内容,如果需要直接替换原文件,使用-i:

sed -i 's/text/repalce_text/g' file

移除空白行:

sed '/^$/d' file

变量转换

已匹配的字符串通过标记&来引用.

echo this is en example | seg 's/w+/[&]/g'
$>[this]  [is] [en] [example]

子串匹配标记

第一个匹配的括号内容使用标记 来引用

sed 's/hello([0-9])//'

双引号求值

  • sed通常用单引号来引用;也可使用双引号,使用双引号后,双引号会对表达式求值:
  • sed 's/$var/HLLOE/'当使用双引号时,我们可以在sed样式和替换字符串中指定变量;
p=patten
r=replaced
echo "line con a patten"| sed "s/$p/$r/g"
$>line con a replaced

字符串插入字符:将文本中每行内容(PEKSHA) 转换为 PEK/SHA

sed 's/^.{3}/&//g' file

10、awk 数据流处理工具

awk脚本结构

awk ' BEGIN{ statements } statements2 END{ statements } '

工作方式

  • 1.执行begin中语句块;
  • 2.从文件或stdin中读入一行,然后执行statements2,重复这个过程,直到文件全部被读取完毕;
  • 3.执行end语句块;

print 打印当前行,使用不带参数的print时,会打印当前行;

echo -e "line1 line2"| awk 'BEGIN{print "start"} {print } END{ print "End" }'
#print 以逗号分割时,参数以空格定界;
echo | awk ' {var1 = "v1" ; var2 = "V2"; var3="v3";
print var1, var2 , var3; }'
$>v1 V2 v3
#使用-拼接符的方式(""作为拼接符);
echo | awk ' {var1 = "v1" ; var2 = "V2"; var3="v3";
print var1"-"var2"-"var3; }'
$>v1-V2-v3

特殊变量:NR NF 1 $2

  • NR:表示记录数量,在执行过程中对应当前行号;
  • NF:表示字段数量,在执行过程总对应当前行的字段数;
  • $0:这个变量包含执行过程中当前行的文本内容;
  • $1:第一个字段的文本内容;
  • $2:第二个字段的文本内容;
echo -e "line1 f2 f3 line2 line 3"| awk '{print NR":"$0"-"$1"-"$2}' 
#打印每一行的第二和第三个字段
awk '{print $2, $3}' file 
#统计文件的行数:
awk ' END {print NR}' file 
#累加每一行的第一个字段:
echo -e "1 2 3 4 "| awk 'BEGIN{num = 0 ;print "begin";} {sum += $1;}END {print "=="; print sum }'   
#传递外部变量
var=1000
echo | awk '{print vara}' vara=$var #输入来自stdin
awk '{print vara}' vara=$var file # 输入来自文件

用样式对awk处理的行进行过滤

awk 'NR < 5' #行号小于5
awk 'NR==1,NR==4 {print}' file #行号等于1和4的打印出来
awk '/linux/'  #包含linux文本的行(可以用正则表达式来指定,超级强大)
awk '!/linux/'  #不包含linux文本的行

设置定界符

使用-F来设置定界符(默认为空格)

awk -F: '{print $NF}'/etc/passwd

读取命令输出

使用getline,将外部shell命令的输出读入到变量cmdout中;

echo | awk '{"grep root /etc/passwd" | getline cmdout; print cmdout }'

在awk中使用循环

for (i=0;i<10;i++){print $i;}
for (i in array){print array[i];}

以逆序的形式打印行:(tac命令的实现)

seq 9|awk '{lifo[NR] = $0; lno=NR}END{ for(;lno>-1;lno--){print lifo[lno];}} '

awk实现head、tail命令

head:
 awk 'NR<=10{print}' filename
tail:
  awk '{buffer[NR%10] = $0;} END{for(i=0;i<11;i++){
  print buffer[i %10]} } ' filename

打印指定列

#awk方式实现:
ls -lrt | awk 
'{print $6}'
#cut方式实现
ls -lrt | cut -f6

打印指定文本区域

#确定行号
seq 100| awk 'NR==4,NR==6{print}'
#确定文本
打印处于startpattern 和endpattern之间的文本;
awk '/start_pattern/, /end_pattern/' filename
seq 100| awk '/13/,/15/'
cat /etc/passwd| awk '/mai.*mail/,/news.*news/'

awk常用内建函数

  • index(string,search_string):返回search_string在string中出现的位置 sub(regex,replacement_str,string):将正则匹配到的第一处内容替换为replacement_str;
  • match(regex,string):检查正则表达式是否能够匹配字符串;
  • length(string):返回字符串长度
echo | awk '{"grep root /etc/passwd" | getline cmdout; print length(cmdout) }'
#printf 类似c语言中的printf,对输出进行格式化
seq 10| awk '{printf "->%4s ", $1}'  #迭代文件中的行、单词和字符
  1. 迭代文件中的每一行
while 循环法
while read line;
do
echo $line;
done < file.txt

改成子shell:

cat file.txt | (
while read line;
do
 echo $line;
done
)

awk法:

cat file.txt| awk '{print}'

2.迭代一行中的每一个单词

for word in $line;
do
echo $word;
done
  1. 迭代每一个字符{#word}:返回变量word的长度
for ((i=0;i<${#word};i++))
do
echo ${word:i:1);
done

作者 | 大CC
来源 | www.cnblogs.com/me15/p/3427319.html

image

查看原文

WingDust 提出了问题 · 10月17日

解决Golang 正则表达式文件后缀名匹配问题

我在测试过程中发现我写的匹配文件后缀名正则表达式:

var Suffix = regexp.MustCompile(`.(mp4|mkv|rmvb|ts|avi)$`)
func test(){
Suffix.FindString("batchfile.code-snippets")
//怎么返回出来的是 ets 它不应该为空字符串吗?
}

在对这个 batchfile.code-snippets 这个文件它返回错的值,导致了后面程序无法运行

原本这个正则表达式是想用来将
已存在于电脑上的文件路径,匹配返回已先设定的视频文件后缀名,没有匹配上则返回空字符串

关注 2 回答 1

WingDust 收藏了文章 · 10月16日

正则表达式在线工具集合

1. 功能最强:regex101

优点:

  • 支持多种语言, prec,php,javascript,python,golang
  • 界面美观大方
  • 支持错误提示,实时匹配

缺点:

  • 有时候加载速度太慢

2. 可视化正则绘图: Regulex

优点:

  • 实时根据正则表达式绘图
  • 页面加载速度快

3. 可视化正则绘图:regexper

优点:

  • 根据正则表达式绘图
  • 页面加载速度快

缺点:

  • 无法实时绘图,需要点击才可以

4. 专注于python正则:pyregex

  • 专注python
  • 页面加载速度快

查看原文

WingDust 提出了问题 · 10月16日

解决Golang的正则表达式全局变量怎么声明与初始化

syntax error: non-declaration statement outside function body

Suffix  := regexp.MustCompile(`.(mp4|mkv|rmvb|ts|avi)$`)

这个想将这个正则表达式做一个全局的变量写在 main函数 之外 不知道怎么使用 var方式改写

关注 2 回答 1

WingDust 提出了问题 · 10月7日

scss 获取 gird 网格布局中 fr 被平分出来的单位元素

想问我有一个 gird 网格布局,其中使用单位 fr 来平分了容器宽度,我怎么能通过 scss 获取到这个宽度

    <div class="a">
    <div class="w">1</div>
    <div class="w">2</div>
    <div class="w">3</div>
    <div class="w">4</div>
    <div class="w">5</div>
    <div class="w">6</div>
    <div class="w">7</div>
    <div class="w">7</div>
    <div class="w">7</div>
    <div class="w">7</div>
    <div class="w">7</div>
</div>
.a{
 display: inline-grid;
 grid-template-columns:repeat(6,1fr);
}

关注 1 回答 0

WingDust 收藏了文章 · 9月22日

electron+vue制作桌面应用--自定义标题栏

electron会默认显示边框和标题栏,如下图

图片描述

我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种

图片描述

首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分,new BrowserWindow时添加参数frame: false即可

mainWindow = new BrowserWindow({
    useContentSize: true,
    frame: false,
  })

这样会把标题栏和边框一并隐藏

然后我们开始制作自己的标题栏
创建Mytitle组件'\src\renderer\components\mytitle\Mytitle.vue'

<template>
  <div id="mytitle">
  </div>
</template>

<script>

  export default {
    name: 'Mytitle',
    methods: {
    }
  }
</script>
    
<style>
#mytitle {
    width: 100%;
    height: 52px;
    background-color: rgb(198, 47, 47);
    -webkit-app-region: drag;
}
</style>

这里需要注意的是,去掉标题栏后,应用就没法拖动了,需要拖动的话需要拖动的区域需要设置css样式

-webkit-app-region: drag;

设置某一部分不可拖动为

-webkit-app-region: no-drag;

然后在App.vue中添加我们新建的组件

<template>
  <div id="app">
    <!-- <router-view></router-view> -->
    <Mytitle />
  </div>
</template>

<script>
  import Mytitle from './components/mytitle/Mytitle';
  export default {
    name: 'vue-electron-demo',
    components: {
      Mytitle
    }
  }
</script>

<style>
html,
body,
div {
  margin: 0;
  padding: 0;
}
</style>

这里需要对默认样式进行重置,不然标题栏与窗体会有边距,like this

图片描述

现在自定义标题栏的基本雏形已经完成,剩下的就是基本的请自由发挥吧

下一篇:electron+vue制作桌面应用--自定义标题栏最大/小化和关闭

查看原文

认证与成就

  • 获得 0 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-12-07
个人主页被 369 人浏览