Tech Blog

2024-08-15

Dhtmlx Gantt是一个用于项目管理的交互式时间线图表工具。以下是针对Dhtmlx Gantt中部分属性的解释和示例代码：

taskHandlerWidth：设置任务条上的拖动手柄的宽度。




gantt.config.task_handler_width = 10; // 设置宽度为10像素

scaleHeight：设置日期范围的高度，即时间轴的高度。




gantt.config.scale_height = 60; // 设置高度为60像素

columns：自定义列的显示。




gantt.config.columns = [
    {name:"text", label:"Task name", tree:true, width:"*"},
    {name:"start_date", label:"Start date", align:"center"},
    {name:"duration", label:"Duration", align:"center"}
];

scale：设置时间轴的配置，如小时数或者天数等。




gantt.config.scales = [
    {unit:"day", step:1, format:"%j %M"},
    {unit:"hour", step:1, format:"%H"}
];

dragBounds：设置任务拖动的边界限制。




gantt.config.drag_bounds = "parent"; // 限制拖动在父元素范围内

这些属性可以通过修改gantt.config对象的属性来设置。具体的属性名称可以在Dhtmlx Gantt的官方文档中找到。这些代码示例展示了如何设置这些属性，以便根据项目需求调整Gantt图表的显示。

- 阅读更多 -

vue3中watch（监听）的五种情况

System

2024-08-15

所有,vue.js

在Vue 3中，watch用于观察Vue组件中数据的变化，并执行相应的函数来响应这些变化。以下是watch的五种常见情况和相应的代码示例：

观察响应式引用：




import { watch, ref } from 'vue';
 
const counter = ref(0);
watch(counter, (newValue, oldValue) => {
  console.log(`The new counter value is: ${newValue}, old value was: ${oldValue}`);
});
 
// 更改counter的值
counter.value++;

观察响应式对象中的属性：




import { reactive, watch } from 'vue';
 
const state = reactive({
  count: 0,
  name: 'Vue'
});
 
watch(() => state.count, (newValue, oldValue) => {
  console.log(`state.count changed from ${oldValue} to ${newValue}`);
});
 
// 更改state.count的值
state.count++;

直接传入响应式引用或函数，并监听其变化：




import { watch, ref } from 'vue';
 
const counter = ref(0);
watch(counter, (newValue, oldValue) => {
  console.log(`The new counter value is: ${newValue}, old value was: ${oldValue}`);
});
 
// 更改counter的值
counter.value++;

使用deep配置来深度观察一个对象：




import { reactive, watch } from 'vue';
 
const state = reactive({
  count: 0,
  nested: { value: 'Nested value' }
});
 
watch(
  () => state.nested,
  (newValue, oldValue) => {
    console.log('Nested property changed:', newValue, oldValue);
  },
  {
    deep: true
  }
);
 
// 更改嵌套对象的属性
state.nested.value = 'Updated nested value';

使用immediate配置来立即执行watch的回调函数：




import { watch, ref } from 'vue';
 
const counter = ref(0);
watch(counter, (newValue, oldValue) => {
  console.log(`The new counter value is: ${newValue}, old value was: ${oldValue}`);
}, {
  immediate: true
});
 
// 组件已挂载时，counter的值已经被观察

以上代码示例展示了Vue 3中watch的基本用法，包括如何观察响应式数据的变化、如何进行深度观察以及如何在组件初始化时立即执行watch的回调函数。

- 阅读更多 -

CSS布局：Flex布局

System

2024-08-15

所有,css3

Flexbox布局是CSS中的一种布局模型，可以简化复杂的布局，并在不同尺寸的屏幕上提供一致的用户体验。

以下是一个简单的Flex布局示例，它将创建一个水平的导航菜单：




.nav {
  display: flex; /* 使用Flex布局 */
  list-style-type: none; /* 移除列表的标记 */
  padding: 0; /* 移除默认的内边距 */
  margin: 0; /* 移除默认的外边距 */
}
 
.nav li {
  padding: 10px; /* 添加内边距 */
}
 
.nav li:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景色 */
}




<ul class="nav">
  <li>首页</li>
  <li>产品</li>
  <li>关于</li>
  <li>联系</li>
</ul>

这个Flex布局会使得<li>元素在容器.nav中水平排列。当鼠标悬停在某个<li>元素上时，会有背景色的变化，提供了一定的用户反馈。

- 阅读更多 -

HTML爱心照片墙源码

System

2024-08-15

所有,css3

以下是一个简单的HTML爱心照片墙的示例代码。这个示例使用了HTML和CSS来创建一个网页，其中包含了一系列的爱心图片。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heart Photo Wall</title>
<style>
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
  }
  .photo-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  .photo-wall img {
    margin: 10px;
    width: 150px;
    height: 150px;
    object-fit: contain;
  }
</style>
</head>
<body>
 
<div class="photo-wall">
  <img src="heart1.jpg" alt="Heart Photo 1">
  <img src="heart2.jpg" alt="Heart Photo 2">
  <img src="heart3.jpg" alt="Heart Photo 3">
  <!-- Add more images as needed -->
</div>
 
</body>
</html>

在这个示例中，.photo-wall 类使用了flexbox布局来排列照片，img 元素设置了统一的样式。你需要将 heart1.jpg, heart2.jpg, heart3.jpg 替换成实际的图片文件名。如果有更多的图片，你可以继续添加 <img src="..." alt="Heart Photo X"> 到 .photo-wall 容器中。这个示例提供了一个简单的起点，你可以根据需要添加更多的样式和功能。

- 阅读更多 -

使用css实现边框流动效果

System

2024-08-15

所有,css3

要使用CSS实现边框流动效果，可以通过关键帧（keyframes）和动画（animations）属性来完成。以下是一个简单的例子，展示如何为一个元素添加边框流动的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Flow Effect</title>
<style>
  .border-flow {
    width: 200px;
    height: 50px;
    position: relative;
    background-color: #f0f0f0;
    margin: 20px;
    border-radius: 10px;
    animation: flow 2s infinite alternate;
  }
 
  .border-flow::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #333;
    border-radius: inherit;
    animation: flow-border 2s infinite alternate;
  }
 
  @keyframes flow {
    0% {
      box-shadow: 0 0 10px #333;
    }
    100% {
      box-shadow: 0 0 20px #333;
    }
  }
 
  @keyframes flow-border {
    0% {
      border-color: #333;
    }
    100% {
      border-color: #f0f0f0;
    }
  }
</style>
</head>
<body>
<div class="border-flow"></div>
</body>
</html>

在这个例子中，.border-flow 类创建了一个带有背景色和圆角的盒子，并且使用 ::before 伪元素来创建一个边框。animation 属性用于应用流动效果，@keyframes flow 和 @keyframes flow-border 定义了这个动画的关键帧。动画效果通过改变盒子的 box-shadow 和伪元素的 border-color 来实现，从而模拟出边框流动的视觉效果。

System

2024-08-15

所有,css3

在HTML中，可以使用<blockquote>标签来表示一块引用自其他来源的文本。通常，这些文本会以斜体显示，并且还可以添加一个引号标记（通常是一个大的引号字符）来表示这是一个引用。

下面是一个使用<blockquote>的例子：




<blockquote>
  这是一个示例引用。这段文本将以斜体显示，并且在左右两边有装饰性的引号。
</blockquote>

在CSS中，可以使用::before和::after伪元素来添加引号标记。下面是一个简单的CSS样式示例，它将给<blockquote>添加装饰性的引号：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blockquote Example</title>
<style>
blockquote {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  margin: 20px 0;
  padding: 10px 20px;
  position: relative;
  quotes: '" "' '';
}
 
blockquote::before {
  content: open-quote;
  position: absolute;
  left: 5px;
  top: 5px;
  color: #666;
  font-size: 3em;
}
 
blockquote::after {
  content: close-quote;
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #666;
  font-size: 3em;
}
</style>
</head>
<body>
<blockquote>
  这是一个示例引用。这段文本将以斜体显示，并且在左右两边有装饰性的引号。
</blockquote>
</body>
</html>

在这个例子中，blockquote选择器定义了块引用的基本样式，而blockquote::before和blockquote::after伪元素分别添加了开始和结束的引号。content属性使用了open-quote和close-quote值，它们引用了quotes属性定义的值。

- 阅读更多 -

嵌套的子元素多层flex：1以后不生效

System

2024-08-15

所有,css3

当你在CSS中使用flexbox布局时，如果你在父元素上设置了flex: 1，而子元素也设置了flex: 1，你可能会期望子元素会占据父元素的1/4（如果有4个兄弟元素）。但如果子元素自身又包含了其他元素，并且这些元素也设置了flex: 1，那么这些元素可能不会按照你的预期工作。

这是因为flex: 1只在直接子元素之间分配可用空间。如果子元素包含了嵌套的子元素，并且这些嵌套的子元素也设置了flex: 1，则它们只会相对于它们的同级元素进行伸缩，而不会跨越多层嵌套。

解决方法：

确保每个需要伸缩的元素都是直接子元素。
如果你需要在多层嵌套中使用flex布局，你可以使用flex-grow、flex-shrink和flex-basis属性来更精细地控制伸缩行为。

例如，使用flex-grow属性而不是flex shorthand：




.grandchild {
  flex-grow: 1;
}

这样可以确保所有的子孙元素（grandchild）都会在父元素中均等分配可用空间。

- 阅读更多 -

css布局和定位

System

2024-08-15

所有,css3

CSS布局和定位是Web开发中的一个核心技能。以下是一些常用的布局和定位技术：

浮动（Float）：




.float-left { float: left; }
.float-right { float: right; }

定位（Position）：




.relative-position { position: relative; top: 10px; left: 20px; }
.absolute-position { position: absolute; top: 0; right: 0; }
.fixed-position { position: fixed; bottom: 0; left: 0; }

flexbox布局：




.flex-container { display: flex; }
.flex-item { flex: 1; }

grid布局：




.grid-container { display: grid; grid-template-columns: auto 1fr; }
.grid-item { grid-column: 2 / 3; }

表格布局：




.table-layout { display: table; width: 100%; }
.table-row { display: table-row; }
.table-cell { display: table-cell; padding: 10px; }

绝对定位（Inline-block）：




.inline-block { display: inline-block; vertical-align: top; }

这些方法可以根据不同的布局需求选择使用。在实际开发中，可以根据项目的具体要求和浏览器的兼容性需求进行选择和应用。

- 阅读更多 -

flex布局：元素两侧对齐

System

2024-08-15

所有,css3

在Flex布局中，要使得元素两侧对齐，可以使用justify-content: space-between;属性。这会使得容器内的子元素分布在容器的两端，并且两端的子元素分别贴边，同时保持子元素之间的距离相等。

下面是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: space-between;
}
 
.flex-item {
  width: 50px; /* 可以根据需要调整宽度 */
  height: 50px; /* 可以根据需要调整高度 */
  background-color: #f1f1f1;
  margin: 10px; /* 可以根据需要调整外边距 */
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>
 
</body>
</html>

在这个例子中，.flex-container是一个Flex容器，其中包含三个.flex-item元素。通过设置justify-content: space-between;，这三个项就会分布在容器的两侧，并且保持相等的距离。

- 阅读更多 -

关于flex盒子padding-right/margin-right不生效

System

2024-08-15

所有,css3

这个问题可能是由于Flex布局的特性导致的。在Flex容器中，如果你为子元素设置了margin-right或padding-right，而容器的主轴方向是水平的（默认情况下通常是这样），那么这些值可能不会产生预期的效果。

Flex布局中，外边距（margin）和内填充（padding）的计算方式与传统CSS布局不同。在Flex容器中，如果子元素没有设置宽度（或者设置为flex: 1），那么它们会自动扩展以填充可用空间。这意味着，如果你给子元素设置了固定的width或margin-right，这些值可能不会产生预期的效果，因为Flex布局会重新计算这些元素的大小。

解决方法：

如果你想要在Flex子元素之间添加空间，可以使用justify-content属性来调整子元素之间的空间，例如justify-content: space-between或justify-content: space-around。
如果你需要在Flex子元素内部添加内边距或外边距，可以直接对Flex子元素使用padding-right和margin-right，而不是对Flex容器的子元素。
另一种方法是使用Flex的margin属性，例如margin: 0 0 0 10px;（代表子元素距离其父元素右边界10px）。
如果你需要对Flex子元素的最右边进行特别定位，可以使用position: relative和right: 10px的组合来微调子元素的位置。
如果你想要保持Flex布局的特性同时解决这个问题，可以为子元素设置flex-grow属性为0，这样子元素就不会自动扩展来填充空间了，此时margin-right和padding-right将生效。

例如：




.flex-item {
  flex: 0 1 auto; /* 这将防止元素扩展，允许 margin-right 和 padding-right 生效 */
  margin-right: 20px; /* 设置右外边距 */
  /* 或者 */
  padding-right: 20px; /* 设置右内边距 */
}

确保在实际的Flex容器中测试这些解决方案，以查看哪种最适合你的布局需求。

- 阅读更多 -