Tech Blog

2024-08-23




<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <div class="nav">
      <div class="nav-left">
        <img src="../assets/logo.png" alt="logo" />
        <span>美团外卖</span>
      </div>
      <div class="nav-right">
        <span>下单</span>
      </div>
    </div>
 
    <!-- 顶部banner -->
    <div class="banner">
      <img src="../assets/banner.jpg" alt="banner" />
    </div>
 
    <!-- 分类 -->
    <div class="category">
      <div class="category-item" v-for="(item, index) in categoryList" :key="index">
        <img :src="item.image" alt="category" />
        <span>{{ item.name }}</span>
      </div>
    </div>
 
    <!-- 特色推荐 -->
    <div class="special-recommend">
      <div class="sr-item" v-for="(item, index) in specialList" :key="index">
        <img :src="item.image" alt="special" />
        <div class="info">
          <span class="name">{{ item.name }}</span>
          <span class="desc">{{ item.desc }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Home',
  data() {
    return {
      categoryList: [
        // ... 分类数据
      ],
      specialList: [
        // ... 特色推荐数据
      ],
    };
  },
  // 组件创建后的钩子函数
  created() {
    // 这里可以发起API请求获取数据
  },
};
</script>
 
<style lang="scss" scoped>
/* 这里是CSS样式代码，用于控制页面的布局和样式 */
</style>

这个代码实例展示了如何使用Vue组件结构来构建一个简单的移动端外卖平台首页。在data函数中定义了用于渲染的数据列表，并在created生命周期钩子中可以添加获取数据的逻辑。在template部分，使用了类名和Vue的列表渲染指令来构建页面布局，并绑定了对应的样式类。这个简单的例子展示了如何组织Vue项目的结构，并且如何通过数据绑定和列表渲染来动态生成页面内容。

- 阅读更多 -

CSS3 弹性盒子 flex box

System

2024-08-23

所有,css3

CSS3弹性盒子（Flexible Box或Flexbox）是一种现代化的布局模型，使得复杂的布局变得更加简单，主要应对一维布局。

以下是一些使用CSS3弹性盒子的基本示例：

创建一个简单的弹性容器：




.container {
  display: flex; /* 或者 inline-flex */
}

在弹性容器中居中所有子元素：




.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用弹性盒子创建列和行：




.container {
  display: flex;
  flex-direction: column; /* 创建列 */
}

使用弹性盒子对子元素进行等分：




.container {
  display: flex;
}
 
.child {
  flex: 1; /* 等分空间 */
}

使用弹性盒子创建一个网格布局：




.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}
 
.child {
  flex: 0 0 50%; /* 每个子元素占据50%宽度 */
}

使用弹性盒子进行弹性流布局：




.container {
  display: flex;
}
 
.child {
  order: 2; /* 默认为0，值越小越靠前 */
}

弹性盒子是一种强大的工具，可以用来创建复杂的布局，而无需使用多个嵌套的div元素。这些例子只是弹性盒子所能提供的功能的一小部分，实际上，Flexbox提供了更多的属性和功能，如align-self、flex-grow、flex-shrink等，以支持更多复杂的布局需求。

System

2024-08-23

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 CSS3 String with Star Example</title>
    <style>
        .string-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        .string-box {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
            padding: 0 5px;
            background: linear-gradient(to right, #30cfd0 0%, #330f70 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-decoration: none;
            transition: 0.5s ease-in-out;
        }
        .string-box:hover {
            background-size: 150% auto;
            color: #fff;
            transition-delay: 0.5s;
        }
    </style>
</head>
<body>
    <div id="app" class="string-container">
        <div class="string-box">
            <span>{{ stringWithStars }}</span>
        </div>
    </div>
 
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    originalString: 'HelloWorld',
                };
            },
            computed: {
                stringWithStars() {
                    return this.originalString.split('').join('* ');
                }
            }
        });
 
        app.mount('#app');
    </script>
</body>
</html>

这段代码使用Vue3创建了一个简单的应用，其中stringWithStars计算属性将原始字符串的每个字符之间插入星号，并在页面上以炫丽的视觉效果呈现。通过CSS3的background-clip属性和-webkit-text-fill-color属性实现了文字的渐变效果，并且在鼠标悬停时添加了视觉效果。这个例子展示了如何将创意的CSS3效果融入Vue3应用程序中，提升用户界面的视觉吸引力。

- 阅读更多 -

qtdesigner给QLabel添加边框

System

2024-08-23

所有,css3

在Qt Designer中给QLabel添加边框不是通过直接在设计工具中设置一个属性就能实现的，因为QLabel本身不支持边框。但是，你可以通过一些编程的方式来实现。

下面是一个简单的例子，展示了如何在运行时给QLabel添加边框。




from PyQt5.QtWidgets import QApplication, QMainWindow, QLabel, QVBoxLayout, QWidget
from PyQt5.QtGui import QPalette, QBrush, QColor
 
class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.initUI()
 
    def initUI(self):
        # 创建一个QLabel
        label = QLabel(self)
        label.setText("带边框的标签")
 
        # 设置QLabel的样式表为添加边框
        label.setStyleSheet("QLabel {"
                            "border: 2px solid red;"
                            "}")
 
        # 布局设置
        centralWidget = QWidget()
        self.setCentralWidget(centralWidget)
        layout = QVBoxLayout()
        layout.addWidget(label)
        centralWidget.setLayout(layout)
 
        # 设置窗口的大小
        self.setGeometry(100, 100, 300, 200)
        self.setWindowTitle('带边框的QLabel')
        self.show()
 
if __name__ == '__main__':
    app = QApplication([])
    mainWin = MainWindow()
    app.exec_()

在这个例子中，我们创建了一个QMainWindow，并在其中添加了一个QLabel。通过设置QLabel的styleSheet属性，我们可以为它添加一个边框。这里的边框是2像素宽，实线，红色的。你可以根据需要调整边框的样式。

- 阅读更多 -

css3实现页面元素抖动效果

System

2024-08-23

所有,css3

CSS3可以通过animation和keyframes来实现页面元素的抖动效果。以下是一个简单的例子，展示了如何使用CSS3为一个元素添加抖动动画：




@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(5px); }
}
 
.shake-animation {
  animation: shake 0.5s; /* 抖动的持续时间 */
  animation-iteration-count: infinite; /* 动画重复次数 */
}

在HTML中，你可以给需要抖动的元素添加shake-animation类：




<div class="shake-animation">抖动的元素</div>

这段代码定义了一个shake的关键帧动画，它会让元素在水平方向上左右抖动。通过将这个动画应用到你想要抖动的元素上，就可以实现抖动效果。

- 阅读更多 -

vue 进度条组件（可拖拽可点击）

System

2024-08-23

所有,css3

在Vue中创建一个可拖拽和可点击的进度条组件，你可以使用vue-slider-component库，它提供了一个可自定义样式的滑块组件。以下是一个简单的例子：

首先，安装vue-slider-component：




npm install vue-slider-component --save

然后，在你的Vue组件中使用它：




<template>
  <div>
    <vue-slider v-model="progress" :min="0" :max="100" @change="handleProgressChange"></vue-slider>
  </div>
</template>
 
<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
 
export default {
  components: {
    VueSlider
  },
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    handleProgressChange(value) {
      // 处理进度条值改变时的逻辑
      console.log('Progress changed to:', value);
    }
  }
}
</script>
 
<style>
/* 在这里可以自定义进度条的样式 */
</style>

在这个例子中，vue-slider-component被用作可拖拽的进度条，并绑定了一个v-modelprogress来同步进度值。当进度条的值改变时，@change事件被触发，并调用handleProgressChange方法来处理进度值的变化。你可以在handleProgressChange方法中实现你的逻辑，比如播放视频、调整音量等。

- 阅读更多 -

CSS3 渐变

System

2024-08-23

所有,css3

CSS3 渐变是使用 linear-gradient() 或 radial-gradient() 函数创建的。

线性渐变（Linear Gradients）：




.linear-gradient {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

示例：




div {
  background: linear-gradient(to right, red, yellow);
}

径向渐变（Radial Gradients）：




.radial-gradient {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

示例：




div {
  background: radial-gradient(circle, red, yellow, green);
}

方向可以用角度或方位词（如 to top, to right 等）来指定。径向渐变的形状可以是 circle 或 ellipse，大小可以设置为 closest-side, farthest-side, closest-corner, farthest-corner, 或者特定的宽度和高度。位置决定渐变的中心点，可以是百分比或具体像素值。

- 阅读更多 -

css补充

System

2024-08-23

所有,css3

在CSS中，可以使用多种方式来补充或者修改一个已有的样式规则。以下是一些常用的CSS补充方法：

使用不同的选择器来增强样式规则，提高其优先级。
使用!important规则来强制应用特定的样式。
通过增加CSS文件的加载顺序来覆盖之前的样式。

例如，假设我们有以下HTML结构和CSS样式：




<div class="box">Box</div>




.box {
  color: blue;
}

我们可以通过以下方法来补充或修改这个样式：

增加选择器的特异性：




body .box {
  color: red;
}

使用!important：




.box {
  color: blue !important;
}
 
body .box {
  color: red;
}

改变CSS加载顺序：




<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="overrides.css">

在overrides.css中：




.box {
  color: red;
}

这些方法可以根据具体情况选择使用，但需要注意!important的滥用可能会导致维护上的问题，应该谨慎使用。

- 阅读更多 -

uniapp 自定义 picker

System

2024-08-23

所有,css3

在uniapp中创建自定义picker组件，可以通过使用<picker>组件并结合数据绑定和事件处理来实现。以下是一个简单的自定义picker组件的示例代码：




<template>
  <view>
    <picker mode="selector" :range="range" @change="onChange">
      <view class="picker">
        {{selectedValue}}
      </view>
    </picker>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      range: ['选项1', '选项2', '选项3'],
      selectedValue: '请选择'
    };
  },
  methods: {
    onChange(e) {
      this.selectedValue = this.range[e.detail.value];
      this.$emit('change', this.selectedValue);
    }
  }
};
</script>
 
<style>
.picker {
  padding: 10px;
  background-color: #fff;
  text-align: center;
}
</style>

在这个组件中，range数组定义了picker的可选项，selectedValue用于显示当前选中的值，onChange方法用于更新选中的值，并且通过$emit方法向父组件发送change事件。

使用这个自定义picker组件时，可以这样做：




<template>
  <view>
    <custom-picker @change="onCustomPickerChange"></custom-picker>
  </view>
</template>
 
<script>
import CustomPicker from '@/components/CustomPicker.vue';
 
export default {
  components: {
    CustomPicker
  },
  methods: {
    onCustomPickerChange(value) {
      console.log('选中的值是：', value);
    }
  }
};
</script>

在父组件中，你可以通过@change事件来监听自定义picker的选中值变化。

- 阅读更多 -

uview 中的u-sticky u-tabs 修改成员间隔

System

2024-08-23

所有,css3

在uView UI中，u-sticky 和 u-tabs 组件可以通过修改样式来调整成员（标签页）之间的间隔。你可以使用类选择器来定位到特定的成员，并为它们添加样式。

以下是一个示例，展示如何通过外部CSS样式表修改uView中u-tabs组件的成员间隔：




/* 增加标签之间的间隔 */
.u-tabs__content {
    --u-tabs-item-margin: 0 20rpx; /* 修改成员间隔 */
}
 
/* 如果需要针对特定的标签页进行间隔调整，可以增加更具体的选择器 */
.u-tabs__content u-tabs-item:nth-child(2) {
    margin-right: 40rpx; /* 只修改第二个标签页和其右侧成员的间隔 */
}

在你的页面的<style>标签中添加上述CSS代码，它将应用到使用u-tabs组件的页面上。

请注意，u-tabs 组件的间隔可能还受到其它CSS样式的影响，如父容器的padding或边距。你可能需要根据实际情况调整选择器和间隔值。

- 阅读更多 -