Skip to content

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

完成了部分BG-UI的Demo

parent 0132f985
Show whitespace changes
Inline Side-by-side
Showing with 369 additions and 24 deletions
.gitignore
View file @ 6ae0af1a
...@@ -21,3 +21,6 @@ dist-ssr ...@@ -21,3 +21,6 @@ dist-ssr
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
.history
index.html
View file @ 6ae0af1a
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>BG-UI Demos</title>
</head> </head>
<body>
<body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>
src/App.vue
View file @ 6ae0af1a
<script setup> <script setup>
import { reactive } from "vue" import { reactive, toRefs, onMounted } from "vue"
import cw from './components/componentWrapper.vue'
onMounted(() => {
const nav = document.querySelector('.nav')
const container = document.querySelector('.container')
const navHeight = nav.offsetHeight
container.style.marginTop = navHeight + 'px'
nav.addEventListener('click', (e) => {
const el = e.target
if (el.tagName === 'LI') {
const topDistance = document.querySelector(el.getAttribute('data-id')).offsetTop - navHeight
window.scrollTo(0, topDistance)
}
})
})
// bg-btns // bg-btns
const btns = reactive({ const btns = reactive({
options: [{ name: 'hello', value: 'hello' }, { name: 'world', value: 'world' }], options: [{ name: 'hello', value: 'hello' }, { name: 'world', value: 'world' }],
...@@ -8,25 +26,210 @@ const btns = reactive({ ...@@ -8,25 +26,210 @@ const btns = reactive({
// bg-card // bg-card
const card = reactive({ const card = reactive({
title: 'haha', title: 'title',
icon: "#bg-ic-c-s-half-star" icon: "#bg-ic-c-s-half-star"
}) })
// // bg-detail-table
const detailTable = reactive({
data: [{
title: "id",
url: 'http://127.0.0.1'
}],
layout: {
line_num: 4
}
})
const info = reactive({
// data in template would couse volar error:
// [Error - 14:18:50] Request textDocument/formatting failed.
// Message: Request textDocument/formatting failed with message: Overlapping edit
// Code: -32603
//
data: [{
full: false,
nameWidth: 120,
name: 'Name',
copy: undefined,
download: undefined,
password: undefined,
value: 'value!!!',
url: 'a url',
show: true
}, {
full: true,
nameWidth: undefined,
name: 'Name2 with full width',
copy: true,
download: undefined,
password: undefined,
value: 'value2!!!',
url: 'a url',
show: true
}]
})
const { options: btnsOption, currentValue: btnsCurrentValue } = toRefs(btns)
const { title: cardTitle, icon: cardIcon } = toRefs(card)
</script> </script>
<template> <template>
<bg-btns :options="btns.options" v-model="btns.currentValue"></bg-btns> <ul class="nav">
<li data-id="#bg-btns">bg-btns</li>
<li data-id="#bg-card">bg-card</li>
<li data-id="#bg-code-editor">bg-code-editor</li>
<li data-id="#bg-detail-table">bg-detail-table</li>
<li data-id="#bg-detail-table2">bg-detail-table2</li>
<li data-id="#bg-detail">bg-detail</li>
<li data-id="#bg-filter-date">bg-filter-date</li>
<li data-id="#bg-filter-group">bg-filter-group</li>
<li data-id="#bg-filter">bg-filter</li>
<li data-id="#bg-filtrate">bg-filtrate</li>
<li data-id="#bg-icon">bg-icon</li>
<li data-id="#bg-info">bg-info</li>
<li data-id="#bg-inner-tabs">bg-inner-tabs</li>
<li data-id="#bg-layout-card">bg-layout-card</li>
<li data-id="#bg-list">bg-list</li>
<li data-id="#bg-nav-list">bg-nav-list</li>
<li data-id="#bg-nav">bg-nav</li>
<li data-id="#bg-pagination">bg-pagination</li>
<li data-id="#bg-rich-text">bg-rich-text</li>
<li data-id="#bg-sort">bg-sort</li>
<li data-id="#bg-step">bg-step</li>
<li data-id="#bg-steps">bg-steps</li>
<li data-id="#bg-switch">bg-switch</li>
<li data-id="#bg-tab">bg-tab</li>
<li data-id="#bg-table-btn">bg-table-btn</li>
<li data-id="#bg-table-btns-more">bg-table-btns-more</li>
<li data-id="#bg-table-btns">bg-table-btns</li>
<li data-id="#bg-table-pro">bg-table-pro</li>
<li data-id="#bg-table">bg-table</li>
<li data-id="#bg-tabs">bg-tabs</li>
<li data-id="#bg-tags">bg-tags</li>
<li data-id="#bg-upload-image">bg-upload-image</li>
<li data-id="#bg-upload">bg-upload</li>
<li data-id="#bg-user-upload-image">bg-user-upload-image</li>
</ul>
<bg-card :title="card.title" :icon="card.icon"> <div class="container">
<cw title="bg-btns">
<bg-btns :options="btnsOption" v-model="btnsCurrentValue"></bg-btns>
</cw>
<cw title="bg-card">
<bg-card :title="cardTitle" :icon="cardIcon">
<!-- slot自定义card内容体 --> <!-- slot自定义card内容体 -->
<div> <div>
<div>haha</div> <div>haha</div>
<p>adsadsa</p> <p>adsadsa</p>
</div> </div>
</bg-card> </bg-card>
</cw>
<cw title="bg-code-editor"></cw>
<cw title="bg-detail-table">
<bg-detail-table :data="detailTable.data" :layout="{ line_num: 4 }"></bg-detail-table>
</cw>
<cw title="bg-detail-table2">
<bg-detail-table2 :list="[{ label: 'label', value: 'table2 demo' }]" itemWidth="200px"></bg-detail-table2>
</cw>
<cw title="bg-filter-date"></cw>
<cw title="bg-filter-group"></cw>
<cw title="bg-filter"></cw>
<cw title="bg-filtrate"></cw>
<cw title="bg-icon">
<bg-icon icon="#bg-ic-s-circle-close"></bg-icon>
<bg-icon icon="#bg-ic-c-file-doc"></bg-icon>
</cw>
<cw title="bg-info">
<bg-info :data="info.data"></bg-info>
</cw>
<cw title="bg-inner-tabs">
<bg-inner-tabs :data="['a', 'b', 'c']" :v-model="1" :default="1" :height="[36, 32, 16]"></bg-inner-tabs>
</cw>
<cw title="bg-layout-card">
<!-- <bg-layout-card title="title" width="420px" :btns="[1, 2]" @update:btn="handleUpdateBtnIndex"></bg-layout-card> -->
</cw>
<cw title="bg-list">
<bg-list :visible="true">
<template #breadcrumb>breadcrumb</template>
<template #header>list header</template>
</bg-list>
</cw>
<cw title="bg-nav-list"></cw>
<cw title="bg-nav"></cw>
<cw title="bg-pagination"></cw>
<cw title="bg-rich-text"></cw>
<cw title="bg-sort"></cw>
<cw title="bg-step"></cw>
<cw title="bg-steps"></cw>
<cw title="bg-switch"></cw>
<!-- <cw title="bg-tab">
<bg-tab label="label">
<div>content</div>
</bg-tab>
</cw> -->
<cw title="bg-table-btn"></cw>
<cw title="bg-table-btns-more"></cw>
<cw title="bg-table-btns"></cw>
<cw title="bg-table-pro"></cw>
<cw title="bg-table"></cw>
<!-- <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> -->
<cw title="bg-tags">
<bg-tags value="1, 2, 3, 4" @change="(v) => { console.log(v) }"></bg-tags>
<template #notes>该组件引用了的el-button需要调整size，以便兼容Element-Plus</template>
</cw>
<cw title="bg-upload-image"></cw>
<cw title="bg-upload"></cw>
<cw title="bg-user-upload-image"></cw>
</div>
</template> </template>
<style scoped> <style lang="scss" scoped>
.nav {
width: 100%;
padding: 12px;
display: flex;
flex-wrap: wrap;
position: fixed;
background-color: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
top: 0;
z-index: 1;
li {
list-style-type: disc;
list-style-position: inside;
margin-right: 16px;
cursor: pointer;
color: #333;
&:active {
color: #f00;
}
}
}
.container {
padding: 0 24px;
}
</style> </style>
src/assets/reset.css 0 → 100644
View file @ 6ae0af1a
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,
input,
select {
margin: 0;
}
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
img,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
src/components/componentWrapper.vue 0 → 100644
View file @ 6ae0af1a
<template>
<div :id="title" class="wrapper">
<h2>{{ title }}</h2>
<div class="content">
<slot><p class="tips">暂无示例，待补充</p></slot>
</div>
<div class="notes">
<slot name="notes"></slot>
</div>
</div>
</template>
<script setup>
const props = defineProps({
title: {
type: String,
default: 'component name'
}
})
</script>
<style lang="scss" scoped>
.wrapper {
margin-bottom: 24px;
padding: 12px 0;
border-bottom: 2px dashed #eee;
}
h2 {
height: 32px;
font-weight: bold;
display: flex;
align-items: center;
&::before {
content: "⭕️";
font-size: 16px;
margin-right: 8px;
}
}
.content {
margin-top: 12px;
padding: 12px;
border: 1px solid #ccc;
}
.tips {
color: #999;
}
.notes {
font-size: 14px;
color: #f00;
padding: 4px 0;
}
</style>
src/main.js
View file @ 6ae0af1a
import { createApp } from "vue"; import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import locale from "element-plus/lib/locale/lang/zh-cn";
import App from "./App.vue"; import App from "./App.vue";
import "@/assets/reset.css";
import bgui from "@/bg-ui"; import bgui from "@/bg-ui";
import "@/bg-ui/index.scss"; import "@/bg-ui/index.scss";
createApp(App).use(bgui).mount("#app"); createApp(App).use(ElementPlus, { locale, size: "small" }).use(bgui).mount("#app");
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