在参与 Vant 开发时,请遵守约定的单文件组件风格指南,指南内容节选自 Vue 官方风格指南。
组件的 data 必须是一个函数。
// bad
export default {
data: {
foo: "bar",
},
};
// good
export default {
data() {
return {
foo: "bar",
};
},
};
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
// bad
mycomponent.vue
myComponent.vue
// good
my-component.vue
MyComponent.vue
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue
// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue
在单文件组件中没有内容的组件应该是自闭合的。
<!-- bad -->
<my-component></my-component>
<!-- good -->
<my-component />
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case。
// bad
export default {
props: {
"greeting-text": String,
},
};
// good
export default {
props: {
greetingText: String,
},
};
<!-- bad -->
<welcome-message greetingText="hi" />
<!-- good -->
<welcome-message greeting-text="hi" />
指令缩写,用 : 表示 v-bind: ,用 @ 表示 v-on:
<!-- bad -->
<input v-bind:value="value" v-on:input="onInput" />
<!-- good -->
<input :value="value" @input="onInput" />
标签的 Props 应该有统一的顺序,依次为指令、属性和事件。
<my-component
v-if="if"
v-show="show"
v-model="value"
ref="ref"
:key="key"
:text="text"
@input="onInput"
@change="onChange"
/>
组件选项应该有统一的顺序。
export default {
name: "",
components: {},
props: {},
emits: [],
setup() {},
data() {},
computed: {},
watch: {},
created() {},
mounted() {},
unmounted() {},
methods: {},
};
组件选项较多时,建议在属性之间添加空行。
export default {
computed: {
formattedValue() {
// ...
},
styles() {
// ...
},
},
methods: {
onInput() {
// ...
},
onChange() {
// ...
},
},
};
单文件组件应该总是让顶级标签的顺序保持一致,且标签之间留有空行。
<template> ... </template>
<script>
</script>
<style>
</style>
介绍用于将本地的图片或文件上传至服务器,并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的...
Button 按钮常用的操作按钮。基础用法基础的按钮用法。使用type、plain、round和circle属性来定义 Button 的样...
在同一个选择器里选择日期和时间DateTimePicker 由 DatePicker 和 TimePicker 派生,相关属性可以参照 DatePicker 和 TimePicker...
geo.label.normal.rich |Object在rich里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。例如:lab...
parallel.parallelAxisDefault.axisLabel |Object平行坐标轴刻度标签的相关设置。parallel.parallelAxisDefault.axisLabel.show ...
ECharts 中 calendar 表示日历坐标系组件。在 ECharts 中日历图的实现,是通过使用日历坐标系组件来达到日历图效果的,如下方的...
calendar.yearLabel |Object设置 ECharts 日历坐标中年份标签。calendar.yearLabel.show |boolean[ default: true ]是否在普通状...
您可以使用 series[i]-bar 来在 ECharts 中实现柱状(条形)图,ECharts 柱状(条形)图是通过柱形的高度(条形的宽度)来表现数...
Highcharts 异步加载数据曲线图表Highcharts 曲线图以下实例演示了异步加载数据曲线图表。这边我们通过 jQuery.getJSON() 方法从...