Vue中如何优雅地实现日期选择控件复用

1. 先看需求

2. 常规实现

在页面中搞三个DatePicker的组件,分别绑定到这三个属性中,再另外定义三个变量来控制组件的显示与隐藏
Template部分省略,以下是js部分示例代码片段

const showDatepicker1 = ref(false)
function onSelectDate1 (date: string) {
    model.date1 = data
    // coding...
}
const showDatepicker2 = ref(false)
function onSelectDate2 (date: string) {
    mo[......]

继续阅读

利用Nginx的反向代理进行端口转发

Nginx是一款非常优秀的web服务器,他提供了非常强大的功能,配置简单,性能强劲等等。
我们在将其用做web服务器的同时,还常常会用到其反向代理的功能,但大多数场景都是基于服务的,即应用层代理
其实他还可以在四层进行转发,即tcp或udp转发,以下是一个简单的示例代码

Nginx模块

  • ngx_stream_ssl_module

配置示例

stream {
  # 不同的域名进来,映射到不同的目标
  map $ssl_preread_server_name $name {
    playnice.eigenmagic.net playnice_backend;[......]

继续阅读