vdashboard v0.0.24

vdashboard

基于Vue3、TypeScript、Vite、Rollup创建的UI框架

起步

• 安装最新版本 npm install vdashboard@latest
• 全局引用

  import vdashboard from 'vdashboard';
  // 引用样式
  import 'vdashboard/dist/vdashboard.umd.css';
  app.use(vdashboard);

• 按需引用

  import {bling} from 'vadashboard';
  // 全局引用
  app.component(bling.name,bling);
  
  // 或者在页面中引用
  {
      components{
          'v-bling':bling
      }
  }

组件

上传组件 v-upload

• 配置跨域 vite.config.ts

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:11225',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

• 示例代码

<template>
    <div>
        <div class="upload">
            <img v-if="preview.previewUrl" :src="preview.previewUrl" @click="del" alt="" />
            <v-upload v-else :changeCallback="upload">上传文件</v-upload>
            <p class="button" v-show="preview.previewUrl" @click="submit">
                上传<span v-show="per > 0"> ({{ per.toFixed(0) }}%)</span>
            </p>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { IRequestConfig, IRequestFile, toast, vutil } from 'vdashboard';
export default defineComponent({
    components: {
        toast
    },
    setup(props, context) {
        const preview = ref(<IRequestFile>{});
        const per = ref(0);
        const upload = (fs: File[]) => {
            const res = vutil.Request.imgPreview(fs);
            preview.value = res[0];
            per.value = 0.00001;
        };
        const del = () => {
            preview.value = <IRequestFile>{};
        };
        const submit = async () => {
            per.value = 0.00001;
            if (preview.value.file) {
                const data = new FormData();
                data.append('file', preview.value.file, preview.value.name);
                await vutil.Request.submit(<IRequestConfig>{
                    url: '/api/upload',
                    method: 'POST',
                    data: data,
                    progress: (percent: number) => {
                        per.value = percent * 100;
                    }
                })
                    .then((data) => {
                        console.log(data);
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        };
        return {
            upload,
            preview,
            del,
            submit,
            per
        };
    }
});
</script>

<style lang="less" scoped>
div {
    padding: 10px;
    border: solid 5px #ccc;
    .upload {
        margin: 10px 0;
        width: 200px;
        height: 200px;
        text-align: center;
        position: relative;
        overflow: hidden;
        img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            max-width: 100%;
            max-height: 100%;
            &:hover {
                border: dotted 3px #f00;
            }
        }
        &:hover {
            border: solid 5px #000;
        }
        p.button {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.74);
            color: #fff;
            padding: 10px 0;
            margin: 0;
            cursor: pointer;
            &:hover {
                color: aquamarine;
            }
        }
    }
}
</style>

<v-upload ref="fss" :multiple="true" :changeCallback="callback" :isAppend="isAppend">上传</v-upload>

菜单组件 v-tree

<v-tree ref="vtree" :data="menu" :pid="0" :config="{ selectMenuID: 0, selectLinkID: 0, enableAccordion: true }"></v-tree>

弹窗插件 pop

按钮组件 v-btn

单选框 v-radio

复选框 v-checkbox