简易

与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念。

反馈

通过界面样式和交互动效让用户可以清晰的感知自己的操作。

效率

界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

平台库

# 安装
npm i as-worktable-ui -S

# 完整引入
import Vue from 'vue';
import App from './App.vue';
import AsWorktableUI from "as-worktable-ui";// 引入平台库
Vue.use(AsWorktableUI);// 使用平台库
new Vue({
  el: '#app',
  render: h => h(App)
});

#或按模块引入
import Vue from 'vue';
import App from './App.vue';
import {
  AsWorkflows,
  AsReagents,
  AsWorktables,
} from 'as-worktable-ui';
Vue.use(AsWorkflows);// 使用流程板
Vue.use(AsReagents);// 使用试剂板
Vue.use(AsWorktables);// 使用平台板
new Vue({
  el: '#app',
  render: h => h(App)
});

#或按需引入
import Vue from 'vue';
import App from './App.vue';
import {
  AsWorkflowPlate96Hole,
  AsReagentPlate48Hole
} from 'as-worktable-ui';
Vue.use(AsWorkflowPlate96Hole);
Vue.use(AsReagentPlate48Hole);
new Vue({
  el: '#app',
  render: h => h(App)
});

组件库

# 安装
npm i as-ui -S

# 完整引入
import Vue from 'vue';
import App from './App.vue';
import "as-ui/lib/style/index.css";// 引入样式文件
import AsUI from "as-ui";// 引入组件库
Vue.use(AsUI);// 使用组件库
new Vue({
  el: '#app',
  render: h => h(App)
});

#或按需引入
import Vue from 'vue';
import App from './App.vue';
import {
  AsButton,
} from 'as-ui';
Vue.use(AsButton);
new Vue({
  el: '#app',
  render: h => h(App)
});

插件库

# 安装
npm i as-common-plugins -S

# 完整引入
import Vue from 'vue';
import App from './App.vue';
import AsCommonPlugins from "as-common-plugins";// 引入插件库
Vue.use(AsCommonPlugins);//使用插件库
new Vue({
  el: '#app',
  render: h => h(App)
});

#或按模块引入
import Vue from 'vue';
import App from './App.vue';
import {
  AsDirectives,
  AsTools,
  AsFilters,
} from "as-common-plugins";
Vue.use(AsDirectives);// 使用指令
Vue.use(AsTools);// 使用工具类
Vue.use(AsFilters);// 使用过滤器
new Vue({
  el: '#app',
  render: h => h(App)
});

#或按需引入
import Vue from 'vue';
import App from './App.vue';
import {
    AsNumberFormatter,
} from 'as-common-plugins';
Vue.use(AsNumberFormatter);
new Vue({
  el: '#app',
  render: h => h(App)
});

动画库

# 安装
npm i as-animation-ui -S

# 完整引入
import Vue from 'vue';
import App from './App.vue';
import AsAnimationUI from "as-animation-ui";// 引入动画库
Vue.use(AsAnimationUI);//使用动画库
new Vue({
  el: '#app',
  render: h => h(App)
});

#或按需引入
import Vue from 'vue';
import App from './App.vue';
import {
    AsProgressiveImage,
} from 'as-animation-ui';
Vue.use(AsProgressiveImage);//渐进式图片
new Vue({
  el: '#app',
  render: h => h(App)
});

注意

使用平台库前,应该确保板位组件放置在一个有宽度的容器中(如div)。