Anony - 学习笔记 2023-01-15T09:33:00+08:00 Typecho https://blog.52learn.top/index.php/feed/atom/category/xxbj/ <![CDATA[富文本编辑工具TinyMCE首行缩进问题]]> https://blog.52learn.top/index.php/archives/61/ 2023-01-15T09:33:00+08:00 2023-01-15T09:33:00+08:00 Anony http://blog.52learn.top 在调整字体大小之后首行缩进并不是两个字符,效果如下图所示

image-20230113170507013.png

查看一下生成的源码:

image-20230113170613165.png

原因:

点击首行缩进是加在了外层的p标签上,而所有的字号大小都是加在了span标签上,p标签为默认字体大小,首行缩进两字符之后并不会对其

解决

  • 直接将首行缩进设置为固定字体高度

    indent2em_val: "32px", // 首行缩进32px
  • 重写段落功能

    formats: {
        p: { block: "p", styles: { "font-size": "16px" } },
    }, // 格式化段落
    以上第一种方式是将首行缩进设置为固定宽度,如果和字体宽度对不上,也会出现错位的情况。第二种方式是改变最外层p标签字体大小,同样具有局限性,失去了原有自动缩进两字符的效果
]]>
<![CDATA[JavaScript数据类型及检测方法]]> https://blog.52learn.top/index.php/archives/60/ 2022-09-14T14:15:24+08:00 2022-09-14T14:15:24+08:00 Anony http://blog.52learn.top 数据类型
  • 七种原始数据类型(值类型/基本类型):

    • number :用于任何类型的数字:整数或浮点数,在 ±(253-1) 范围内的整数。
    • bigint :用于任意长度的整数。
    • string :用于字符串:一个字符串可以包含 0 个或多个字符,所以没有单独的单字符类型。
    • boolean :用于 truefalse
    • null :用于未知的值 —— 只有一个 null 值的独立类型。
    • undefined :用于未定义的值 —— 只有一个 undefined 值的独立类型。
    • symbol :用于唯一的标识符。
  • 非原始数据类型(引用数据类型/对象类型):

    • object :用于更复杂的数据结构。

      • 对象(Object)
      • 数组(Array)
      • 函数(Function)

检测数据类型

typeofstringnumberbooleannullundefinedsymbolobjectfunction

  • 检测基本数据类型,null会被检测为object
  • 检测复杂数据类型,除function外,均为object

instanceof:检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

  • 只能检测复杂数据类型
  • console.log([] instanceof Array)  // true

    toString:

  • toString()Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型
  • 对于 Object 对象,直接调用 toString() 就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。
  • Object.prototype.toString.call('') ;              // [object String]
    Object.prototype.toString.call(1) ;               // [object Number]
    Object.prototype.toString.call(true) ;            // [object Boolean]
    Object.prototype.toString.call(Symbol());         // [object Symbol]
    Object.prototype.toString.call(undefined) ;       // [object Undefined]
    Object.prototype.toString.call(null) ;            // [object Null]
    Object.prototype.toString.call(new Function()) ;  // [object Function]
    Object.prototype.toString.call(new Date()) ;      // [object Date]
    Object.prototype.toString.call([]) ;              // [object Array]
    Object.prototype.toString.call(new RegExp()) ;    // [object RegExp]
    Object.prototype.toString.call(new Error()) ;     // [object Error]
    Object.prototype.toString.call(document) ;        // [object HTMLDocument]
    Object.prototype.toString.call(window) ;          // [object global] window 是全局对象 global 的引用
    

constructor:

  •     const arr = []
        console.log(arr.constructor === Array)
  • 只能检测由字面量创建出来的数据类型

    isArray:

  • console.log(Array.isArray([]));
  • 注意没有isObject
]]>
<![CDATA[Vue中使用Layui]]> https://blog.52learn.top/index.php/archives/59/ 2022-07-20T19:21:00+08:00 2022-07-20T19:21:00+08:00 Anony http://blog.52learn.top 前言
在 Vue 中引入 layui 并使用的方法

步骤

下载

GitHub 下载或者使用 npm 包管理工具进行安装

作者原话:
layui 原官网已于2021年10月13日下线。
鉴于 Layui 相对庞大的受众群体,从此 Github 和 Gitee 平台将支撑起 Layui 的后续。
Layui GitHub地址
npm命令:npm install layui

找到下载目录

layui-src

将整个文件夹放到 public 文件夹下

layui02

引入文件

layui03

注意:一定要将 layui 文件夹放到公共目录,不然会报错
引入两个关键文件即可
至此 layui 的全部功能即可在 vue 中使用
虽然但是,不推荐这么干!!!
]]>
<![CDATA[CSS实现鼠标悬停改变其他标签样式]]> https://blog.52learn.top/index.php/archives/55/ 2022-04-03T10:15:00+08:00 2022-04-03T10:15:00+08:00 Anony http://blog.52learn.top CSS实现鼠标悬停改变其他标签样式
  1. 控制子标签(.div1:hover和.div2之间使用空格)

    <!DOCTYPE html>
    <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css">
             .div1,.div2 {
                 width: 200px;
                 height: 100px;
                 background-color: pink;
             }
             .div2 {
                 background-color: aqua;
                 display: none;
             }
             .div1:hover .div2 {
                 display: block;
             }
         </style>
     </head>
     <body>
         <div class="div1">div1
             <div class="div3">div3</div>
             <div class="div2">div2</div>
         </div>
     </body>
    </html>

    被控制标签只要是控制标签的子标签就可以,里有其他标签(如.div3)不会影响效果!

  2. 控制兄弟标签(.div1:hover和.div2之间使用+)

    <!DOCTYPE html>
    <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css">
             .div1,.div2 {
                 width: 200px;
                 height: 100px;
                 background-color: pink;
             }
             .div2 {
                 background-color: aqua;
                 display: none;
             }
             .div1:hover+.div2 {
                 display: block;
             }
         </style>
     </head>
     <body>
         <div class="div1">div1</div>
         <!-- <div class="div3">div3</div> -->
         <div class="div2">div2</div>
     </body>
    </html>

    使用“+”时,.div2必须紧贴在.div屁股后面才会有效果,否则无效!!!例如:将.div3取消注释后,.div1将无法控制.div2的样式!!!如果控制标签和被控制标签中间有内容,需要按照第三种方式写!

  3. 控制兄弟标签(中间有内容)(.div1:hover和.div2之间使用~)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                .div1,.div2 {
                    width: 200px;
                    height: 100px;
                    background-color: pink;
                }
                .div2 {
                    background-color: aqua;
                    display: none;
                }
                .div1:hover~.div2 {
                    display: block;
                }
            </style>
        </head>
        <body>
            <div class="div1">div1</div>
            <div class="div3">div3</div>
            <div class="div2">div2</div>
        </body>
    </html>

    这种方法的使用要求是被控制标签必须在控制标签的下面,中间可以有任意内容。

]]>
<![CDATA[Docker常用命令]]> https://blog.52learn.top/index.php/archives/51/ 2022-01-28T22:10:00+08:00 2022-01-28T22:10:00+08:00 Anony http://blog.52learn.top 列出所有容器ID
docker ps -a

删除某一镜像

docker rmi 镜像ID 

停止所有的容器

docker stop $(docker ps -a)

删除所有的容器

docker rm $(docker ps -a)

删除所有的镜像

docker rmi $(docker images -q)

删除所有不使用的镜像

docker image prune --force --all
或 
docker image prune -f -a

删除所有停止的容器

docker container prune -f 
]]>
<![CDATA[MarkDown使用笔记]]> https://blog.52learn.top/index.php/archives/4/ 2020-03-10T15:40:00+08:00 2020-03-10T15:40:00+08:00 Anony http://blog.52learn.top 编辑工具

理论上任何一款文本编辑器都能用于编辑 Markdown 文档,它们分别提供了不同程度的语法高亮、预览等功能,以下只是列举其中一部分,选择自己称手的即可。

  • 现代编辑器
    VSCode / Atom
  • 传统编辑器
    Vim / Emacs / Sublime Text / Notepad++
  • IDE 自带编辑器
    IntelliJ IDEA / Android Studio / WebStorm
  • 专用编辑器
    Ulysses / Mou / Typora / Markpad
  • 在线编辑器
    各种支持 Markdown 的网站都提供了在线编辑器

语法

标题

# 一级标题  
## 二级标题  
### 三级标题  
#### 四级标题  
##### 五级标题  
###### 六级标题  

段落

中间没有空行的连续不断的几行文字被称为段落

行内格式

斜体  
*斜体*  
加粗  
**加粗**
加粗倾斜
***加粗倾斜***  
删除线
~~删除线~~

引用块

> 引用块段落一。  
>  
> 引用块段落二。  
>> 内嵌引用块段落一。  
>  
> ### 引用块内的标题
<blockquote>
多行引用
多行引用
</blockquote>  

超链接

行内式 [百度](https://www.baidu.com "点击转到百度") 链接,带 title。

行内式 [百度](https://www.baidu.com) 链接。

引用式 [百度][1] 链接。

引用式 [百度][2] 链接,带 title。

[1]: https://www.baidu.com
[2]: https://www.baidu.com "点击转到百度"
  • 预览效果:

    行内式 百度 链接,带 title。

    行内式 百度 链接。

    引用式 百度 链接。

    引用式 百度 链接,带 title。

图片

在超链接的写法前加一个 !,就是引用图片的方法。
![Alt text](https://mazhuang.org/favicon.ico "favicon")  

列表

有序列表
  1. 2. 3.
无序列表
  * 或 + 或 -

代码块

`单行代码`  

/```  
多行代码  
/```  

水平分割线

使用一个单独行里的三个或以上 *、- 来生产一条水平分割线,它们之间可以有空格。
***
---
===  

表格

Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。

语法格式如下:

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

对齐方式
-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。
实例如下:

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
]]>