❤
npm
Sign UpSign In

uih-fenix-ui

1.1.5 • Public • Published

[TOC]

第一章 UIH-Fenix-UI 使用介绍

一、介绍

  UIH-Fenix-UI 是联影智能根据多种组件的实际使用场景，基于ant-design构建的组件样式库。已发布于npm 网站,可以使用常规安装包方式进行安装。我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

二、安装步骤

先安装依赖的ant-design组件库：

npm install ant-design-vue@3.2.9

or 

yarn add ant-design-vue@3.2.9

再安装本组件库：

npm install uih-fenix-ui

or 

yarn add uih-fenix-ui

最后全局应用样式即可：

import { createApp } from 'vue'

import App from './App.vue'

import Antd  from 'ant-design-vue' //引入依赖的ant-design-vue库

import 'uih-fenix-ui/dist/uih-fenix-ui.css' //引入本组件库样式

createApp(App).use(Antd).mount('#app') //记得应用ant-design-vue

三、使用提示

  本样式库只是基于ant-design库修改组件样式，除了第二章涉及的使用规则，其他使用均与ant-design一致，使用者需要了解ant-design的用法，请参考ant-design官网文档https://www.antdv.com/components/overview-cn/。

  另外目前控件涉及的图标都采用图片的方式显示，样例代码中涉及的图片暂时需要使用者将组件包的图片拿出来放在项目里才可正常显示。后续升级中我们会将涉及的图片都转为iconfont来解决此问题，请耐心等待后续升级。

第二章 组件使用说明

一、按钮

按钮和按钮组都有禁用状态:加上属性disabled即可;

1.正常按钮

1)单个按钮

有普通状态、primary状态

组件样例图：

普通：

<a-button class="u-btn">按钮名称</a-button>

使用说明：

a-button标签加上类名u-btn，其他使用参考ant-design官方文档

primary状态: 加属性 type="primary";

2)按钮组

只有影像区状态

组件样例图：

<a-button-group class="u-btn-group image-area">
  <a-button>按钮名称1</a-button>
  <a-button>按钮名称2</a-button>
</a-button-group>

使用说明：

a-button-group标签同时加上类名u-btn-group  image-area，其他使用参考ant-design官方文档

2.不可取消按钮

1)不可取消按钮（单/多个）

有普通状态、影像区状态、小尺寸

组件样例图：

普通：

<a-radio-group class="u-radio-btn-group">
  <a-radio-button>
    <div class="collspan-select">按钮名称1</div>
  </a-radio-button>
  <a-radio-button>
    <div class="collspan-select">按钮名称2</div>
  </a-radio-button>
</a-radio-group>

使用说明：

a-radio-group标签加上类名u-radio-btn-group，a-radio-button包裹着一个类名为collspan-select的div放置按钮名称，其他使用参考ant-design官方文档

影像区状态、小尺寸 参照最后的-各控件状态-小节

3.可取消按钮

组件样例图：

1)单个可取消按钮

<a-checkbox class="u-cancel-btn">
  <div class="u-cancel-btn-container">按钮名称</div>
</a-checkbox>

使用说明：

u-cancel-btn与u-cancel-btn-container是必须的，其他使用参考ant-design官方文档

2)影像区可取消按钮组

！注意必须加image-area，只支持影像区！

<div class="u-cancel-btn-group image-area">
    <a-checkbox class="u-cancel-btn">
        <div class="u-cancel-btn-container">按钮名称1</div>
    </a-checkbox>
    <a-checkbox class="u-cancel-btn">
        <div class="u-cancel-btn-container">按钮名称2</div>
    </a-checkbox>
</div>

使用说明：

u-cancel-btn-group image-area的div、类名u-cancel-btn与u-cancel-btn-container的div是必须的，其他使用参考ant-design官方文档

二、选择框

选择框和选择框组都有禁用状态:加上属性disabled即可;

1.可取消单选框（单个多选框）

有普通状态、影像区状态

组件样例图：

普通：

<a-checkbox class="u-checkbox">选项名称</a-checkbox>

使用说明：

类名u-checkbox是必须的，其他使用参考ant-design官方文档

影像区状态 参照最后的-各控件状态-小节

2.不可取消单选框（单个单选框）

有普通状态、影像区状态

组件样例图：

普通：

<a-radio class="u-radio">单选</a-radio>

使用说明：

类名u-radio是必须的，其他使用参考ant-design官方文档

影像区状态 参照最后的-各控件状态-小节

3.单选框组

有普通状态、影像区状态

组件样例图：

普通：

<a-radio-group class="u-radio-group" :value="1">
  <a-radio :value="1">A</a-radio>
  <a-radio :value="2">B</a-radio>
</a-radio-group>

使用说明：

类名u-radio-group是必须的，其他使用参考ant-design官方文档

影像区状态 参照最后的-各控件状态-小节

三、消息框

1.消息框

组件样例图：

控件代码如下：

<!-- 触发消息框的按钮 -->
<a-button class="u-btn" @click="showModal">单按钮模态框</a-button>
<!-- 消息框 -->
<a-modal v-model:visible="visibleFlag" :width="480" class="u-message-box" title="信息" @ok="handleOk">
    <!-- 消息框头部 -->
    <template #closeIcon>
        <span class="iconfont icon-patientTAB_closebeifen-copy"></span>
    </template>
    <!-- 消息框内容-一整个自定义就好 -->
    <div class="content flex-row">
        <div class="flex-row content-img"><img src="@/assets/images/CDIC/message_warning.svg" alt="" /></div>
        <div class="content-text flex-row">
            Do you want to finish it automatically or manually?
        </div>
    </div>
    <!-- 消息框尾部 -->
    <template #footer>
        <!-- 单按钮 one 双按钮 two 三按钮 three-->
        <div class="footer-container one flex-row">
            <a-button class="u-btn" @click="handleOk">OK</a-button>
        </div>
        <!-- 例如 双按钮 two -->
        <!-- 
            <div class="footer-container two flex-row">
                <a-button class="u-btn" @click="handleOk">OK</a-button>
                <a-button class="u-btn" @click="handleOk">OK</a-button>
            </div> 
        -->
    </template>
</a-modal>
</div>

所涉及变量与事件需要自定义

<script>
export default class commonPage extends Vue {
    visibleFlag = false; //控制消息框的显隐

    showModal() {
        this.visibleFlag = true;
    }

    handleOk() {
        this.visibleFlag = false;
    }
}
</script>

使用说明：

触发按钮自己定义，触发的消息框中类名u-message-box是必须的，其他使用参考ant-design官方文档

四、滑条

组件样例图：

1.普通滑条

控件代码如下：

<div class="u-slider">
  <!-- 自选-滑条说明 -->
  <div class="loading-text flex-row"><span>loading… </span><span>30%</span></div>
  <a-slider v-model:value="value1" />
</div>

所涉及变量需要自定义

<script>
export default class commonPage extends Vue {
    value1 = 39; //进度值
}
</script>

使用说明：

类名u-slider是必须的，其他使用参考ant-design官方文档

2.尾部带图标的滑条

控件代码如下：

<div class="u-slider">
  <!-- 自选-滑条说明 -->
  <div class="loading-text flex-row"><span>loading… </span><span>39%</span></div>
  <!-- 滑条区域 -->
  <div class="slider-area flex-row">
    <!-- 滑条 -->
    <div class="fill-flex"><a-slider v-model:value="30" /></div>
    <!-- 图标 -->
    <div class="button flex-row"><span class="iconfont icon-a-iconloadingstopbeifen9"></span></div>
    <div class="button flex-row"><span class="iconfont icon-a-iconloadingstophover"></span></div>
  </div>
</div>

使用说明：

类名u-slider是必须的，slider-area的div包裹滑条和按钮图标两部分都是必须的，其他使用参考ant-design官方文档

五、下拉框

下拉框都有禁用状态:加上属性disabled即可;

1.下拉选择框

有普通状态、影像区状态、小尺寸

组件样例图：

普通：

<a-select class="u-select">
  <!-- 下拉按钮 -->
  <template #suffixIcon>
    <img src="../../assets/images/CDIC/占位下拉.svg" alt=""/>
  </template>
  <!-- 选项部分 -->
  <a-select-option value="选项值1">选项名称1</a-select-option>
  <a-select-option value="选项值2">选项名称2</a-select-option>
</a-select>

使用说明：

类名u-select是必须的，其他使用参考ant-design官方文档

影像区状态、小尺寸 参照最后的-各控件状态-小节

2.可输入下拉选择框

组件样例图：

控件代码如下：

<div class="u-select-input">
 <!-- 输入框 -->
 <a-input class="u-input u-input-sel"/>
 <a-dropdown-button class="u-dropdown-btn" :trigger="['click']">
    <!-- 下拉按钮 -->
   <template #icon><img src="../../assets/images/CDIC/占位下拉.svg" alt=""/></template>
   <template #overlay>
    <!-- 选项部分 -->
     <a-menu class="u-dropdown-menu">
       <a-menu-item key="1">Layout 0000012</a-menu-item>
       <a-menu-item key="2">Layout 0000012</a-menu-item>
     </a-menu>
   </template>
 </a-dropdown-button>
</div>

使用说明：

类名u-select-input是必须的；包裹输入框、下拉按钮、选项部分，其中输入框的类名u-input u-input-sel是必须的，下拉按钮的类名u-dropdown-btn是必须的，选项部分的类名u-dropdown-menu是必须的，其他使用参考ant-design官方文档

3.按钮下拉选择框

组件样例图：

控件代码如下：

<a-dropdown-button class="u-dropdown-btn-icon" :trigger="['click']">
    <!-- 图标按钮 -->
    <img src="../../assets/images/CDIC/save_result_quick.svg" alt="" />
    <!-- 下拉按钮 -->
    <template #icon><img src="../../assets/images/CDIC/占位下拉.svg" alt=""/></template>
    <!-- 选项部分 -->
    <template #overlay>
        <a-menu class="u-dropdown-menu-icon">
            <a-menu-item key="1"><img src="../../assets/images/CDIC/占位.svg" alt=""/></a-menu-item>
            <a-menu-item key="2"><img src="../../assets/images/CDIC/占位.svg" alt=""/></a-menu-item>
        </a-menu>
    </template>
</a-dropdown-button>

使用说明：

类名u-dropdown-btn-icon是必须的；包裹图标按钮、下拉按钮、选项部分，其中选项部分的类名u-dropdown-menu-icon是必须的，其他使用参考ant-design官方文档

六、输入框

1.普通输入框

有普通状态、影像区状态、小尺寸

组件样例图：

普通：

<a-input class="u-input"/>

使用说明：

类名u-input是必须的，其他使用参考ant-design官方文档

影像区状态、小尺寸 参照最后的-各控件状态-小节

2.带图标的输入框

组件样例图：

控件代码如下：

 <a-input class="u-input">
 <!-- 在a-input标签内填充下面图标代码 -->
  <template #addonBefore>
    <img src="@/assets/images/CDIC/search.svg" alt="" />
  </template>
</a-input>

使用说明：

类名u-input是必须的，填充了一个图标，其他使用参考ant-design官方文档

七、表格

1.表格

有普通状态、透明状态、4Dflow小表格

组件样例图：

控件代码如下：

  <div class="template">
  <a-table :columns="columns" class="u-table-normal" :pagination="false" :data-source="columnsData">
    <!-- 表格标题列 -->
    <template #headerCell="{ column }">
      <!-- 自定义第一格 -->
      <template v-if="column.key === 'name'">
        <span>
            Name
        </span>
      </template>
    </template>
      
    <!-- 表格体 -->
    <template #bodyCell="{ column, record }">
      <!-- 自定义样式列 -->
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <!-- 自定义-标签列 -->
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag v-for="tag in record.tags" :key="tag" :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <!-- 自定义-操作列 -->
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
          </a>
        </span>
      </template>
    </template>
  </a-table>
</div>

所涉及变量需要自定义

<script>
export default class commonPage extends Vue {
  columns = [
    {
      name: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
    },
    {
      title: 'Action',
      key: 'action',
    },
  ];

  columnsData = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];
}
</script>

使用说明：

类名u-table-normal是必须的，其他使用参考ant-design官方文档

透明状态： 将类名u-table-normal改为u-table-trans

4Dflow小表格： 在类名u-table-normal后添加flow4D

八、控制条

1.4Dflow的播放控制条

组件样例图：

控件代码如下：

<div class="u-viewer-controller">
  <div class="viewer-container flex-row">
    <!-- 播放按钮 -->
    <a-checkbox class="left-play flex-row">
      <div class="img-play-btn flex-row" @click="handlePlay">
        <img v-if="play" src="@/assets/images/CDIC/bofang2.svg" alt="" />
        <template v-else>
          <img src="@/assets/images/CDIC/bofang3.svg" alt="" />
        </template>
      </div>
    </a-checkbox>
    <!-- 滑动条 -->
    <div class="slider-container flex-row fill-flex">
      <div class="img-slider-left flex-row">
        <img src="@/assets/images/CDIC/viewer_left.svg" alt="" />
      </div>
      <a-slider class="viewer-slider fill-flex" :class="{ time: !circle }" v-model:value="sliderValue" :tooltip-visible="false" />
      <div class="img-slider-right flex-row">
        <img src="@/assets/images/CDIC/viewer_right.svg" alt="" />
      </div>
    </div>
    <!-- 速度选择 -->
    <div class="select-container">
      <a-select dropdownClassName="select-menu-controller" v-model:value="valueSelect" :bordered="false" option-label-prop="label">
        <template #suffixIcon><img src="@/assets/images/CDIC/viewer_select.svg" alt=""/></template>
        <a-select-option value="Fast" label="Fast">Fast</a-select-option>
        <a-select-option value="Med" label="Med">Medium</a-select-option>
        <a-select-option value="Slow" label="Slow">Slow</a-select-option>
      </a-select>
    </div>
    <!-- 滚条样式切换 -->
    <button class="toggle-btn flex-row" @click="handleCircle">
      <img v-if="circle" src="@/assets/images/CDIC/bofang4.svg" alt="" />
      <template v-else>
        <img src="@/assets/images/CDIC/bofang6.svg" alt="" />
      </template>
    </button>
    <!-- 保存按钮 -->
    <div class="save-btn flex-row">
      <img src="@/assets/images/CDIC/bofang5.svg" alt="" />
    </div>
  </div>
</div>

所涉及变量需要自定义

<script>
export default class commonPage extends Vue {
  // 下拉选择值
  valueSelect = "Med"
  // 滑动条的值
  sliderValue= 0
  // 是否播放
  play = false
  // 球形
  circle= true

  // 处理播放点击
  handlePlay(){
      this.play = !this.play
  }

  // 切换球形
  handleCircle() {
      // 切换图标显示
      this.circle = !this.circle
  }
}
</script>

使用说明：

类名u-viewer-controller，viewer-container是必须的，由五部分组成，每部分的的类名也是必须的，单个部分建议不要更改整体使用，其他使用参考ant-design官方文档
dropdownClassName指定的类名也是必须的

九、工具栏

1.侧边工具栏

组件样例图：

控件代码如下：

<div class="u-toolbar-col">
  <!-- 工具条部分 -->
  <div class="toolbar-topbox fill-flex flex-col">

    <!-- 普通的 -->
    <div class="toolbar-item">
      <!-- 图标按钮 -->
      <div class="toolbar-item-btn">
        <img src="@/assets/images/CDIC/联影智能_move.svg" />
      </div>
    </div>

    <!-- 被选中的 -->
    <div class="toolbar-item">
      <!-- 图标按钮 --><!-- select 为选中样式类名 -->
      <div class="toolbar-item-btn select">
        <img src="@/assets/images/CDIC/联影智能_windowing_re备份.svg" />
      </div>
    </div>

    <!-- 带拓展工具条的 -->
    <div class="toolbar-item">
      <!-- 图标按钮 -->
      <div class="toolbar-item-btn">
        <img src="@/assets/images/CDIC/联影智能_选择工具.svg" />
      </div>
      <!-- 展开部分 -->
      <a-tooltip overlayClassName="u-toolbar-tooltip" v-model:visible="visible" placement="leftTop" trigger="click" autoAdjustOverflow>
        <!-- 展开小三角 -->
        <div class="trigger-triangle" :class="{ expand }"></div>
        <!-- 展开内容 -->
        <template #title>
          <!-- 拓展工具条 -->
          <a-menu @click="handleClick()" @mouseleave="handleMouseLeave">
            <a-menu-item key="0">
              <img src="@/assets/images/CDIC/联影智能_选择工具.svg" />
            </a-menu-item>
            <a-menu-item key="1">
              <img src="@/assets/images/CDIC/联影智能_选择工具备份.svg" />
            </a-menu-item>
          </a-menu>
        </template>
      </a-tooltip>
    </div>
  </div>

  <!-- 底部钉住按钮 -->
  <div class="toolbar-bottom">
    <img v-if="sticky" @click="toggle" src="@/assets/images/CDIC/window_re3.svg" alt="" />
    <template v-else>
      <img @click="toggle" src="@/assets/images/CDIC/联影智能_windowing_re备份_4.svg" alt="" />
    </template>
  </div>
</div>

所涉及变量需要自定义

<script>
export default class commonPage extends Vue {
  // visible 手动控制 tooltip 浮层是否显示
  visible = false 
  // expand 控制是否显示图标右下角三角形
  expand = true 
  // 控制工具栏是否固定
  sticky = true 

  /**
   * 点击tooltips 浮层隐藏浮层
   */
  handleClick() {
      this.visible = false
  }

  toggle() {
      this.sticky = !this.sticky
  }

  handleMouseLeave() {
      setTimeout(() => {
          this.visible = false
      }, 300);
  }
}
</script>

使用说明：

类名u-toolbar-col是必须的，由顶部多个工具按钮与底部一个钉住按钮组成，工具按钮分为三种：普通，被选中，带拓展的。每部分的的类名也是必须的，单个部分建议不要更改整体使用，其他使用参考ant-design官方文档。
overlayClassName指定的类名也是必须的

十、菜单栏

1.右键菜单

组件样例图：

控件代码如下：

<a-dropdown :trigger="['contextmenu']" overlayClassName="u-dropmenu-right middle">
  <!-- u-med-view屏幕 限定右键菜单生效区域 -->
  <div class="u-med-view fill-flex flex-col">
    <h1 style="color: #c2c2c2">Right Click on here</h1>
  </div>
  <!-- 右键菜单 -->
  <template #overlay>
    <a-menu>
      <a-menu-item key="1">Cut
        <!-- 选中的对号标志 -->
        <template #icon>
          <img src="../../assets/images/CDIC/checkbox_icon@2x.svg" alt="" />
        </template>
      </a-menu-item>
      <a-menu-item key="2">Copy</a-menu-item>
      <a-menu-item key="3">Append</a-menu-item>
      <a-sub-menu key="4" title="Submenu">
        <!-- 子项展开标志 -->
        <template #icon>
          <img src="../../assets/images/CDIC/矩形.svg" alt="" />
        </template>
        <a-menu-item key="5">Option 5</a-menu-item>
        <a-menu-item key="6">Option 5</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </template>
</a-dropdown>

使用说明：

指定overlayClassName类名u-dropmenu-right是必须的，由右键菜单生效区域和菜单部分组成。每部分的的类名也是必须的，单个部分建议不要更改整体使用，其他使用参考ant-design官方文档。

十一、抽屉

1.抽屉

组件样例图：

控件代码如下：

<a-collapse class="u-collapse" v-model:activeKey="activeKey" :bordered="false">
  <!-- 展开小图标 -->
  <template #expandIcon>
    <img class="collspan-select-img" src="../../assets/images/CDIC/展开@2x.svg" alt="" />
  </template>
  <a-collapse-panel key="1" header="Image Layout">
    123
  </a-collapse-panel>
  <a-collapse-panel key="2" header="Virtual Contrast">
    456
  </a-collapse-panel>
  <a-collapse-panel key="3" header="Quantification">
    789
  </a-collapse-panel>
</a-collapse>

使用说明：

类名u-collapse，collspan-select-img是必须的，其他使用参考ant-design官方文档。

X.通用控件状态

1.影像区状态

将控件样式改为影像区的样式，加类名 class="image-area" ，支持的控件有： -按钮组（加在与u-btn-group同级） -不可取消按钮（加在与u-radio-btn-group同级） -可取消按钮组（加在与u-cancel-btn-group同级） -选择框（加在与u-checkbox、u-radio、u-radio-group同级） -下拉选择框（加在与u-select同级） -输入框（加在与u-select同级）

2.小尺寸

将控件样式改为小尺寸的样式，加类名 class="small" ，支持的控件有： -不可取消按钮（加在与u-radio-btn-group同级） -下拉选择框（加在与u-select同级） -输入框（加在与u-input同级）

3.禁用状态

禁用控件，加上属性disabled即可 ，支持的控件有： -按钮 -选择框 -输入框 -下拉框

Readme

Keywords

Package Sidebar

Install

npm i uih-fenix-ui

Weekly Downloads

1

Version

1.1.5

License

ISC

Unpacked Size

990 kB

Total Files

33

Last publish

Collaborators

  • damnparadox
Try on RunKit
Report malware