optimize: 优化代码: ♻️ 添加component文件夹
This commit is contained in:
parent
b7cad430bc
commit
f33aa6c9d8
|
|
@ -1,44 +1,35 @@
|
|||
// npm i stylelint-config-standard stylelint-config-standard-scss stylelint-config-recess-order stylelint-config-prettier
|
||||
// npm i stylelint-config-html stylelint-config-recommended-vue
|
||||
|
||||
// @see: https://stylelint.io
|
||||
module.exports = {
|
||||
/* 继承某些已有的规则 */
|
||||
extends: [
|
||||
'stylelint-config-standard', // 配置stylelint拓展插件
|
||||
'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
|
||||
'stylelint-config-standard-scss', // 配置stylelint scss插件
|
||||
'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
|
||||
'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
|
||||
'stylelint-config-prettier', // 配置stylelint和prettier兼容
|
||||
'stylelint-config-standard',
|
||||
'stylelint-config-html/vue',
|
||||
'stylelint-config-standard-scss',
|
||||
'stylelint-config-recommended-vue/scss',
|
||||
'stylelint-config-recess-order',
|
||||
'stylelint-config-prettier',
|
||||
],
|
||||
overrides: [
|
||||
// 扫描 .vue/html 文件中的<style>标签内的样式
|
||||
{
|
||||
files: ['**/*.{vue,html}'],
|
||||
customSyntax: 'postcss-html',
|
||||
},
|
||||
],
|
||||
/**
|
||||
* null => 关闭该规则
|
||||
*/
|
||||
rules: {
|
||||
'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
|
||||
'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
|
||||
'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
|
||||
'string-quotes': 'double', // 指定字符串使用单引号或双引号
|
||||
'unit-case': null, // 指定单位的大小写 "lower(全小写)"|"upper(全大写)"
|
||||
'color-hex-case': 'lower', // 指定 16 进制颜色的大小写 "lower(全小写)"|"upper(全大写)"
|
||||
'color-hex-length': 'long', // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
|
||||
'rule-empty-line-before': 'never', // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行。)"
|
||||
'font-family-no-missing-generic-family-keyword': null, // 禁止在字体族名称列表中缺少通用字体族关键字
|
||||
'block-opening-brace-space-before': 'always', // 要求在块的开大括号之前必须有一个空格或不能有空白符 "always(大括号前必须始终有一个空格)"|"never(左大括号之前绝不能有空格)"|"always-single-line(在单行块中的左大括号之前必须始终有一个空格)"|"never-single-line(在单行块中的左大括号之前绝不能有空格)"|"always-multi-line(在多行块中，左大括号之前必须始终有一个空格)"|"never-multi-line(多行块中的左大括号之前绝不能有空格)"
|
||||
'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
|
||||
'no-empty-source': null, // 禁止空源码
|
||||
'declaration-block-trailing-semicolon': null, // 要求或不允许在声明块中使用尾随分号 string："always(必须始终有一个尾随分号)"|"never(不得有尾随分号)"
|
||||
'selector-class-pattern': null, // 强制选择器类名的格式
|
||||
'scss/at-import-partial-extension': null, // 解决不能引入scss文件
|
||||
'value-no-vendor-prefix': null, // 关闭 vendor-prefix(为了解决多行省略 -webkit-box)
|
||||
'value-keyword-case': null,
|
||||
'no-descending-specificity': null,
|
||||
'function-url-quotes': 'always',
|
||||
'string-quotes': 'double',
|
||||
'unit-case': null,
|
||||
'color-hex-case': 'lower',
|
||||
'color-hex-length': 'long',
|
||||
'rule-empty-line-before': 'never',
|
||||
'font-family-no-missing-generic-family-keyword': null,
|
||||
'block-opening-brace-space-before': 'always',
|
||||
'property-no-unknown': null,
|
||||
'no-empty-source': null,
|
||||
'declaration-block-trailing-semicolon': null,
|
||||
'selector-class-pattern': null,
|
||||
'scss/at-import-partial-extension': null,
|
||||
'value-no-vendor-prefix': null,
|
||||
'selector-pseudo-class-no-unknown': [
|
||||
true,
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@ module.exports = {
|
|||
'*.{js,jsx,ts,tsx,vue}': ['eslint --fix', 'prettier --write'],
|
||||
'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
|
||||
'package.json': ['prettier --write'],
|
||||
'*.{scss,less,styl,html,vue}': ['stylelint --fix', 'prettier --write'],
|
||||
'*.{scss,less,styl,html,vue}': ['prettier --write'],
|
||||
'*.md': ['prettier --write'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<el-table :data="tableData" size="large" v-bind="$attrs">
|
||||
<el-table-column v-for="item in column" :key="item.prop" v-bind="item">
|
||||
<template v-if="$slots[item.prop]" #default="scope">
|
||||
<slot :name="item.prop" v-bind="scope"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
interface TableData {
|
||||
[propName: string]: any;
|
||||
}
|
||||
|
||||
interface Column {
|
||||
prop: string;
|
||||
label: string;
|
||||
|
||||
[propName: string]: any;
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
tableData: TableData[];
|
||||
column: Column[];
|
||||
}>();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div ref="refContainer" class="table-container">
|
||||
<table ref="refTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">序号</th>
|
||||
<th scope="col">工厂</th>
|
||||
<th scope="col">产量</th>
|
||||
<th scope="col">库存</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in data" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.hobby }}</td>
|
||||
<td>{{ item.address }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const data = new Array(100).fill(0).map(() => ({ name: '工厂1', date: '711', hobby: '133', address: '0.333' }));
|
||||
const refContainer = ref<HTMLTableElement | null>(null);
|
||||
const refTable = ref<HTMLTableElement | null>(null);
|
||||
const scrollSpeed = ref(1); // 滚动速度，可以根据需要调整
|
||||
const scrollInterval = 16; // 滚动间隔，单位为毫秒
|
||||
|
||||
const scrollTable = () => {
|
||||
if (refTable.value != null && refContainer.value != null) {
|
||||
refContainer.value.scrollTop += scrollSpeed.value;
|
||||
if (
|
||||
refContainer.value.scrollTop + 1 >= refTable.value.clientHeight - refContainer.value.clientHeight ||
|
||||
refContainer.value.scrollTop <= 0
|
||||
) {
|
||||
scrollSpeed.value = -scrollSpeed.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 开始滚动
|
||||
setInterval(scrollTable, scrollInterval);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100vh - 810px);
|
||||
margin: 15px 0 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #002134;
|
||||
z-index: 999;
|
||||
|
||||
th {
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td,
|
||||
th {
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: #001a27;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue