unique-interface
Version:
无UI组件库
466 lines (464 loc) • 20.7 kB
HTML
<div class="eg-test-page">
<h2>Basic</h2>
<ui-row>
<ui-col>row & col</ui-col>
<ui-col size="1">
<ui-row :gutter="30" separate justify="space-around" align="center" style="text-align: center;">
<ui-col size="1">
<div style="background-color: #ccc;">1</div>
</ui-col>
<ui-col size="2">
<div style="background-color: #ccc;">2</div>
</ui-col>
<ui-col size="5">
<div style="background-color: #ccc;">5</div>
</ui-col>
<ui-col size="6">
<div style="background-color: #ccc;">6</div>
</ui-col>
</ui-row>
</ui-col>
</ui-row>
<ui-row>
<ui-col>text</ui-col>
<ui-col size="1" class="eg-test-text">
<ui-row separate align="center">
<ui-col basis="200px">
<ui-text height="24px" ellipsis="…不可展开">Single line. more pyg more pyg more pyg.</ui-text>
</ui-col>
<ui-col basis="120px">
<ui-text height="48px" reset="-5px" placeholder-width="42px" openable>
Multi line. more pyg more pyg more pyg more pyg.
<template slot="ellipsis">…展开</template>
</ui-text>
</ui-col>
<ui-col basis="120px">
<ui-text class="eg-test-text-2">Multi line. more pyg more pyg more pyg more pyg more pyg more pyg.</ui-text>
</ui-col>
<ui-col size="1">
<ui-text class="eg-test-text-3" height="72px">Multi line. more pyg more pyg more pyg more pyg more pyg more pyg.</ui-text>
</ui-col>
<ui-col size="1">
<ui-text class="eg-test-text-4" height="72px">Multi line. more pyg more pyg more pyg.</ui-text>
</ui-col>
</ui-row>
</ui-col>
</ui-row>
<ui-row>
<ui-col>link</ui-col>
<ui-col size="1">
<a class="ui-link" href="https://www.ethercap.com" target="_blank">ui-link to https://www.ethercap.com</a>
</ui-col>
</ui-row>
<ui-row>
<ui-col>tag</ui-col>
<ui-col size="1">
<div class="ui-tag-group">
<ui-tag type="primary">primary</ui-tag>
<ui-tag type="primary" closable>closable</ui-tag>
<ui-tag type="info">info</ui-tag>
</div>
</ui-col>
</ui-row>
<ui-row>
<ui-col>dropdown</ui-col>
<ui-col size="1" class="eg-test-dropdown">
<div class="">
<ui-dropdown hover direction="left">
<ui-tag type="primary">左</ui-tag>
<div slot="dropdown">
这里先随便放一段介绍，稍微长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点。
</div>
</ui-dropdown>
<ui-dropdown hover direction="top">
<ui-tag type="primary">上</ui-tag>
<div slot="dropdown">
这里先随便放一段介绍，稍微长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点。
</div>
</ui-dropdown>
<ui-dropdown hover direction="bottom">
<ui-tag type="primary">下</ui-tag>
<div slot="dropdown">
这里先随便放一段介绍，稍微长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点。
</div>
</ui-dropdown>
<ui-dropdown hover direction="right">
<ui-tag type="primary">右</ui-tag>
<div slot="dropdown">
这里先随便放一段介绍，稍微长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点。
</div>
</ui-dropdown>
<ui-dropdown>
<ui-button type="primary">点击开关</ui-button>
<div slot="dropdown">
这里先随便放一段介绍，稍微长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点。
</div>
</ui-dropdown>
</div>
<div style="margin-top: 10px;">
<ui-dropdown hover justify="start">
<ui-tag type="primary">前对齐</ui-tag>
<div slot="dropdown">
这里先随便放一段介绍，稍微长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点。
</div>
</ui-dropdown>
<ui-dropdown hover justify="end">
<ui-tag type="primary">后对齐</ui-tag>
<div slot="dropdown">
这里先随便放一段介绍，稍微长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点。
</div>
</ui-dropdown>
<ui-dropdown hover justify="justify">
<ui-tag type="primary">前后对齐（与开关长度一致）</ui-tag>
<div slot="dropdown">
这里先随便放一段介绍，稍微长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点。
</div>
</ui-dropdown>
<ui-dropdown direction="left" hover justify="start">
<ui-tag type="primary">左，前对齐</ui-tag>
<div slot="dropdown">
这里先随便放一段介绍，稍微长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点。
</div>
</ui-dropdown>
<ui-dropdown direction="right" hover justify="end">
<ui-tag type="primary">右，后对齐</ui-tag>
<div slot="dropdown">
这里先随便放一段介绍，稍微长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点长一点。
</div>
</ui-dropdown>
</div>
</ui-col>
</ui-row>
<ui-row>
<ui-col>input</ui-col>
<ui-col size="1">
<ui-row separate>
<ui-col basis="200px">
<ui-input placeholder="test input"></ui-input>
</ui-col>
<ui-col basis="300px">
<ui-input placeholder="test prefix input">
<span slot="prefix">前</span>
<span slot="suffix">后</span>
</ui-input>
</ui-col>
<ui-col size="1">
<ui-input
v-model="input.model"
placeholder="test suggestions"
:suggestions="inputC.suggestions">
</ui-input>
</ui-col>
</ui-row>
</ui-col>
</ui-row>
<ui-row>
<ui-col>button</ui-col>
<ui-col size="1" class="eg-test-button">
<div>
<ui-button type="default">default 默认</ui-button>
<ui-button type="primary">primary 主要</ui-button>
<ui-button type="primary" disabled>primary.disabled 禁止</ui-button>
<ui-button type="default" round>round normal 圆角</ui-button>
</div>
<div>
<ui-button type="default" size="sm">default sm</ui-button>
<ui-button type="primary" size="sm">primary sm</ui-button>
<ui-button type="default" size="sm" round>default sm</ui-button>
<ui-button type="primary" size="sm" round>primary sm</ui-button>
</div>
<div>
<ui-button type="default" size="xs">default xs</ui-button>
<ui-button type="primary" size="xs">primary xs</ui-button>
<ui-button type="default" size="xs" round>default xs</ui-button>
<ui-button type="primary" size="xs" round>primary xs</ui-button>
</div>
<div class="ui-button-group">
<ui-button type="default">default</ui-button>
<ui-button type="default">default</ui-button>
<ui-button type="primary">primary</ui-button>
<ui-button type="primary">primary</ui-button>
</div>
</ui-col>
</ui-row>
<h2>Form</h2>
<ui-row>
<ui-col>form & form-item</ui-col>
<ui-col size="1" class="eg-test-form">
<ui-form :model="form.model" :errors="form.errors" @submit.prevent="setFormError">
<ui-form-item label="form-item" prop="a">
<ui-input placeholder="test input a"></ui-input>
</ui-form-item>
<ui-form-item label="required" prop="b" required>
<ui-input placeholder="test input b"></ui-input>
</ui-form-item>
<ui-form-item label="mixed" prop="c">
<ui-row align="flex-start" separate>
<ui-col>
<ui-input placeholder="input"></ui-input>
</ui-col>
<ui-col>
<ui-radio-group v-model="form.model.radio1">
<ui-radio label="a">radio group</ui-radio>
<ui-radio label="b">type normal</ui-radio>
</ui-radio-group>
</ui-col>
<ui-col>
<ui-radio-group type="button" v-model="form.model.radio2">
<ui-radio label="a">radio group</ui-radio>
<ui-radio label="b">type button</ui-radio>
</ui-radio-group>
</ui-col>
</ui-row>
</ui-form-item>
<div class="ui-form-footer">
<ui-button type="default" size="sm" round>取消</ui-button>
<ui-button type="primary" size="sm" button-type="submit" round>提交</ui-button>
</div>
</ui-form>
</ui-col>
</ui-row>
<ui-row>
<ui-col>radio</ui-col>
<ui-col size="1">
<ui-radio-group v-model="radio.model">
<ui-radio v-for="i in 4" :key="i" :label="+i">radio {{ i }}</ui-radio>
</ui-radio-group>
</ui-col>
</ui-row>
<ui-row>
<ui-col>radio-button</ui-col>
<ui-col size="1">
<ui-radio-group type="button" v-model="radio.model">
<ui-radio v-for="i in 4" :key="i" :label="+i">radio {{ i }}</ui-radio>
</ui-radio-group>
</ui-col>
</ui-row>
<ui-row>
<ui-col>checkbox</ui-col>
<ui-col size="1">
<ui-checkbox-group v-model="checkbox.model">
<ui-checkbox v-for="i in 4" :key="i" :label="+i">checkbox {{ i }}</ui-checkbox>
</ui-checkbox-group>
</ui-col>
</ui-row>
<ui-row>
<ui-col>checkbox-button</ui-col>
<ui-col size="1">
<ui-checkbox-group type="button" v-model="checkbox.model">
<ui-checkbox v-for="i in 4" :key="i" :label="+i">checkbox {{ i }}</ui-checkbox>
</ui-checkbox-group>
</ui-col>
</ui-row>
<ui-row>
<ui-col>select (select2)</ui-col>
<ui-col size="1">
<!-- <ui-select
v-model="select.model1"
:loading="formInfo.aggTagInfo.loading"
:init-options="map.aggTagIdsMap"
@query-change="searchAggTag"
@select="function(value, title){ $set(map.aggTagIdsMap, value, title); }"
placeholder="这是一个多选 select 组件"
multiple> -->
<ui-row separate>
<ui-col size="1">
<ui-select
v-model="select.model1"
placeholder="单选 select">
<ui-option
v-for="i in 10"
:key="i"
:value="i"
:title="'单选 option ' + i">
</ui-option>
</ui-select>
</ui-col>
<ui-col size="1">
<ui-select
v-model="select.model2"
placeholder="多选 dropdown"
dropdown
multiple>
<ui-option
v-for="i in 10"
:key="i"
:value="i"
:title="'多选 option ' + i">
</ui-option>
</ui-select>
</ui-col>
<ui-col size="2">
<!-- @select="function(value, title){ $set(map.aggTagIdsMap, value, title); }" -->
<ui-select
v-model="select.model3"
:loading="select.loading3"
:init-options="select.map3"
@query-change="selectFilter"
placeholder="初始值+搜索+隐藏已选"
multiple>
<ui-option
v-for="i in select.option3computed"
v-if="!~select.model3.indexOf(i)"
:key="i"
:value="i"
:title="'option ' + i">
</ui-option>
</ui-select>
</ui-col>
</ui-row>
</ui-col>
</ui-row>
<ui-row>
<ui-col>upload</ui-col>
<ui-col size="1">
<!-- <ui-upload
v-model="form.attach"
accept="application/pdf"
:auto-upload="false"
@select-files="uploadAttach"> -->
<ui-upload
accept="application/pdf"
@select-files="">
<template slot-scope="scope">
<i class="uicon uicon-add">+</i>
{{ '上传文件仅支持PDF格式' }}
</template>
</ui-upload>
</ui-col>
</ui-row>
<h2>Info</h2>
<ui-row>
<ui-col>step</ui-col>
<ui-col size="1">
<ui-steps :active="2" basis="160px">
<ui-step>Ruby</ui-step>
<ui-step>Weiss</ui-step>
<ui-step>Blake</ui-step>
<ui-step>Yang</ui-step>
</ui-steps>
</ui-col>
</ui-row>
<ui-row>
<ui-col>modal</ui-col>
<ui-col size="1">
<ui-button type="primary" @click="modal.open1 = true">打开 modal</ui-button>
</ui-col>
</ui-row>
<ui-row>
<ui-col>popper</ui-col>
<ui-col size="1">
<ui-input v-model="popper.model1" placeholder="popper 内容" style="width: 240px;"></ui-input>
<ui-button type="primary" @click="$popper(popper.model1)">popper！</ui-button>
</ui-col>
</ui-row>
<ui-row>
<ui-col>msgbox</ui-col>
<ui-col size="1">
<ui-button type="default" @click="msgboxAlert">alert</ui-button>
<ui-button type="default" @click="msgboxConfirm">confirm</ui-button>
<span>全部的 msgbox 功能暂时懒得写了，反正目前只用 alert confirm</span>
</ui-col>
</ui-row>
<h2>Navigation</h2>
<ui-row>
<ui-col>pagination</ui-col>
<ui-col size="1">
<ui-pagination :page="3" :total="200" :limit="10" @change="pageChange" style="outline: 1px solid #bdf; outline-offset: 5px;"></ui-pagination>
</ui-col>
</ui-row>
<ui-row>
<ui-col>menu</ui-col>
<ui-col size="1">
<ui-row separate>
<ui-col style="width: 200px;">
<ui-menu active="weiss" style="outline: 1px solid #bdf; outline-offset: 5px;">
<ui-menu-item
index="ruby"
icon="eg-icon eg-icon-ruby">
Ruby
</ui-menu-item>
<ui-menu-item
index="weiss"
icon="eg-icon eg-icon-weiss">
Weiss
</ui-menu-item>
<ui-submenu index="blake" icon="eg-icon eg-icon-blake">
<template slot="title">Blake</template>
<ui-menu-item index="blake-1">Blake 1</ui-menu-item>
<ui-menu-item index="blake-2">Blake 2</ui-menu-item>
</ui-submenu>
<ui-submenu index="yang" icon="eg-icon eg-icon-yang">
<template slot="title">Yang</template>
<i
slot="angle"
slot-scope="props"
class="eg-icon eg-icon-unfold"
style="color: #aaa;"></i>
<ui-menu-item index="yang-1" icon="eg-icon">Yang 1</ui-menu-item>
<ui-menu-item index="yang-2" icon="eg-icon">Yang 2</ui-menu-item>
</ui-submenu>
</ui-menu>
</ui-col>
<ui-col>
menu 暂时只有纵向，and dom结构设计不太完美，等后续更新
</ui-col>
</ui-row>
</ui-col>
</ui-row>
<ui-row>
<ui-col>tab</ui-col>
<ui-col size="1">
<ui-tabs :value="tabs.active" @change="tab => tabs.active = tab" style="outline: 1px solid #bdf; outline-offset: 5px;">
<ui-tab value="eg-tab-ruby">Ruby</ui-tab>
<ui-tab value="eg-tab-weiss">Weiss</ui-tab>
<ui-tab value="eg-tab-blake">Blake</ui-tab>
<ui-tab value="eg-tab-yang">Yang</ui-tab>
</ui-tabs>
</ui-col>
</ui-row>
<ui-row>
<ui-col>breadcrumb</ui-col>
<ui-col size="1">
<ui-breadcrumb>
<ui-breadcrumb-item awake>
<a>项目管理</a>
</ui-breadcrumb-item>
<ui-breadcrumb-item>查看</ui-breadcrumb-item>
</ui-breadcrumb>
</ui-col>
</ui-row>
<div style="padding-top: 300px; text-align: center;">留白</div>
<ui-modal
width="480px"
:visible.sync="modal.open1"
:to-body="true"
:show-close="true"
:backdrop-close="true"
@open=""
@close="modal.select1 = []">
<template slot="header">
modal header
</template>
<template>
<div>
modal body
</div>
<ui-select
v-model="modal.select1"
placeholder="多选 dropdown"
multiple>
<ui-option
v-for="i in 10"
:key="i"
:value="i"
:title="'多选 option ' + i">
</ui-option>
</ui-select>
</template>
<template slot="footer">
<ui-button type="default" @click="modal.open1 = false">取消</ui-button>
<ui-button type="primary">确定</ui-button>
</template>
</ui-modal>
</div>