Decorative image frame

小鑫の随笔

修复 antd select placeholder 不显示的问题

踩坑记录
  107字   1分钟

今天弄后台的时候需要用到 Select 下拉选择器的组件，但是发现传了 placeholder 还是无法显示提示，以前也一直是这些写的啊，看了下官网 demo，也是这样的，这让我很疑惑这次咋不行了

后来找了下原因，发现把默认值设为 undefined 就可以显示了，设置为 “” 或者 null 的时候是不会显示的

js 监听数据的变化

代码片段
  99字   1分钟 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 监听数据的变化
 * @param obj 需要监听的对象
 * @param name 需要监听的属性
 * @param func 数据变化后的回调函数
 */
export const watch = (obj: Obj, name: string, func: (value: any) => void) => {
  Object.defineProperty(obj, name, {
    get: function() {
      return obj;
    },
    set: newValue => {
      func && func(newValue);
    },
  });
};

使用例子：

1
2
3
4
5
6
const obj = {
    name: 123
};
watch(obj, 'name', newValue => {
  console.log('name 被改变了')
});

css 自定义 ol/li 序号样式

踩坑记录
  61字   1分钟

默认样式：

css 自定义 ol/li 序号样式 - 小鑫の随笔

自定义样式：

css 自定义 ol/li 序号样式 - 小鑫の随笔

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ol {
  counter-reset: li;  // 创建计数器
}
ol li {
  position: relative;
  padding-left: 30px;
}
ol li::before {
  content: counter(li) ".";
  counter-increment: li;  // 递增计数器
  position: absolute;
  left: 0;
  font-size: 28px;
  color: rgba(0, 0, 0, .8);
}

Taro 函数式组件配置页面参数

学习笔记
  125字   1分钟

原来类组件的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default class Index extends Component {
  config = {
    navigationBarTitleText: '首页',
    navigationBarBackgroundColor: '#ffffff',
    backgroundColor: '#eeeeee',
    navigationBarTextStyle: 'black',
    backgroundTextStyle: 'light'
  }

  render () {
    return (
      <View className='index'>
      </View>
    )
  }
}

如果是函数式组件需要换种写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Index() {
  return (
    <View className='index'>
      <Text>1</Text>
    </View>
  )
}

Index.config = {
  navigationBarTitleText: '首页',
  navigationBarBackgroundColor: '#ffffff',
  backgroundColor: '#eeeeee',
  navigationBarTextStyle: 'black',
  backgroundTextStyle: 'light'
}

export default Index

Laravel 保存 emoji 表情

php
  149字   1分钟

最近写接口时，有个新增文章的接口报错了，报错的信息为：

1
2
3
...
SQLSTATE[HY000]: General error: 1366 Incorrect string value: '\xF0\x9F\x98\x8B\xF0\x9F...' for column 'content' at row
...

因为那个页面有富文本编辑器，所以很快的推断出了这是因为数据里有 emoji 表情导致的报错

解决办法如下：

1.设置该字段的字符编码

1
ALTER TABLE 表名 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2.修改 Laravel 配置

config/database.php

1
2
3
4
5
6
7
8
9
10
'mysql' => [
    'driver'    => 'mysql',
    'host'      => env('DB_HOST', 'localhost'),
    'port'      => env('DB_PORT', '3306'),
    'charset'   => 'utf8mb4',
    'collation' => 'utf8mb4_unicode_ci',
    'prefix'    => '',
    'strict'    => true,
    'engine'    => null,
]

Laravel 存储 base64 格式图片

php
  207字   1分钟

直接用正则替换 base64 图片的编码头即可

1
2
3
4
5
6
7
8
public function update(Request $request) {
    $coverImg = $request->get('cover_img');
    preg_match('/^(data:\s*image\/(\w+);base64,)/', $coverImg, $res);
    $coverImg = base64_decode(str_replace($res[1], '', $coverImg));
    $imagePath = str_random(10) . uniqid() . '.png';	// 生成图片名
    Storage::disk('uploads')->put($imagePath, $coverImg);	// 保存图片
    return env('APP_URL') . '/uploads/' . $imagePath;	// 拼接完成路径
}

有几个点要注意：

1.上面代码中的 Storage::disk('uploads') 是我在 config/filesystems.php 文件中定义的，如果直接把代码复制过去执行是不行的

config/filesystems.php

1
2
3
4
5
6
7
8
9
10
'disks' => [
    ...
     // 新建一个本地端uploads空间（目录） 用于存储上传的文件
    'uploads' => [
        'driver' => 'local',
        // 文件将上传到public/uploads目录 如果需要浏览器直接访问 请设置成这个
        'root' => public_path('uploads'),
      ]
    ...
],

2.部署到生产环境后需要给权限 否则无法保存图片