JX3BOX UI

通用 UI 组件

Step.1 Install

npm install @jx3box/jx3box-common-ui

Step.2 Import

基础布局(标准三栏布局,公共头底,侧边栏)

import JX3BOX_UI from "@jx3box/jx3box-common-ui";
Vue.use(JX3BOX_UI);

指定模块

import xx from "@jx3box/jx3box-common-ui/src/xx.vue";
Vue.component(xx.name, xx);

新增公共组件流程

打开 index.js,添加对应模块

import Fav from "./src/Fav.vue";
const components = {
    ...Fav,
};

打开 src/App.vue,引入模块作为测试预览

import Fav from "./Fav.vue";
components: {
    ...
    Fav
},

在 src/下新建$module.vue 参考其他模块

在页面远程引入公共头

头部引入文件

<script src="https://oss.jx3box.com/static/jx3box-lib/vue.js"></script>
<script src="https://oss.jx3box.com/static/jx3box-common-ui/newheader.umd.min.js"></script>
<link rel="stylesheet" href="https://oss.jx3box.com/static/jx3box-common-ui/newheader.css"/>

需要插入的位置

<div id="app">
    <newheader></newheader>
</div>

初始化脚本

<script>
new Vue({
    components: {
        newheader: newheader,
    },
}).$mount("#app");
</script>

管理组件

触发位置

右上角发布按钮旁，点击弹出右侧抽屉（只有在存在?pid查询参数时且 group>60时显示）
文件位置：/src/admin

组件功能

1.推荐角标：无，新手易用newbie，进阶推荐advanced，编辑精选recommend（数组格式,支持多选）
2.高亮，开调色盘组件
3.头条图：上传组件
4.置顶：开关组件
5.类型变更：post_types
6.作者变更:post_author
7.状态变更：(单选)公开，草稿，删除
8.提交按钮，取消按钮

内部逻辑与接口

1.文章pid的获取方式

import {getRewrite} from '@jx3box/jx3box-common/js/utils
let pid = getRwrite('pid')

2.文章目前各项状态获取方式（仅当开启面板后才加载）

import {__server} from '@jx3box/jx3box-common/js/jx3box.json'
let url = __server + 'post/query' + '?id=xxx
```
可获取当前文章的各项数值，对应如上

3.上传组件接口
````javascript
import {__server} from '@jx3box/jx3box-common/js/jx3box.json'
let url = __server + 'upload'
```

4.提交接口
````javascript
import {__server} from '@jx3box/jx3box-common/js/jx3box.json'
let url = __server + 'post/setting'
```
提交内容
```javascript
{
ID:xx,
color:xx,
mark:['newbie'],
post_author:8,
post_banner:'https://oss.jx3box.com/xxx.png',
post_status:'draft',
sticky:0 / Date.now()
}
```

# 组件功能前端的利用与展示

1.角标在列表页的标题后，以及文章页的标题后，注意标题过长的截断问题
2.高亮仅体现在列表页的标题颜色
3.头条图体现在列表页左侧的缩略图，有则显示，没有则显示默认规则的图（showBanner与oss规则）
4.置顶将图标fill成#c00，标题前增加（置顶）两个字
5.状态变更由接口实现

jx3box / jx3box-common-ui Goto Github PK

jx3box-common-ui's Introduction

jx3box-common-ui's People

Contributors

Stargazers

Watchers

Forkers

jx3box-common-ui's Issues

评分组件

拓展菜单样式

自动签到

个人侧边栏信息

触发位置

组件功能

内部逻辑与接口

dashboard

目录组件

基本约束

管理评分

玩家打赏

审批说明

组件开发

增加contributors

单作者兼容

联合创作者展示

栏目实装

背景

语言

打赏与关注（1楼醉栩）

导航优化

Recommend Projects

Recommend Topics

Recommend Org

Jobs