常用

oak666
57 阅读7分钟

1. 三元条件运算符

item.fold ? 'fold' : ''
  • 如果 item.fold 的值为 true，则整个表达式的值为 'fold'，因此类名数组中将包含 'fold-suffix' 和 'fold'。
  • 如果 item.fold 的值为 false 或者其他 falsy 值（如 null, undefined, 0, false, NaN, ''），则表达式的值为空字符串 ''，此时类名数组只包含 'fold-suffix'，而不包含 'fold'。

2. export default

export default 是在JavaScript模块系统（如ES6模块或CommonJS模块）中导出默认模块的方式。当你使用 export default 时，可以在导入该模块时使用任何名称，这使得它在某些情况下更加灵活。

export default function useBaseDialogHook() {}
  • 在提供的代码片段中，定义了一个名为 useBaseDialogHook 的函数，并使用 export default 导出。这意味着这个函数可以被其他文件引入并使用。

3. 解构赋值

解构赋值是ES6（ECMAScript 2015）引入的一种语法特性，它允许你从数组或对象中方便地提取值并赋给变量。这种语法可以简化代码，提高可读性，并减少错误。

// 假设useBaseDialogHook的返回值是这样的对象 
// const dialogState = { 
//   visible: true,
//   handleDialog: () => {/*...*/},
// };

// 现在可以直接使用 
if (visible) { 
  console.log('对话框是可见的'); 
}

// 调用handleDialog函数来改变对话框状态 
handleDialog();

2和3结合，可用于当一个文件的模块较多且对应操作也很多时，将同一模块的操作封装成外部文件，便于管理

4.interface

//适用大量属性
//定义IProps接口中传的属性的类型
interface IProps {
  visible?: boolean; 
  ····
}；

interface规定了一组方法或属性，任何实现这个接口的类都必须遵循这些规范，提供具体的方法实现。接口主要用于实现抽象化、多态性和解耦设计，使得代码更加灵活、可扩展和可维护。

再配上

//定义属性默认值
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  ···
}；

合起来等价于

//适用于少量属性
// const props = defineProps({
//   visible: {
//     type: Boolean,
//     default: false,
//   },
// });

5.defineEmits

  1. 详细类型定义：
////: void表示事件处理器函数没有返回值。
typescript
   const emit = defineEmits<{
     (event: 'update:visible', val: boolean): void;
     (event: 'confirm', val?: boolean): void;
     (event: 'cancel', val?: boolean): void;
     (event: 'close', val?: boolean): void;
   }>();

这种写法使用 TypeScript 的类型定义，不仅指定了事件名称，还指定了每个事件的参数类型。例如，'update:visible' 事件需要一个布尔值作为参数，而 'confirm'、'cancel' 和 'close' 事件则可选地接受一个布尔值。这种详细的类型定义可以提供更好的类型检查和代码提示，避免在使用 emit 发送事件时出现类型错误。

  1. 简单字符串数组：
typescript
   const emit = defineEmits(["update:visible", "close"]);

这种写法只列出了事件名称的字符串数组，没有指定参数类型。这意味着在使用 emit 发送事件时，TypeScript 编译器不会检查事件参数的类型，只能确保事件名称正确。因此，这种写法在类型安全性上相对较弱，但编写起来更简洁。

6.Vue中绑定类

1.动态绑定

1.1 数组语法

在数组中可以混合字符串、对象和计算属性的返回值。

<div :class="[basicClass, { active: isActive }, sizeClass]"> 示例文本 </div>

1.2. 三元运算符

直接在模板中使用三元运算符进行条件判断。

<div :class="isActive ? 'active' : ''">
  • 1.3. 计算属性 (Computed Property)*

将复杂的类绑定逻辑封装到计算属性中，使模板更简洁。

<template> 
  <div :class="classList"> 示例文本 </div> 
</template>
<script> 
export default {
  data() {
    return {
      isActive: true, 
      isLargeText: false, 
    };
  },
  computed: { 
    classList() { 
      return { 
        'default-class': true, 
        active: this.isActive, 
        'text-lg': this.isLargeText, 
      }; 
    }, 
  }, 
};

1.4. 动态绑定到特定属性

如果你想要根据某个特定属性动态改变整个类名列表，可以直接将计算属性或方法绑定到:class

<template> 
  <div :class="dynamicClassObject()"> 示例文本 </div> 
</template> 
<script> 
export default { 
  methods: { 
    dynamicClassObject() { 
    // 根据需要动态生成并返回类名对象 
      return {/* 类名对象 */}; 
    }, 
  }, 
}; 
</script>

1.5.对象语法

在Vue中，对象语法用于:class指令来动态地绑定一个或多个CSS类。这种语法允许你根据组件的数据属性来有条件地添加或移除类。

<element :class="{ className1: condition1, className2: condition2, ... }"></element>

在这个结构中：

  • element 是你想要应用类的HTML元素。

  • :class 是Vue的绑定语法，用于将数据绑定到元素的class属性。

  • { className1: condition1, className2: condition2, ... } 是一个对象，其中：

    • className1, className2, ... 是你要动态添加或移除的CSS类名。
    • condition1, condition2, ... 是Vue实例中的数据属性或计算属性，它们的值会决定对应的类是否应该被添加到元素上。如果条件为true，则对应的类会被添加；如果条件为false，则对应的类会被移除。

2.静态绑定 在Vue模板中，直接在class属性中列出多个静态类名，用空格分隔，如：

//单个
<template> 
  <div class="static-class">这是静态绑定的类</div> 
</template>

//多个
<template> 
  <div class="class1 class2 class3">这是包含多个静态类名的元素</div> 
</template>

7.居中（水平和垂直方向）

//盒模型在视图居中
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
//文字在盒模型居中
    display: flex;
    justify-content: center;
    align-items: center;

8.animation与transition

transition（过渡）和animation（动画）都是CSS中用于实现元素在状态改变时的视觉效果的属性，但它们在功能和使用场景上有明显的区别：

1. Transition（过渡）

  • 定义：过渡是元素从一种状态平滑地变化到另一种状态的效果。它主要用于简单的状态变化，比如鼠标悬停、焦点改变时的样式变化。
  • 触发：过渡是基于状态改变的，通常需要一个触发事件（如:hover、:focus、class的添加或删除等）来启动。
  • 属性：使用transition简写属性设置过渡效果，包括属性名、持续时间、延迟时间和速度曲线（如transition: all 0.5s ease;）。
  • 简捷性：适合于简单的一次性动画效果，配置相对简单。
  • 控制：较为有限，无法控制动画的循环、反向播放等复杂行为。

2. Animation（动画）

  • 定义：动画提供了一种更加强大和灵活的方式来创建复杂的动画效果，它可以定义一系列关键帧，让元素在这些关键帧间进行动画变换。
  • 触发：动画可以自动播放，不完全依赖于状态变化，通过@keyframes规则定义动画序列，然后通过animation属性应用到元素上。
  • 属性：包括动画名称、持续时间、延迟、迭代次数、速度曲线、是否反向播放等（如animation: myAnimation 2s infinite alternate ease-in-out;）。
  • 复杂度：支持复杂的动画序列，可以控制动画的每一个细节，适合于复杂的、重复的、周期性的动画效果。
  • 控制：高度灵活，可以通过@keyframes定义动画的每一帧，控制动画的开始、结束、循环次数、方向等。

对比总结

  • 应用场景：对于简单的状态改变效果，如颜色变化、尺寸调整等，使用transition更为方便快捷。而对于需要精细控制、复杂序列或周期性效果的动画，animation是更好的选择。
  • 复杂度与灵活性：animation提供了更高的复杂度和灵活性，而transition则更简单直接。
  • 资源消耗：复杂的animation可能会消耗更多的计算资源，尤其是在移动设备上，因此在考虑性能时，简单的transition可能是更优的选择。

总之，选择transition还是animation取决于具体的设计需求和和性能考量。

9.uni.showToast

uni.showToast 是 UniApp 框架中用于显示短暂提示信息的API。这个方法提供了简单、快速的方式来向用户显示一些简短的通知，通常用于反馈操作结果或提示信息。

uni.showToast({ 
  title: string, // 提示信息的文本 
  icon: string, // 图标类型，可以是 "success", "loading", "none" 或者 "default" 
  duration: number, // 提示显示的时长，单位为毫秒，默认为2000毫秒（2秒） 
  mask: boolean, // 是否显示半透明蒙层，默认为 false 
  position: string, // 提示位置，可选 "top", "middle", "bottom"，默认为 "middle" 
  zIndex: number, // 提示层级，数值越大越靠前，默认为 9999 
  success: Function, // 成功回调函数，提示显示成功后触发 
  fail: Function, // 失败回调函数，提示显示失败时触发 
  complete: Function // 完成回调函数，无论成功或失败都会触发 
})

使用场景

uni.showToast 通常用于：

  • 提示用户操作成功或失败。
  • 显示短暂的加载状态。
  • 在执行异步操作时提供反馈。

注意事项

  • 如果需要手动关闭提示，可以使用 uni.hideToast() 方法。
  • 提示信息不能包含换行符，因为它们是单行显示的。
  • 提示信息的显示效果和样式可能会受到uni-app底层框架（如微信小程序、H5、App等）的影响，具体表现可能会因平台而异。
avatar
文章
阅读
粉丝