木偶's Blog

如果发现能力无法支撑自己的野心，那就静下心来学习吧

发表于 更新于 分类于 ， ，

HTML 页面部分

1
2
3
4
5
6
7
<el-form-item label="时间" prop="testDate">
  <el-date-picker 
    v-model="testDate"
    tyep="daterange"
    start-placeholde="开始日期"
    end-placeholde="结束日期" />
</el-form-item>

JavaScript 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export default {
  data() {
    startTime = '',
    endTime = ''
    ....
  }
  ....
  computed: {
    testDate: {
      get() {
        return [this.startTime, this.endTime]
      },
      set(val) {
        // 此处需要对 val 进行判空，因为 el-date-picker 的清空按钮点击之后会将 testDate 置为 null
        if (val) {
          this.startTime = dateFormate(val[0])
          this.endTime = dateFormate(val[0])
        } else {
          this.startTime = ''
          this.endTime = ''
        }
      }
    }
  }
  method: {
    reset() {
       this.startTime = ''
       this.endTime = ''
     }
  }
}

发表于 更新于 分类于 ， ，

vue 允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码：

1
2
<input type="text" @keyup.13="console.log($event)"></input>
<input type="text" @keyup.enter="console.log($event)"></input>

当我们在 el-input 采用如上两种写法时，他是不生效的。el-input 监听不到键盘事件,原因是 element-ui 是封装组件，所以 el 标签属于自定义标签，因此触发不了键盘事件。

解决办法 ：加上 .native 原生事件修饰符即可。

.native：监听组件根元素的原生事件，主要作用是给自定义的组件添加原生事件。vue 与 elementUI 中给 el-input 绑定键盘按键代码如下：

1
2
3
4
5
6
7
<el-input 
  placeholder="店铺名称" 
  clearable 
  v-model="queryObj.shopname" 
  @keyup.enter.native="query">
  <template slot="prepend">店铺名称</template>
</el-input>

发表于 更新于 分类于 ， ，

Cascader级联选择器出现空面板的问题

vue、element、el-element

image-20210617122750695

出现空白面板是因为树形结构的数据的最底层 children 是个空数组。遇到这种问题，前端可以通过递归，将 children 长度为 0 的节点对象的 children 属性删除，或将值赋为 undefined

1
2
3
4
5
6
7
cleanData(itemList) {  // 将根节点的 children 传入，传入的只是数据对象的引用
    for (const item of itemList) {
        if (item.children.length === 0) delete item.children
        else this.cleanData(item.children)
    }
    return itemList 
}

发表于 更新于 分类于 ， ，

解决van-dialog内容过多却没有滚动样式的问题

场景

通过组件调用 Dialog 时，van-dialog 内嵌套其他组件，其内容过多，Dialog 不会自动出现滚动样式，导致无法显示底部按钮

image-20210708143224495

解决方案

在样式中做如下设置

1
2
3
4
/deep/ .van-dialog__content {
    max-height: 400px;
    overflow: scroll;
}

说明：先设置最大行高，然后再给溢出部分设置 scroll 滚动样式。

发表于 更新于 分类于 ，

1.1 背景描述

  • 操作系统：macOS
  • 通过 npm 全局安装的 yarn

1.2 问题描述

通过命令 yarn global add packageName 后，试图该模块的命令，发现无法找到

image-20210930135631984

1.3 问题分析

macOS 在安装完 npm 后，再通过 npm 安装 yarn。则 yarn 相关配置和包路径默认位于家目录下

image-20210930135818676

通过 yarn global add 安装包，则会被安装到 ~/.config/yarn/global/node_modules/ 中

image-20210930140102368

而该路径是没有配置在环境变量中的，因此无法找到。

1.4 解决方案

将上述路径配置到环境变量中即可。此处我是配置在 ~/.zshrc 中，大家可以视自身所用的 shell 自行决定。

配置如下：

image-20210930140654119

1
export PATH="$PATH:`yarn global bin`:$HOME/.config/yarn/global/node_modules/.bin"

配置后保存，执行 source ./.zshrc

结果如下：

image-20210930140835904

发表于 更新于 分类于

作为一名程序员，我们跟终端打交道的频率非常地高，终端的是否好用，往往跟我们的效率关系很大。一开始用的是 MacOS 自带的 zsh，有时候在敲很长的 shell 命令时，发现打错了某个字符，想要修改，很是麻烦。这让我不禁想，要是终端命令也能用 vi 来编辑该多好！！！于是开始捣鼓，我发现了 oh-my-zsh

阅读全文 »

发表于 更新于 分类于

[[toc]]

主要参考博客教程：https://segmentfault.com/a/1190000042012007

期间遇到一些错误：

发表于 更新于 分类于

有时候我们还在开发，想一边开发一边分享给其他人体验和改进，但是又没有公网服务器供别人访问，又不是同一个局域网，该如何做呢？此时就需要进行“内网穿透”，让自己的本地电脑短暂地变成服务器（指定开放端口），使得其他人可以轻松访问。

内网穿透大致有两种：

  • 第三方提供的服务。这类往往有免费的，但是免费的带宽受限且不稳定，基本只有 1~2M 带宽，如 Zerotier、花生壳、DDNSTO、ngrok、natapp
  • 自建服务。这类都需要自身有云服务器，稳定，速度取决与云服务器的带宽，如 nps-npc、frp
阅读全文 »
0%