Skip to content

B
bg-ui-demos
Commit 8b7c482f authored by 白舜's avatar 白舜 🎱
Browse files
Options

调整prettier并格式化代码

parent 5115759d
Hide whitespace changes
Inline Side-by-side
Showing with 572 additions and 487 deletions
.eslintignore
View file @ 8b7c482f
......@@ -4,3 +4,6 @@ env.d.ts
pnpm-lock.yaml
*.md
iconfont.js
dist
.DS_Store
.history
.eslintrc.js
View file @ 8b7c482f
......@@ -47,10 +47,7 @@ module.exports = {
node: true,
},
parser: "vue-eslint-parser",
extends: [
"plugin:vue/vue3-recommended",
"eslint:recommended",
],
extends: ["plugin:vue/vue3-recommended", "eslint:recommended"],
parserOptions: {
ecmaVersion: 2021,
},
......
.prettierignore
View file @ 8b7c482f
......@@ -3,3 +3,8 @@ dist
pnpm-lock.yaml
auto-imports.d.ts
components.d.ts
env.d.ts
*.md
iconfont.js
.DS_Store
.history
.prettierrc
View file @ 8b7c482f
{
"$schema": "http://json.schemastore.org/prettierrc",
"semi": true,
"singleQuote": false
"singleQuote": false,
"bracketSameLine": true
}
.vscode/settings.json
View file @ 8b7c482f
{
"eslint.validate": [
"vue",
"javascript",
"javascriptreact"
],
"eslint.validate": ["vue", "javascript", "javascriptreact"],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": [
"source.formatDocument",
"source.fixAll.eslint"
],
"editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"],
"editor.formatOnSave": false,
"files.eol": "\n",
"path-intellisense.mappings": {
"@": "${workspaceFolder}/src"
},
"volar.codeLens.pugTools": false,
"typescript.preferences.useAliasesForRenames": false,
"liveServer.settings.root": "/dist",
"prettier.printWidth": 120
}
}
index.html
View file @ 8b7c482f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BG-UI Demos</title>
</head>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BG-UI Demos</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
package.json
View file @ 8b7c482f
......@@ -2,13 +2,12 @@
"name": "my-vue-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint --ext .js,vue --ignore-pattern '!.*ignore' .",
"lint:fix": "pnpm lint --fix"
"lint:fix": "eslint --fix && prettier --config .prettierrc --write --write ."
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.10",
......@@ -27,6 +26,7 @@
"eslint": "^8.34.0",
"eslint-define-config": "^1.15.0",
"eslint-plugin-vue": "^9.9.0",
"prettier": "2.8.4",
"sass": "^1.58.2",
"vite": "^4.1.1"
}
......
src/App.vue
View file @ 8b7c482f
......@@ -11,7 +11,9 @@ onMounted(() => {
nav.addEventListener("click", (e) => {
const el = e.target;
if (el.tagName === "LI") {
const topDistance = document.querySelector(el.getAttribute("data-id")).offsetTop - navHeight;
const topDistance =
document.querySelector(el.getAttribute("data-id")).offsetTop -
navHeight;
window.scrollTo(0, topDistance);
}
});
......@@ -141,7 +143,9 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
</cw>
<cw title="bg-detail-table2">
<bg-detail-table2 :list="[{ label: 'label', value: 'table2 demo' }]" item-width="200px" />
<bg-detail-table2
:list="[{ label: 'label', value: 'table2 demo' }]"
item-width="200px" />
</cw>
<cw title="bg-filter-date" />
......@@ -180,27 +184,27 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
<cw title="bg-steps" />
<cw title="bg-switch" />
<!-- <cw title="bg-tab">
<bg-tab label="label">
<div>content</div>
</bg-tab>
</cw> -->
<bg-tab label="label">
<div>content</div>
</bg-tab>
</cw> -->
<cw title="bg-table-btn" />
<cw title="bg-table-btns-more" />
<cw title="bg-table-btns" />
<cw title="bg-table-pro" />
<cw title="bg-table" />
<!-- <cw title="bg-tabs">
<bg-tabs>
<div>a</div>
<div>b</div>
<div>c</div>
<template #actions>
<div>a action</div>
<div>b action</div>
<div>c action</div>
</template>
</bg-tabs>
</cw> -->
<bg-tabs>
<div>a</div>
<div>b</div>
<div>c</div>
<template #actions>
<div>a action</div>
<div>b action</div>
<div>c action</div>
</template>
</bg-tabs>
</cw> -->
<cw title="bg-tags">
<bg-tags
value="1, 2, 3, 4"
......@@ -209,11 +213,17 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
console.log(v);
}
" />
<template #notes>该组件引用了的el-button需要调整size，以便兼容Element-Plus</template>
<template #notes>
该组件引用了的el-button需要调整size，以便兼容Element-Plus
</template>
</cw>
<cw title="bg-upload-image" />
<cw title="bg-upload">
<!-- <bg-upload :data="upload.data"></bg-upload> -->
<bg-upload
:data="{
directory: 'file',
uniqueCode: false,
}" />
</cw>
<cw title="bg-user-upload-image" />
</div>
......
src/assets/reset.css
View file @ 8b7c482f
......@@ -50,7 +50,9 @@ html {
box-sizing: border-box;
}
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: inherit;
}
......
src/bg-ui/bg-btns.vue
View file @ 8b7c482f
......@@ -15,20 +15,20 @@
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs } from "vue";
import { reactive, ref, onBeforeMount, toRefs } from "vue";
const props = defineProps({
modelValue: {
type: [String, Number],
default: 0
default: 0,
},
options: {
type: Array,
default: () => [],
}
},
});
const emit = defineEmits(["update:modelValue"]);
const selectBtn = ({value})=>{
const selectBtn = ({ value }) => {
emit("update:modelValue", value);
};
</script>
src/bg-ui/bg-card.vue
View file @ 8b7c482f
......@@ -25,7 +25,7 @@ const props = defineProps({
type: String,
default: "",
},
subTitle:{
subTitle: {
type: String,
default: "",
},
......@@ -33,26 +33,26 @@ const props = defineProps({
type: String,
default: "",
},
easyIcon:{
type:Boolean,
default:false,
}
easyIcon: {
type: Boolean,
default: false,
},
});
</script>
<style scoped>
.easy-icon{
.easy-icon {
width: 4px;
height: 14px;
background-color: #3759be;
border-radius: 2px;
height: 14px;
background-color: #3759be;
border-radius: 2px;
margin-right: 8px;
}
.subtitle-text{
.subtitle-text {
font-size: 14px;
color: #909bb6;
color: #909bb6;
font-weight: 400;
line-height: 5px;
margin-top: 4px;
}
</style>
\ No newline at end of file
</style>
src/bg-ui/bg-code-editor.vue
View file @ 8b7c482f
......@@ -2,18 +2,18 @@
<VAceEditor
v-model:value="states.content"
class="vue-ace-editor"
:class="{'vue-ace-editor-disable':props.disabled}"
:lang="props.lang"
:class="{ 'vue-ace-editor-disable': props.disabled }"
:lang="props.lang"
:theme="props.theme"
:options="{
:options="{
useWorker: true,
readOnly: props.disabled,
wrap: true
wrap: true,
}"
@input="codeChange" />
</template>
<script setup>
import { reactive, toRefs, watch,onMounted } from "vue";
import { reactive, toRefs, watch, onMounted } from "vue";
import { VAceEditor } from "vue3-ace-editor";
import ace from "ace-builds";
import modeJsonUrl from "ace-builds/src-noconflict/mode-json?url";
......@@ -36,30 +36,28 @@ ace.config.setModuleUrl("ace/mode/base", workerBaseUrl);
ace.config.setModuleUrl("ace/mode/json_worker", workerJsonUrl);
ace.config.setModuleUrl("ace/mode/javascript_worker", workerJavascriptUrl);
ace.config.setModuleUrl("ace/mode/html_worker", workerHtmlUrl);
const props = defineProps(
{
modelValue: {
type:String,
default:"",
},
disabled:{
type:Boolean,
default:false
},
// lang:{
// type:String,
// default:"json"
// },
// theme:{
// type:String,
// default:"themeChromeUrl"
// },
width:{
type:String,
default:"100%"
},
}
);
const props = defineProps({
modelValue: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
// lang:{
// type:String,
// default:"json"
// },
// theme:{
// type:String,
// default:"themeChromeUrl"
// },
width: {
type: String,
default: "100%",
},
});
const emit = defineEmits(["update:modelValue"]);
// watch(
// props.modelValue,
......@@ -81,27 +79,26 @@ const states = reactive({
// }
// )
const codeChange = ()=>{
const codeChange = () => {
emit("update:modelValue", states.content);
};
onMounted(() => {
let obj = "";
// console.log(typeof JSON.parse(this.datas));
try {
if (typeof JSON.parse(props.modelValue) == "object") {
obj = JSON.stringify(JSON.parse(props.modelValue), null, "\t");
}else{
obj = props.modelValue;
}
} catch (e) {
// console.log(typeof JSON.parse(this.datas));
try {
if (typeof JSON.parse(props.modelValue) == "object") {
obj = JSON.stringify(JSON.parse(props.modelValue), null, "\t");
} else {
obj = props.modelValue;
}
} catch (e) {
obj = props.modelValue;
}
states.content = obj;
});
const {content} = toRefs(states);
const { content } = toRefs(states);
</script>
<style scoped>
......@@ -115,49 +112,49 @@ const {content} = toRefs(states);
border-radius: 4px;
overflow: hidden;
}
.vue-ace-editor :deep() .ace_scrollbar-v{
width: 0px!important;
.vue-ace-editor :deep() .ace_scrollbar-v {
width: 0px !important;
}
.vue-ace-editor :deep() .ace_gutter{
.vue-ace-editor :deep() .ace_gutter {
font-size: 14px;
color: #ffffff;
color: #ffffff;
background-color: #262626;
}
.vue-ace-editor :deep() .ace_gutter-cell{
.vue-ace-editor :deep() .ace_gutter-cell {
line-height: 22px;
background-color: #262626;
}
.vue-ace-editor :deep() .ace_print-margin{
.vue-ace-editor :deep() .ace_print-margin {
width: 0;
}
.vue-ace-editor :deep() .ace_scroller{
.vue-ace-editor :deep() .ace_scroller {
background-color: #1a1a1a;
color: #fff;
caret-color:#fff;
right: 0!important;
caret-color: #fff;
right: 0 !important;
}
/* 光标颜色 */
.vue-ace-editor :deep() .ace_cursor{
.vue-ace-editor :deep() .ace_cursor {
color: #fff;
}
.vue-ace-editor-disable :deep() .ace_scrollbar-v{
width: 6px!important;
.vue-ace-editor-disable :deep() .ace_scrollbar-v {
width: 6px !important;
}
.vue-ace-editor-disable :deep() .ace_gutter{
.vue-ace-editor-disable :deep() .ace_gutter {
background-color: #202531;
}
.vue-ace-editor-disable :deep() .ace_gutter-cell{
.vue-ace-editor-disable :deep() .ace_gutter-cell {
background-color: #202531;
}
.vue-ace-editor-disable :deep() .ace_scroller{
.vue-ace-editor-disable :deep() .ace_scroller {
background-color: #fff;
color: #202531;
}
/* 光标颜色 */
.vue-ace-editor-disable :deep() .ace_cursor{
.vue-ace-editor-disable :deep() .ace_cursor {
color: #000;
}
</style>
src/bg-ui/bg-detail-table.vue
View file @ 8b7c482f
......@@ -18,13 +18,17 @@
v-if="!item.urls"
:title="item.info"
:style="item.url ? { color: '#515fe7', cursor: 'pointer' } : ''"
@click="down_file(item.url)">{{ item.info }}</span>
@click="down_file(item.url)"
>{{ item.info }}</span
>
<span v-else :title="item.info">
<span
v-for="(it, idx) in item.urls"
:key="'urls' + idx"
style="color: #515fe7; cursor: pointer"
@click="down_file(it)">{{ helper.downloadFileFormatNew(it) }}、</span>
@click="down_file(it)"
>{{ helper.downloadFileFormatNew(it) }}、</span
>
</span>
</template>
</div>
......
src/bg-ui/bg-detail-table2.vue
View file @ 8b7c482f
......@@ -7,7 +7,9 @@
:style="{ width: item.width }">
<p v-if="!item.slot" class="detail-module">
<span :style="{ width: itemWidth }">{{ item.label }}</span>
<span v-if="!item.childSlot" class="text_clip" :title="item.value">{{ item.value }}</span>
<span v-if="!item.childSlot" class="text_clip" :title="item.value">{{
item.value
}}</span>
<span v-else>
<slot :name="item.childSlot" :data="item"></slot>
</span>
......
src/bg-ui/bg-detail.vue
View file @ 8b7c482f
......@@ -59,7 +59,17 @@
</template>
<script setup>
import { ref, provide,reactive,onBeforeMount,onMounted,onUnmounted,nextTick,toRefs,useSlots } from "vue";
import {
ref,
provide,
reactive,
onBeforeMount,
onMounted,
onUnmounted,
nextTick,
toRefs,
useSlots,
} from "vue";
const slots = useSlots();
......@@ -67,63 +77,64 @@ const activeName = ref("");
const bgDetail = ref(null);
provide("getActiveName",activeName.value);
provide("getActiveName", activeName.value);
provide("getIsTabs",false);
provide("getIsTabs", false);
const showFixedBars = ref(false);
const state = reactive({
scrollCallback:null
scrollCallback: null,
});
const calcTabs=()=> {
let tabSlots = [];
if (slots.default()) {
tabSlots = slots.default()
.filter(
(vnode) =>
vnode.tag &&
vnode.componentOptions &&
vnode.componentOptions.Ctor.options.name === "BgTab"
)
.map((vnode) => vnode.componentOptions.propsData);
}
return tabSlots;
};
const changeActiveName=({ name }, index)=> {
let targetEl = bgDetail.value.querySelectorAll(".bg-tab")[index];
let targetCtx = document.querySelector(".bg-main");
targetCtx.scrollTop = targetEl && targetEl.offsetTop - 165;
activeName.value = name;
state.scrollCallback = () => {
activeName.value = name;
};
};
const scrollAction=()=> {
let targetCtx = document.querySelector(".bg-main");
let ctxScrollTop = targetCtx.scrollTop || 0;
let targetEls = bgDetail.value.querySelectorAll(".bg-tab");
let tabs = calcTabs();
for (let i = 0; i < targetEls.length; i++) {
let targetEl = targetEls[i];
if (ctxScrollTop >= targetEl.offsetTop) {
activeName.value = tabs[i].name;
}
}
showFixedBars.value = ctxScrollTop > 222;
state.scrollCallback && state.scrollCallback();
state.scrollCallback = null;
};
onMounted(()=>{
const calcTabs = () => {
let tabSlots = [];
if (slots.default()) {
tabSlots = slots
.default()
.filter(
(vnode) =>
vnode.tag &&
vnode.componentOptions &&
vnode.componentOptions.Ctor.options.name === "BgTab"
)
.map((vnode) => vnode.componentOptions.propsData);
}
return tabSlots;
};
const changeActiveName = ({ name }, index) => {
let targetEl = bgDetail.value.querySelectorAll(".bg-tab")[index];
let targetCtx = document.querySelector(".bg-main");
targetCtx.scrollTop = targetEl && targetEl.offsetTop - 165;
activeName.value = name;
state.scrollCallback = () => {
activeName.value = name;
};
};
const scrollAction = () => {
let targetCtx = document.querySelector(".bg-main");
let ctxScrollTop = targetCtx.scrollTop || 0;
let targetEls = bgDetail.value.querySelectorAll(".bg-tab");
let tabs = calcTabs();
for (let i = 0; i < targetEls.length; i++) {
let targetEl = targetEls[i];
if (ctxScrollTop >= targetEl.offsetTop) {
activeName.value = tabs[i].name;
}
}
showFixedBars.value = ctxScrollTop > 222;
state.scrollCallback && state.scrollCallback();
state.scrollCallback = null;
};
onMounted(() => {
nextTick().then(() => {
let tabs = calcTabs();
activeName.value = tabs[0] && tabs[0].name;
......@@ -132,7 +143,7 @@ onMounted(()=>{
});
});
onUnmounted(()=>{
onUnmounted(() => {
window.removeEventListener("scroll", scrollAction, true);
});
</script>
src/bg-ui/bg-filter-group.vue
View file @ 8b7c482f
......@@ -20,18 +20,26 @@
@clear="search">
<template #append>
<div class="append-btn" @click="search">
<bg-icon style="font-size: 12px; color: #404a62" icon="#bg-ic-search" />
<bg-icon
style="font-size: 12px; color: #404a62"
icon="#bg-ic-search" />
</div>
</template>
</el-input>
<div v-if="$slots.filter_group" class="more-btn" :class="showFlag ? 'more-btn1' : ''">
<div
v-if="$slots.filter_group"
class="more-btn"
:class="showFlag ? 'more-btn1' : ''">
<el-button type="default" class="more-filter" @click="moreFilter">
高级搜索
<bg-icon
v-if="!showFlag"
style="font-size: 8px; color: #404a62; margin-left: 8px"
icon="#bg-ic-arrow-down" />
<bg-icon v-else style="font-size: 8px; color: #404a62; margin-left: 8px" icon="#bg-ic-arrow-up" />
<bg-icon
v-else
style="font-size: 8px; color: #404a62; margin-left: 8px"
icon="#bg-ic-arrow-up" />
</el-button>
</div>
</div>
......@@ -43,7 +51,15 @@
</template>
<script setup>
import { computed, onMounted, reactive, toRefs, watch, ref, nextTick } from "vue";
import {
computed,
onMounted,
reactive,
toRefs,
watch,
ref,
nextTick,
} from "vue";
const state = reactive({
showFlag: false,
......
src/bg-ui/bg-filter.vue
View file @ 8b7c482f
......@@ -15,75 +15,75 @@
</template>
<script setup>
import {computed} from "vue";
import { computed } from "vue";
const props = defineProps({
modelValue: {
type: [Number, String],
default: "",
},
isCalc:{
type:Boolean,
default:false,
},
name: {
type: String,
default: "",
},
options: {
type: Array,
default: () => [],
},
optionName: {
type: String,
default: "name",
},
optionValue: {
type: String,
default: "value",
},
multiple: {
type: Boolean,
default: false,
},
isCalc: {
type: Boolean,
default: false,
},
name: {
type: String,
default: "",
},
options: {
type: Array,
default: () => [],
},
optionName: {
type: String,
default: "name",
},
optionValue: {
type: String,
default: "value",
},
multiple: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:modelValue"]);
const fullOptions = computed(()=> {
return [
{
name: "全部",
value: "",
},
...props.options.map((item) => {
return {
name: item[props.optionName],
value: item[props.optionValue] + "",
sub_cate: item.sub_cate ? item.sub_cate : "",
};
}),
];
});
const selection = computed(()=> {
let value = props.modelValue + "";
const fullOptions = computed(() => {
return [
{
name: "全部",
value: "",
},
...props.options.map((item) => {
return {
name: item[props.optionName],
value: item[props.optionValue] + "",
sub_cate: item.sub_cate ? item.sub_cate : "",
};
}),
];
});
const selection = computed(() => {
let value = props.modelValue + "";
return value.split(",");
});
return value.split(",");
});
const selectAction = ({ value, name, sub_cate })=> {
if (value && props.multiple) {
let selection = [...props.selection].filter((v) => v !== "");
let index = selection.findIndex((v) => v === value);
const selectAction = ({ value, name, sub_cate }) => {
if (value && props.multiple) {
let selection = [...props.selection].filter((v) => v !== "");
let index = selection.findIndex((v) => v === value);
if (index > -1) {
selection.splice(index, 1);
} else {
selection.push(value);
}
if (index > -1) {
selection.splice(index, 1);
} else {
selection.push(value);
}
emit("update:modelValue", selection.join(","));
} else {
emit("update:modelValue", value, name, sub_cate ? sub_cate : "");
}
};
emit("update:modelValue", selection.join(","));
} else {
emit("update:modelValue", value, name, sub_cate ? sub_cate : "");
}
};
</script>
src/bg-ui/bg-info.vue
View file @ 8b7c482f
......@@ -7,26 +7,46 @@
:style="{
width: item.full ? `100%` : `calc(100% / ${col})`,
}">
<span :style="{ width: item.nameWidth ? item.nameWidth + 'px' : '50%' }">
<span
:style="{ width: item.nameWidth ? item.nameWidth + 'px' : '50%' }">
{{ item.name }}
</span>
<span :style="{ width: item.nameWidth ? `calc( 100% - ${item.nameWidth + 'px'})` : '50%' }">
<span
:style="{
width: item.nameWidth
? `calc( 100% - ${item.nameWidth + 'px'})`
: '50%',
}">
<span
style="display: inline-block; width: 100%; white-space: normal; word-break: break-all"
style="
display: inline-block;
width: 100%;
white-space: normal;
word-break: break-all;
"
:style="{
width: item.copy ? 'calc(100% - 36px)' : item.download || item.password ? 'calc(100% - 22px)' : '100%',
width: item.copy
? 'calc(100% - 36px)'
: item.download || item.password
? 'calc(100% - 22px)'
: '100%',
color: item.download ? '#3759be' : '#404a62',
}">
<span
v-if="item.callback"
class="can_click_text"
style="text-decoration:underline"
@click.stop="item.callback && item.callback()">{{
item.value
}}</span>
style="text-decoration: underline"
@click.stop="item.callback && item.callback()"
>{{ item.value }}</span
>
<span v-else>{{ item.value }}</span>
</span>
<a v-if="item.copy" class="copy-btn" @click="copyText(item.value, $event)"> 复制 </a>
<a
v-if="item.copy"
class="copy-btn"
@click="copyText(item.value, $event)">
复制
</a>
<bg-icon
v-if="item.download"
class="copy-btn"
......
src/bg-ui/bg-switch.vue
View file @ 8b7c482f
......@@ -59,7 +59,9 @@ const now_style = computed(() => {
};
});
const now_label_style = computed(() => {
return now_index.value == 0 ? { left: circle_height.value + gap.value + 5 + "px" } : { left: "10px" };
return now_index.value == 0
? { left: circle_height.value + gap.value + 5 + "px" }
: { left: "10px" };
});
const now_circle_style = computed(() => {
return now_index.value == 0
......@@ -93,5 +95,4 @@ onMounted(() => {
circle_height.value = circle.value.offsetHeight;
gap.value = (box_height.value - circle_height.value - 4) / 2;
});
</script>
src/bg-ui/bg-tab.vue
View file @ 8b7c482f
......@@ -14,15 +14,12 @@ import { reactive, ref, onBeforeMount, toRefs, computed, inject } from "vue";
const getActiveName = inject(
"activeName",
()=>{
() => {
return "";
},
false
);
const getIsTabs = inject(
"isTabs",
false
);
const getIsTabs = inject("isTabs", false);
const props = defineProps({
label: {
......
src/bg-ui/bg-table-btns.vue
View file @ 8b7c482f
......@@ -14,7 +14,7 @@
@mouseenter="showMoreBtns"
@mouseleave="hideMoreBtns">
<!-- <i class="el-icon-more" /> -->
<bg-icon style="font-size: 12px; color: #2b4695;" icon="#bg-ic-s-more" />
<bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
<bg-table-btns-more
v-if="showMore"
:operations="otherOperations"
......
src/bg-ui/bg-table-btns2.vue
View file @ 8b7c482f
......@@ -20,7 +20,9 @@
v-for="(item, index) in state.lastChildren"
:key="'as' + index"
:class="item.disabled ? 'disabled' : ''"
@click="action(item.onClick, item.disabled)">{{ item.name }}</span>
@click="action(item.onClick, item.disabled)"
>{{ item.name }}</span
>
</div>
</teleport>
</span>
......@@ -28,7 +30,18 @@
</template>
<script setup>
import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, h, render, nextTick } from "vue";
import {
reactive,
ref,
onBeforeMount,
onMounted,
toRefs,
provide,
useSlots,
h,
render,
nextTick,
} from "vue";
const slots = useSlots();
const props = defineProps({
......@@ -107,7 +120,11 @@ const dealData = () => {
}
for (let index = 0; index < children.length; index++) {
const e = children[index];
if (index + 1 > props.limit && e.tagName == "A" && e.className.indexOf("bg-table-btn") !== -1) {
if (
index + 1 > props.limit &&
e.tagName == "A" &&
e.className.indexOf("bg-table-btn") !== -1
) {
e.style.display = "none";
e.style.width = "0px";
state.lastChildren[index - props.limit + 1].name = e.innerText;
......
src/bg-ui/bg-tabs.vue
View file @ 8b7c482f
......@@ -37,7 +37,9 @@ const props = defineProps({
},
});
const getActiveName = provide("activeName", ()=>{return props.modelValue;});
const getActiveName = provide("activeName", () => {
return props.modelValue;
});
const getIsTabs = provide("isTabs", true);
const emit = defineEmits(["update:modelValue"]);
......
src/bg-ui/bg-tags.vue
View file @ 8b7c482f
......@@ -14,7 +14,9 @@
v-if="!showInput"
type="primary"
size="small"
@click="showInput = true"> 新增 </el-button>
@click="showInput = true">
新增
</el-button>
<el-input v-else v-model.trim="newTag" @blur="addTag" />
</li>
</ul>
......
src/bg-ui/bg-user-upload-image.vue
View file @ 8b7c482f
......@@ -25,7 +25,15 @@
</template>
<script setup>
import { computed, watch, onMounted, reactive, ref, nextTick, toRefs } from "vue";
import {
computed,
watch,
onMounted,
reactive,
ref,
nextTick,
toRefs,
} from "vue";
import { ElMessage } from "element-plus";
const props = defineProps({
......
src/bg-ui/debounce.js
View file @ 8b7c482f
......@@ -7,76 +7,81 @@
* @param {this} ctx this 的指向
*/
const debounce = (func, time, type, ctx) => {
var timer, lastCall, rtn;
// 防抖函数
if (type === "debounce") {
rtn = (...params) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(ctx, params);
}, time);
};
} else if (type === "throttle") {
// 节流函数
rtn = (...params) => {
const now = new Date().getTime();
if (now - lastCall < time && lastCall) return;
lastCall = now;
const debounce = (func, time, type, ctx) => {
var timer, lastCall, rtn;
// 防抖函数
if (type === "debounce") {
rtn = (...params) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(ctx, params);
};
} else {
// 立即执行的防抖函数
rtn = (...params) => {
if (timer) clearTimeout(timer);
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, time);
if (callNow) func.apply(ctx, params);
};
}
return rtn;
};
}, time);
};
} else if (type === "throttle") {
// 节流函数
rtn = (...params) => {
const now = new Date().getTime();
if (now - lastCall < time && lastCall) return;
lastCall = now;
func.apply(ctx, params);
};
} else {
// 立即执行的防抖函数
rtn = (...params) => {
if (timer) clearTimeout(timer);
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, time);
if (callNow) func.apply(ctx, params);
};
}
return rtn;
};
export default {
name: "Debounce",
abstract: true,
props: {
time: {
type: Number,
default: 1000,
},
events: {
type: String,
default: "click", // 默认点击事件
},
type: {
type: String,
default: "throttle", // 默认节流
},
export default {
name: "Debounce",
abstract: true,
props: {
time: {
type: Number,
default: 1000,
},
created() {
this.eventKeys = this.events.split(","); // 分隔事件
this.originMap = {}; // 储存事件，用于重新render时与子事件的对比
this.debouncedMap = {}; // 储存防抖节流事件
events: {
type: String,
default: "click", // 默认点击事件
},
render() {
try {
const vnode = this.$slots.default[0];
this.eventKeys.forEach(key => {
const target = vnode.data.on[key];
if (target === this.originMap[key] && this.debouncedMap[key]) {
vnode.data.on[key] = this.debouncedMap[key];
} else if (target) {
this.originMap[key] = target;
this.debouncedMap[key] = debounce(target, this.time, this.type, vnode);
vnode.data.on[key] = this.debouncedMap[key]; // 重写子组件的事件
}
});
return vnode;
} catch (error) {
console.error(error);
}
type: {
type: String,
default: "throttle", // 默认节流
},
};
},
created() {
this.eventKeys = this.events.split(","); // 分隔事件
this.originMap = {}; // 储存事件，用于重新render时与子事件的对比
this.debouncedMap = {}; // 储存防抖节流事件
},
render() {
try {
const vnode = this.$slots.default[0];
this.eventKeys.forEach((key) => {
const target = vnode.data.on[key];
if (target === this.originMap[key] && this.debouncedMap[key]) {
vnode.data.on[key] = this.debouncedMap[key];
} else if (target) {
this.originMap[key] = target;
this.debouncedMap[key] = debounce(
target,
this.time,
this.type,
vnode
);
vnode.data.on[key] = this.debouncedMap[key]; // 重写子组件的事件
}
});
return vnode;
} catch (error) {
console.error(error);
}
},
};
src/bg-ui/hook/mixin-select-table.js
View file @ 8b7c482f
import { reactive, toRefs,useAttrs } from "vue";
export function selectTableMixin(){
import { reactive, toRefs, useAttrs } from "vue";
export function selectTableMixin() {
const state = reactive({
nowSelectData:[],
allSelectData:{}
nowSelectData: [],
allSelectData: {},
});
const attrs = useAttrs();
// const nowSelectData = reactive([])
// const allSelectData = reactive({})
// const nowSelectData = reactive([])
// const allSelectData = reactive({})
const selectData = (val)=>{
console.log(val);
state.nowSelectData = val;
console.log("allSelectData");
console.log(state.allSelectData);
console.log(Object.keys(state.allSelectData).length);
};
const selectData = (val) => {
console.log(val);
state.nowSelectData = val;
console.log("allSelectData");
console.log(state.allSelectData);
console.log(Object.keys(state.allSelectData).length);
};
const initSelectTableData = (data)=>{
return new Promise((reslove,reject)=>{
data.forEach(e => {
if(state.allSelectData[e[attrs.rowKey||"id"]]){
delete state.allSelectData[e[attrs.rowKey||"id"]];
state.nowSelectData.push(e);
}
});
console.log(state.nowSelectData);
reslove(state.nowSelectData);
});
};
const initSelectTableData = (data) => {
return new Promise((reslove, reject) => {
data.forEach((e) => {
if (state.allSelectData[e[attrs.rowKey || "id"]]) {
delete state.allSelectData[e[attrs.rowKey || "id"]];
state.nowSelectData.push(e);
}
});
const runPage=()=>{//翻页数据推进
state.nowSelectData.forEach(e => {
state.allSelectData[e[attrs.rowKey||"id"]] = e;
});
state.nowSelectData = [];
};
console.log(state.nowSelectData);
reslove(state.nowSelectData);
});
};
const clearTable=()=>{//清除选中数据,在页面状态更新时使用
state.allSelectData={};
state.nowSelectData=[];
clearSelection();
};
const runPage = () => {
//翻页数据推进
state.nowSelectData.forEach((e) => {
state.allSelectData[e[attrs.rowKey || "id"]] = e;
});
state.nowSelectData = [];
};
const dealSelectData=()=>{//最后提交处理数据
state.nowSelectData.forEach(e => {
state.allSelectData[e[attrs.rowKey||"id"]] = e;
});
return state.allSelectData;
};
const clearTable = () => {
//清除选中数据,在页面状态更新时使用
state.allSelectData = {};
state.nowSelectData = [];
clearSelection();
};
const { nowSelectData, allSelectData } = toRefs(state);
const dealSelectData = () => {
//最后提交处理数据
state.nowSelectData.forEach((e) => {
state.allSelectData[e[attrs.rowKey || "id"]] = e;
});
return state.allSelectData;
};
return{
nowSelectData,
allSelectData,
selectData,
initSelectTableData,
runPage,
clearTable,
dealSelectData
};
const { nowSelectData, allSelectData } = toRefs(state);
return {
nowSelectData,
allSelectData,
selectData,
initSelectTableData,
runPage,
clearTable,
dealSelectData,
};
}
// export const selectTableMixin = {
......@@ -88,7 +90,7 @@ return{
// this.nowSelectData.push(e)
// }
// });
// console.log(this.nowSelectData);
// if(this.nowSelectData.length){
// setTimeout(()=>{
......@@ -115,4 +117,4 @@ return{
// return this.allSelectData
// }
// },
// }
\ No newline at end of file
// }
src/bg-ui/index.js
View file @ 8b7c482f
/**
* 全局组件
*/
import BgIcon from "./bg-icon.vue";
import BgNav from "./bg-nav.vue";
import BgList from "./bg-list.vue";
import BgDetail from "./bg-detail.vue";
import BgFiltrate from "./bg-filtrate.vue";
import BgTable from "./bg-table.vue";
import BgTablePro from "./bg-table-pro.vue";
import BgTableBtn from "./bg-table-btn.vue";
import BgTabs from "./bg-tabs.vue";
import BgTab from "./bg-tab.vue";
import BgLayoutCard from "./bg-layout-card.vue";
import BgCard from "./bg-card.vue";
import BgInfo from "./bg-info.vue";
import BgBtns from "./bg-btns.vue";
import BgUpload from "./bg-upload.vue";
import BgUploadImage from "./bg-upload-image.vue";
import BgTags from "./bg-tags.vue";
import BgSwitch from "./bg-switch.vue";
import BgRichText from "./bg-rich-text.vue";
import BgCodeEditor from "./bg-code-editor.vue";
import BgFilter from "./bg-filter.vue";
import BgSort from "./bg-sort.vue";
import BgFilterDate from "./bg-filter-date.vue";
import bgUserUploadImage from "./bg-user-upload-image.vue";
import bgDetailTable from "./bg-detail-table.vue";
import bgDetailTable2 from "./bg-detail-table2.vue";
import debounce from "./debounce";
import BgPagination from "./bg-pagination.vue";
import BgInnerTabs from "./bg-inner-tabs.vue";
import BgFilterGroup from "./bg-filter-group.vue";
import BgTableBtns from "./bg-table-btns.vue";
import BgTableBtns2 from "./bg-table-btns2.vue";
import BgIcon from "./bg-icon.vue";
import BgNav from "./bg-nav.vue";
import BgList from "./bg-list.vue";
import BgDetail from "./bg-detail.vue";
import BgFiltrate from "./bg-filtrate.vue";
import BgTable from "./bg-table.vue";
import BgTablePro from "./bg-table-pro.vue";
import BgTableBtn from "./bg-table-btn.vue";
import BgTabs from "./bg-tabs.vue";
import BgTab from "./bg-tab.vue";
import BgLayoutCard from "./bg-layout-card.vue";
import BgCard from "./bg-card.vue";
import BgInfo from "./bg-info.vue";
import BgBtns from "./bg-btns.vue";
import BgUpload from "./bg-upload.vue";
import BgUploadImage from "./bg-upload-image.vue";
import BgTags from "./bg-tags.vue";
import BgSwitch from "./bg-switch.vue";
import BgRichText from "./bg-rich-text.vue";
import BgCodeEditor from "./bg-code-editor.vue";
import BgFilter from "./bg-filter.vue";
import BgSort from "./bg-sort.vue";
import BgFilterDate from "./bg-filter-date.vue";
import bgUserUploadImage from "./bg-user-upload-image.vue";
import bgDetailTable from "./bg-detail-table.vue";
import bgDetailTable2 from "./bg-detail-table2.vue";
import debounce from "./debounce";
import BgPagination from "./bg-pagination.vue";
import BgInnerTabs from "./bg-inner-tabs.vue";
import BgFilterGroup from "./bg-filter-group.vue";
import BgTableBtns from "./bg-table-btns.vue";
import BgTableBtns2 from "./bg-table-btns2.vue";
const components = {
BgIcon,//字体图标
BgIcon, //字体图标
BgNav, // 左侧导航
BgList, // 列表页布局
BgDetail, // 详情页布局
......@@ -54,18 +54,18 @@ const components = {
BgTags, // 标签
BgSwitch, // 开关
BgRichText, // 富文本
BgCodeEditor,//代码输入
BgCodeEditor, //代码输入
BgFilter, // 首页筛选
BgSort, // 首页排序
BgFilterDate,
bgUserUploadImage,
bgDetailTable,//详情展示组件1
bgDetailTable2,//详情展示组件2
debounce,//防抖组件
BgPagination,// 分页组件
BgInnerTabs,//内部tab
BgFilterGroup,//列表按钮及筛选
BgTableBtns,// 表格按钮组
bgDetailTable, //详情展示组件1
bgDetailTable2, //详情展示组件2
debounce, //防抖组件
BgPagination, // 分页组件
BgInnerTabs, //内部tab
BgFilterGroup, //列表按钮及筛选
BgTableBtns, // 表格按钮组
BgTableBtns2,
};
......
src/bg-ui/index.scss
View file @ 8b7c482f
......@@ -393,7 +393,7 @@ a {
// line-height: 24px;
color: #909bb6;
&:hover{
&:hover {
color: #5170cd;
cursor: pointer;
}
......@@ -630,7 +630,7 @@ a {
display: none;
}
.el-table__empty-block {
height: 500px!important;
height: 500px !important;
.empty_container {
height: 500px;
padding-top: 247px;
......@@ -647,7 +647,7 @@ a {
}
th,
td {
padding: 12px 0!important;
padding: 12px 0 !important;
> .cell {
padding: 0 10px !important;
color: #404a62;
......@@ -684,7 +684,6 @@ a {
}
table {
th {
border-color: #b0bee8;
background-color: #dfe5f6;
......@@ -693,10 +692,10 @@ a {
}
}
.stripe-row td {
background-color: #fff!important;
background-color: #fff !important;
}
.white-row td {
background-color: #f7f7f9!important;
background-color: #f7f7f9 !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: #f7f7f9;
......@@ -734,47 +733,41 @@ a {
max-width: 388px;
padding: 15px 12px;
color: #202531;
box-shadow: 0px 4px 12px 0px
rgba(18, 30, 63, 0.1);
border: solid 1px #e6e9ef;
box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
border: solid 1px #e6e9ef;
font-size: 14px;
}
}
.bg-table-pro{
.bg-table-pro {
th,
td {
> .cell {
padding: 0 10px !important;
overflow: unset;
display: flex!important;
display: flex !important;
justify-content: flex-start;
align-items: center;
}
}
.el-table-column--selection{
.el-table-column--selection {
border-left: 1px solid #e6e9ef;
> .cell {
justify-content: center
}
> .cell {
justify-content: center;
}
}
th.el-table-column--selection{
> .cell {
display: flex;
justify-content: center
}
th.el-table-column--selection {
> .cell {
display: flex;
justify-content: center;
}
}
&.el-table--border {
.el-table__header-wrapper {
table {
th {
border-color: #dadee7;
background-color: #f5f6f9;
......@@ -785,19 +778,16 @@ a {
}
.bg-table-tree {
.th,
.td {
>.cell {
> .cell {
display: flex;
justify-content: flex-start;
align-items: center;
>.el-input {
> .el-input {
flex: 1 1 auto;
}
}
}
}
......@@ -807,7 +797,7 @@ a {
color: #3759be;
cursor: pointer;
&:hover {
color: #738bd2
color: #738bd2;
}
&:active {
color: #2c4798;
......@@ -1521,7 +1511,7 @@ a {
}
> .copy-btn-dis {
color: #dce0e8;
cursor: not-allowed!important;
cursor: not-allowed !important;
&:hover {
color: #dce0e8;
}
......@@ -1850,7 +1840,6 @@ a {
}
.bg-upload-image {
.trigger-content {
> .image-trigger {
width: 144px;
......@@ -2117,12 +2106,12 @@ a {
.w-e-text-container {
border: 1px solid #dadee7 !important;
width: 100%;
z-index: 1!important;
z-index: 1 !important;
}
.w-e-toolbar {
border-radius: 4px 4px 0 0;
z-index: 2!important;
z-index: 2 !important;
}
.w-e-text-container {
......@@ -2393,9 +2382,8 @@ a {
.bg-card {
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15);
border-radius: 6px;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
margin-bottom: 16px;
.card-header {
......@@ -2428,7 +2416,7 @@ a {
}
}
.title-text{
.title-text {
font-size: 18px;
line-height: 18px;
color: #202531;
......@@ -2482,7 +2470,7 @@ a {
padding: 10px 15px;
line-height: 1;
&:active,
&:hover{
&:hover {
background-color: #fff;
color: #3759be;
}
......
src/bg-ui/utils/index.js
View file @ 8b7c482f
var downloadFileFormatNew = function(fileUrl) {
/*
var downloadFileFormatNew = function (fileUrl) {
/*
input: /apaas/common/docs/image/images/1234_qq234ewr123.png
output: 1234.png
*/
if (fileUrl != "") {
var temp = fileUrl.split("/")[fileUrl.split("/").length-1];
var name = temp.split("_")[0];
var type = temp.split("_")[temp.split("_").length-1].split(".")[1];
if(temp.indexOf("_")==-1){
return name;
}else{
return name+"."+type;
}
if (fileUrl != "") {
var temp = fileUrl.split("/")[fileUrl.split("/").length - 1];
var name = temp.split("_")[0];
var type = temp.split("_")[temp.split("_").length - 1].split(".")[1];
if (temp.indexOf("_") == -1) {
return name;
} else {
return "";
return name + "." + type;
}
} else {
return "";
}
};
export default {
downloadFileFormatNew
};
\ No newline at end of file
downloadFileFormatNew,
};
src/components/componentWrapper.vue
View file @ 8b7c482f
......@@ -14,8 +14,8 @@
const props = defineProps({
title: {
type: String,
default: "component name"
}
default: "component name",
},
});
</script>
......
src/main.js
View file @ 8b7c482f
......@@ -9,4 +9,7 @@ import "@/assets/reset.css";
import bgui from "@/bg-ui";
import "@/bg-ui/index.scss";
createApp(App).use(ElementPlus, { locale, size: "small" }).use(bgui).mount("#app");
createApp(App)
.use(ElementPlus, { locale, size: "small" })
.use(bgui)
.mount("#app");
yarn.lock
View file @ 8b7c482f
......@@ -1582,6 +1582,11 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prettier@2.8.4:
version "2.8.4"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.4.tgz#34dd2595629bfbb79d344ac4a91ff948694463c3"
integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==
prismjs@^1.23.0:
version "1.29.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment