feat(tinyvue): [WI2028] 同步内部代码到外部，添加新特性和修改bug
Match-id-3abc3c5e6ccc2db7057e8ba5a570df4e4215493b
This commit is contained in:
OpenTiny
parent
da747cc572
commit
0702d2f827
|
|
@ -1,4 +1,16 @@
|
|||
{
|
||||
"explorer.fileNesting.enabled": true,
|
||||
"explorer.fileNesting.expand": false,
|
||||
"explorer.fileNesting.patterns": {
|
||||
"*.js": "$(capture).js.map, $(capture).*.js",
|
||||
"*.ts": "$(capture).ts.map, $(capture).*.ts",
|
||||
"*.tsx": "$(capture).tsx.map, $(capture).*.tsx",
|
||||
".gitignore": ".gitattributes",
|
||||
".eslintrc.js": ".eslintignore, .prettierignore, .prettierrc, commitlint.config.js",
|
||||
"README.md": "*.md, LICENSE",
|
||||
"tsconfig.json": "tsconfig.*.json, jsconfig.json",
|
||||
"package.json": ".npmrc, pnpm-workspace.yaml, logo.svg, lerna.json"
|
||||
},
|
||||
"editor.quickSuggestions": {
|
||||
"strings": true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export default {
|
|||
modeFn.loadPage()
|
||||
return {
|
||||
state,
|
||||
modeState,
|
||||
modeState
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<tiny-carousel height="150px" type="card">
|
||||
<tiny-carousel-item class="carousel-item-demo" v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</tiny-carousel-item>
|
||||
</tiny-carousel>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Carousel, CarouselItem } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCarousel: Carousel,
|
||||
TinyCarouselItem: CarouselItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-carousel height="150px" @change="handleChange">
|
||||
<tiny-carousel-item :class="bgColor[item - 1]" v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</tiny-carousel-item>
|
||||
</tiny-carousel>
|
||||
|
||||
<div class="carousel-tip">当前幻灯片索引：{{ curValue }}，上一张幻灯片索引：{{ preValue }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel, CarouselItem } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCarousel: Carousel,
|
||||
TinyCarouselItem: CarouselItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curValue: 0,
|
||||
preValue: 0,
|
||||
bgColor: [
|
||||
'bg-color-info-primary-subtle',
|
||||
'bg-color-success-subtle',
|
||||
'bg-color-icon-primary',
|
||||
'bg-color-warning-subtle'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(value, oldValue) {
|
||||
this.curValue = value
|
||||
this.preValue = oldValue
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.carousel-tip {
|
||||
margin: 16px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>走马灯指示器默认显示在幻灯片内容上，配置 `indicator-position` 为 outside 后，将显示在外部。<br />配置 `trigger` 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['indicator-trigger.vue']
|
||||
},
|
||||
|
|
@ -36,7 +36,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['manual-play.vue']
|
||||
},
|
||||
|
|
@ -49,7 +49,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>配置 `loop` 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['close-loop.vue']
|
||||
},
|
||||
|
|
@ -61,7 +61,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `autoplay` 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['autoplay.vue']
|
||||
},
|
||||
|
|
@ -73,7 +73,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 `interval` 属性可以自定义。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['play-interval.vue']
|
||||
},
|
||||
|
|
@ -85,7 +85,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `type` 属性为 vertical 即可实现纵向轮播。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['up-down-carousel.vue']
|
||||
},
|
||||
|
|
@ -97,7 +97,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `title` 配置显示标题，需要与 `show-title` 结合使用。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['show-title.vue']
|
||||
},
|
||||
|
|
@ -109,7 +109,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['carousel-arrow-always.vue']
|
||||
},
|
||||
|
|
@ -121,7 +121,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['carousel-arrow-hover.vue']
|
||||
},
|
||||
|
|
@ -133,7 +133,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['carousel-arrow-never.vue']
|
||||
},
|
||||
|
|
@ -146,7 +146,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`aspect-ratio` 属性可以设置轮播图的宽高比，如果设置了 height，会以 height 为主，默认值为 16:2，可以设置任意的整数宽高比例。 设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['aspect-ratio.vue']
|
||||
},
|
||||
|
|
@ -158,9 +158,33 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`indicator-style` 属性可以设置轮播图指示器样式，支持 light 与 dark 两种类型，默认为 light。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['indicator-style.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-mode',
|
||||
name: {
|
||||
'zh-CN': '卡片模式',
|
||||
'en-US': 'card mode'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 <code>type</code> 属性为 card 后，走马灯将以卡片形式进行展示。</p>',
|
||||
'en-US': '<p>After the <code>type</code> attribute is set to card, the lantern is displayed as a card.</p>'
|
||||
},
|
||||
codeFiles: ['card-mode.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'carousel-events',
|
||||
name: {
|
||||
'zh-CN': '走马灯事件',
|
||||
'en-US': 'Carousel Events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n',
|
||||
'en-US': '<p>After the <code>type</code> attribute is set to card, the lantern is displayed as a card.</p>'
|
||||
},
|
||||
codeFiles: ['carousel-events.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>- header: 头部插槽，默认显示头部，设置 :show-header="true" 时有效；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 头部插槽，默认隐藏底部，设置 :show-footer="true" 时有效；<p>',
|
||||
'<p>- header: 头部插槽，默认显示头部，设置 :show-header="true" 时有效；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 底部插槽，默认隐藏底部，设置 :show-footer="true" 时有效；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
|
||||
<tiny-drawer title="标题" :width="width" :visible="visible" @update:visible="visible = $event">
|
||||
<div style="height: 200px; text-align: center">
|
||||
<tiny-button @click="width = '600px'"> 抽屉宽度改为 700px </tiny-button>
|
||||
<tiny-button @click="width = '700px'"> 抽屉宽度改为 700px </tiny-button>
|
||||
<tiny-button @click="width = '80%'"> 抽屉宽度改为 80% </tiny-button>
|
||||
</div>
|
||||
</tiny-drawer>
|
||||
|
|
|
|||
|
|
@ -1,179 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <tiny-radio v-model="viewType" label="default">默认视图</tiny-radio> -->
|
||||
<tiny-radio v-model="viewType" label="mf">表格视图</tiny-radio>
|
||||
<tiny-radio v-model="viewType" label="card">卡片视图</tiny-radio>
|
||||
<tiny-grid :data="tableData" auto-resize :select-config="selectConfig" :view-type="viewType" :mf-show="mfShow" :card-config="cardConfig" @card-click="onCardClick" height="480">
|
||||
<template #link>
|
||||
<icon-chevron-right class="mf-table-more cursor-pointer fill-brand"></icon-chevron-right>
|
||||
</template>
|
||||
<tiny-grid-column type="selection"></tiny-grid-column>
|
||||
<tiny-grid-column type="operation" title="操作" :operation-config="operationConfig"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
|
||||
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Grid, GridColumn, Modal, Tag, Radio } from '@opentiny/vue'
|
||||
import {
|
||||
IconChevronRight,
|
||||
IconAreaChart,
|
||||
IconBarChart,
|
||||
IconDotChart,
|
||||
IconLineChart,
|
||||
IconPieChart
|
||||
} from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn,
|
||||
TinyRadio: Radio,
|
||||
IconChevronRight: IconChevronRight()
|
||||
},
|
||||
methods: {
|
||||
clickHandler(e, { row, buttonConfig }) {
|
||||
Modal.message(`点击按钮 - ${row.name} - ${buttonConfig.name}`)
|
||||
},
|
||||
onCardClick(row, e) {
|
||||
Modal.message('onCardClick')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
viewType: 'card',
|
||||
mfShow: 'card', // 可选值为list, card
|
||||
selectConfig: {
|
||||
checkMethod({ rowIndex }) {
|
||||
return rowIndex !== 5
|
||||
}
|
||||
},
|
||||
cardConfig: {
|
||||
primaryField: 'name',
|
||||
contentFields: ['area', 'address', 'introduction'],
|
||||
logoField: [
|
||||
'logo',
|
||||
{ render: ({ h, row, field, value, config }) => h('img', { class: 'w-full h-full', attrs: { src: value } }) }
|
||||
],
|
||||
tagFields: [
|
||||
'tag1',
|
||||
'tag2',
|
||||
[
|
||||
'tag3',
|
||||
{
|
||||
render: ({ h, row, field, value, config, color }) =>
|
||||
h(
|
||||
Tag,
|
||||
{
|
||||
props: { size: 'mini', type: color, customClass: 'inline-block truncate max-w-[6.25rem] h-[18px]' }
|
||||
},
|
||||
value
|
||||
)
|
||||
}
|
||||
]
|
||||
],
|
||||
tagColorFields: ['tagColor1', 'tagColor2', 'tagColor3']
|
||||
},
|
||||
operationConfig: {
|
||||
buttons: [
|
||||
{ name: '操作1', icon: IconAreaChart(), click: this.clickHandler, disabled: true },
|
||||
{ name: '操作2', icon: IconBarChart(), click: this.clickHandler, disabled: (row) => row.id === '1' },
|
||||
{ name: '操作3', icon: IconDotChart(), click: this.clickHandler, hidden: true },
|
||||
{ name: '操作4', icon: IconLineChart(), click: this.clickHandler, hidden: (row) => row.id === '2' },
|
||||
{ name: '操作5', icon: IconPieChart(), click: this.clickHandler }
|
||||
]
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司',
|
||||
area: '华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区',
|
||||
address: '福州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWWW科技有限公司',
|
||||
area: '华南区',
|
||||
address: '深圳福田区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
area: '华南区',
|
||||
address: '中山市',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB有限公司',
|
||||
area: '华北区',
|
||||
address: '梅州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技有限公司',
|
||||
area: '华南区',
|
||||
address: '韶关',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '康康物业有限公司',
|
||||
area: '华北区',
|
||||
address: '广州天河区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '如果内容超过100px',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
|
||||
url: 'webnova/static/images/1.jpg'
|
||||
url: '/static/images/1.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
url: 'webnova/static/images/1.jpg'
|
||||
url: '/static/images/1.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<template>
|
||||
<tiny-image :image-size="100" :src="url" :preview-src-list="srcList" show-index @delete="deleteHander" preview-visible></tiny-image>
|
||||
<tiny-image
|
||||
:image-size="100"
|
||||
:src="url"
|
||||
:preview-src-list="srcList"
|
||||
show-index
|
||||
@delete="deleteHander"
|
||||
preview-visible
|
||||
></tiny-image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -11,8 +18,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
url: 'webnova/static/images/1.jpg',
|
||||
srcList: ['webnova/static/images/1.jpg', 'webnova/static/images/dog2.png', 'webnova/static/images/3.jpg']
|
||||
url: '/static/images/1.jpg',
|
||||
srcList: ['/static/images/1.jpg', '/static/images/2.jpg', '/static/images/3.jpg']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
url: 'webnova/static/images/1.jpg'
|
||||
url: '/static/images/1.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<script>
|
||||
import { Progress, Button } from '@opentiny/vue'
|
||||
import { IconMinus, IconPlus } from '@opentiny/vue-icon'
|
||||
import { iconMinus, iconPlus } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -22,8 +22,8 @@ export default {
|
|||
return {
|
||||
testInside: true,
|
||||
percentage: 20,
|
||||
IconMinus: IconMinus(),
|
||||
IconPlus: IconPlus()
|
||||
IconMinus: iconMinus(),
|
||||
IconPlus: iconPlus()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<tiny-button @click="testInside = !testInside">
|
||||
{{ testInside ? '外置' : '内置' }}文字
|
||||
</tiny-button>
|
||||
<tiny-button @click="testInside = !testInside"> {{ testInside ? '外置' : '内置' }}文字 </tiny-button>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<tiny-progress class="progress" :stroke-width="24" :format="formatText" :text-inside="testInside" :percentage="percentageText"></tiny-progress>
|
||||
<tiny-progress
|
||||
class="progress"
|
||||
:stroke-width="24"
|
||||
:format="formatText"
|
||||
:text-inside="testInside"
|
||||
:percentage="percentageText"
|
||||
></tiny-progress>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`type="line"` 显示为 line 类型<p>',
|
||||
'zh-CN': '<p><code>type="line"</code>显示为 line 类型<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['progress-type.vue']
|
||||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`type="circle"` 显示为 circle 类型。`width`可以调整环形进度条画布宽度，默认值为 96px。<p>',
|
||||
'zh-CN': '<p><code>type="circle"</code>显示为 circle 类型。<code>width<code>可以调整环形进度条画布宽度，默认值为 96px。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['progress-type-circle.vue']
|
||||
|
|
@ -46,7 +46,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`size` 进度条的大小（small/medium/large）<p>',
|
||||
'zh-CN': '<p><code>size</code>进度条的大小（small/medium/large）<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['progress-size.vue']
|
||||
|
|
@ -58,7 +58,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`stroke-width`自定义进度条的宽度，单位 px<p>',
|
||||
'zh-CN': '<p><code>stroke-width<code>自定义进度条的宽度，单位 px<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['progress-width.vue']
|
||||
|
|
@ -70,7 +70,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`status` 进度条当前状态（success/exception/warning）<p>',
|
||||
'zh-CN': '<p><code>status</code>进度条当前状态（success/exception/warning）<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['progress-status.vue']
|
||||
|
|
@ -82,7 +82,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`show-text` 是否显示进度条文字内容<p>',
|
||||
'zh-CN': '<p><code>show-text</code>是否显示进度条文字内容<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['text-inside-or-no-text.vue']
|
||||
|
|
@ -94,7 +94,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `color` 设置进度条颜色。color 进度条背景色（会覆盖 status 状态颜色）<p>',
|
||||
'zh-CN': '<p>通过 <code>color</code>设置进度条颜色。color 进度条背景色（会覆盖 status 状态颜色）<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-color.vue']
|
||||
|
|
@ -107,7 +107,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`text-inside` 进度条显示文字内置在进度条内（只在 type=line 时可用），`format`自定义进度条的文字<p>',
|
||||
'<p><code>text-inside</code>进度条显示文字内置在进度条内（只在 type=line 时可用），<code>format<code>自定义进度条的文字<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['format-text.vue']
|
||||
|
|
@ -119,8 +119,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过设置 `percentage` 动态控制进度条变化<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过设置 <code>percentage</code>动态控制进度条变化<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['dynamic-control-changes.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-action-sheet"/>
|
||||
</p>
|
||||
|
||||
## ActionSheet 动作面板组件
|
||||
|
||||
<nova-uxlink widget-name="ActionSheet"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<nova-demo-view link="action-sheet/basic-usage.vue"></nova-demo-view>
|
||||
|
||||
### 操作列表模式
|
||||
|
||||
设置 `type` 为 `action` 启用操作列表模式，设置 `title` 显示提示语。
|
||||
|
||||
<nova-demo-view link="action-sheet/action.vue"></nova-demo-view>
|
||||
|
||||
### 显示隐藏
|
||||
|
||||
:::tip 显示隐藏说明
|
||||
|
||||
- show-header: 显示头部，默认值为 true；
|
||||
- show-search: 显示头部搜索功能，默认值为 true；
|
||||
- show-footer: 显示底部，默认值为 false；
|
||||
:::
|
||||
|
||||
<nova-demo-view link="action-sheet/show.vue"></nova-demo-view>
|
||||
|
||||
### 遮罩层
|
||||
|
||||
添加 `mask` 属性可以关闭遮罩层，默认值为 `true` 。
|
||||
|
||||
<nova-demo-view link="action-sheet/mask.vue"></nova-demo-view>
|
||||
|
||||
默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 `mask-closable` 为 `false` 后将禁用该功能，默认值为 `true` 。
|
||||
|
||||
<nova-demo-view link="action-sheet/mask-event.vue"></nova-demo-view>
|
||||
|
||||
### 插槽
|
||||
|
||||
:::tip 插槽说明
|
||||
|
||||
- header: 头部插槽，默认显示头部，设置 show-header="true" 时有效；
|
||||
- header-left: 头部左侧插槽，默认显示搜索功能；
|
||||
- header-right: 头部右侧插槽，默认显示关闭功能；
|
||||
- footer: 头部插槽，默认隐藏底部，设置 show-footer="true" 时有效；
|
||||
:::
|
||||
|
||||
<nova-demo-view link="action-sheet/slot.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-action-sheet"/>
|
||||
</p>
|
||||
|
||||
## ActionSheet 动作面板组件
|
||||
|
||||
<mobile-uxlink widget-name="ActionSheet"></mobile-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 插槽
|
||||
|
||||
:::tip 插槽说明
|
||||
|
||||
- header: 头部插槽，默认显示头部，设置 show-header="true" 时有效；
|
||||
- header-left: 头部左侧插槽，默认显示搜索功能；
|
||||
- header-right: 头部右侧插槽，默认显示关闭功能；
|
||||
- footer: 头部插槽，默认隐藏底部，设置 show-footer="true" 时有效；
|
||||
:::
|
||||
|
||||
<mobile-view link="action-sheet/slot.vue"></mobile-view>
|
||||
|
||||
<br />
|
||||
|
||||
<mobile-attributes link="action-sheet"></mobile-attributes>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-action-sheet"/>
|
||||
</p>
|
||||
|
||||
## ActionSheet 动作面板组件
|
||||
|
||||
<mobile-uxlink widget-name="ActionSheet"></mobile-uxlink>
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<mobile-view link="action-sheet/basic-usage.vue"></mobile-view>
|
||||
|
||||
### 操作列表模式
|
||||
|
||||
设置 `type` 为 `action` 启用操作列表模式，设置 `title` 显示提示语。
|
||||
|
||||
<mobile-view link="action-sheet/action.vue"></mobile-view>
|
||||
|
||||
### 显示隐藏
|
||||
|
||||
:::tip 显示隐藏说明
|
||||
|
||||
- show-header: 显示头部，默认值为 true；
|
||||
- show-search: 显示头部搜索功能，默认值为 true；
|
||||
- show-footer: 显示底部，默认值为 false；
|
||||
:::
|
||||
|
||||
<mobile-view link="action-sheet/show.vue"></mobile-view>
|
||||
|
||||
### 遮罩层
|
||||
|
||||
添加 `mask` 属性可以关闭遮罩层，默认值为 `true` 。
|
||||
|
||||
<mobile-view link="action-sheet/mask.vue"></mobile-view>
|
||||
|
||||
默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 `mask-closable` 为 `false` 后将禁用该功能，默认值为 `true` 。
|
||||
|
||||
<mobile-view link="action-sheet/mask-event.vue"></mobile-view>
|
||||
|
||||
### 插槽
|
||||
|
||||
:::tip 插槽说明
|
||||
|
||||
- header: 头部插槽，默认显示头部，设置 show-header="true" 时有效；
|
||||
- header-left: 头部左侧插槽，默认显示搜索功能；
|
||||
- header-right: 头部右侧插槽，默认显示关闭功能；
|
||||
- footer: 头部插槽，默认隐藏底部，设置 show-footer="true" 时有效；
|
||||
:::
|
||||
|
||||
<mobile-view link="action-sheet/slot.vue"></mobile-view>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-action-sheet"/>
|
||||
</p>
|
||||
|
||||
## ActionSheet 动作面板组件
|
||||
|
||||
<mobile-uxlink widget-name="ActionSheet"></mobile-uxlink>
|
||||
</div>
|
||||
|
||||
### 插槽
|
||||
|
||||
添加属性 `ellipsis` 选项内容会超出隐藏。
|
||||
<mobile-view link="action-sheet/ellipsis.vue"></mobile-view>
|
||||
|
||||
<br />
|
||||
|
||||
<mobile-attributes link="action-sheet"></mobile-attributes>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-action-sheet"/>
|
||||
</p>
|
||||
|
||||
## ActionSheet 动作面板组件
|
||||
|
||||
<mobile-uxlink widget-name="ActionSheet"></mobile-uxlink>
|
||||
</div>
|
||||
|
||||
### 插槽
|
||||
|
||||
通过添加属性 `multiple`，开启多选功能。
|
||||
<mobile-view link="action-sheet/multiple.vue"></mobile-view>
|
||||
|
||||
<br />
|
||||
|
||||
<mobile-attributes link="action-sheet"></mobile-attributes>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-action-sheet"/>
|
||||
</p>
|
||||
|
||||
## ActionSheet 动作面板组件
|
||||
|
||||
<mobile-uxlink widget-name="ActionSheet"></mobile-uxlink>
|
||||
</div>
|
||||
|
||||
### 插槽
|
||||
|
||||
:::tip 显示隐藏说明
|
||||
|
||||
- show-header: 显示头部，默认值为 true；
|
||||
- show-search: 显示头部搜索功能，默认值为 true；
|
||||
- show-footer: 显示底部，默认值为 false；
|
||||
:::
|
||||
|
||||
<mobile-view link="action-sheet/show.vue"></mobile-view>
|
||||
|
||||
<br />
|
||||
|
||||
<mobile-attributes link="action-sheet"></mobile-attributes>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-action-sheet"/>
|
||||
</p>
|
||||
|
||||
## ActionSheet 动作面板组件
|
||||
|
||||
<mobile-uxlink widget-name="ActionSheet"></mobile-uxlink>
|
||||
</div>
|
||||
|
||||
### 插槽
|
||||
|
||||
:::tip 插槽说明
|
||||
- header: 头部插槽，默认显示头部，设置 show-header="true" 时有效；
|
||||
- header-left: 头部左侧插槽，默认显示搜索功能；
|
||||
- header-right: 头部右侧插槽，默认显示关闭功能；
|
||||
- footer: 头部插槽，默认隐藏底部，设置 show-footer="true" 时有效；
|
||||
:::
|
||||
|
||||
<mobile-view link="action-sheet/slot"></mobile-view>
|
||||
|
||||
<br>
|
||||
|
||||
<mobile-attributes link="action-sheet"></mobile-attributes>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 关闭事件
|
||||
|
||||
`close` 事件，关闭警告框时触发。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/close.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 类型
|
||||
|
||||
通过 `type` 设置不同的类型。可选值：success、warning、info、error，默认值：info 。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/type.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 文字居中
|
||||
|
||||
通过 `center` 属性可使文字显示居中。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/center.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<demo-editor-mobilefirst link="alert/base.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
||||
<nova-attributes link="alert"></nova-attributes>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 自定义警告图标
|
||||
|
||||
通过 `icon` 属性自定义图标。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/icon.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 自定义关闭按钮文本
|
||||
|
||||
通过属性 `close-text` 自定义关闭按钮文本。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/close-text.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 自定义提示内容
|
||||
|
||||
可通过 `description` 属性或插槽设置自定义提示内容。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/custom-description.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 自定义标题
|
||||
|
||||
当 `size` 为 large 时显示标题，可设置 `title` 或 `slot` 自定义标题。默认标题根据设置的 `type` 显示。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/title.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 表单提交结果反馈
|
||||
|
||||
当 `size` 为 large 时，属性 `description` 和默认插槽结合使用，可渲染提交反馈界面。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/feedback-of-result.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 自定义交互操作
|
||||
|
||||
当 `size` 为 large 时，设置默认插槽自定义交互操作。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/slot-default.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 大尺寸
|
||||
|
||||
通过 `size` 属性设置不同的尺寸，可选值：nomal、large，默认值：nomal 。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/size.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 不可关闭
|
||||
|
||||
通过 `closable` 属性可设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/closable.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-alert"/>
|
||||
</p>
|
||||
|
||||
## Alert 警告
|
||||
|
||||
<nova-uxlink widget-name="Alert"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 是否显示图标
|
||||
|
||||
通过配置 `show-icon` 属性，控制图标是否显示。
|
||||
|
||||
<demo-editor-mobilefirst link="alert/show-icon.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-badge"/>
|
||||
</p>
|
||||
|
||||
## Badge 标记
|
||||
|
||||
<nova-uxlink widget-name="Badge"></nova-uxlink>
|
||||
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
|
||||
</div>
|
||||
|
||||
### 默认主題样式
|
||||
|
||||
`type` 设置显示主题，可选值：danger(默认)、primary、success、warning、info
|
||||
|
||||
<demo-editor-mobilefirst link="badge/type.vue"></demo-editor-mobilefirst>
|
||||
|
||||
### 圆点向左排列样式
|
||||
|
||||
`show-left` 设置是否向左展示，仅对圆点生效
|
||||
|
||||
<nova-demo-view link="badge/type-left.vue"></nova-demo-view>
|
||||
<br />
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-badge"/>
|
||||
</p>
|
||||
|
||||
## Badge 标记
|
||||
|
||||
<nova-uxlink widget-name="Badge"></nova-uxlink>
|
||||
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<p>Badge 展示指定数据信息，如：我的待办数、新任务数等。</p>
|
||||
<demo-editor-mobilefirst link="badge/base.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
||||
<nova-attributes link="badge"></nova-attributes>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-badge"/>
|
||||
</p>
|
||||
|
||||
## Badge 标记
|
||||
|
||||
<nova-uxlink widget-name="Badge"></nova-uxlink>
|
||||
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
|
||||
</div>
|
||||
|
||||
### 自定义标记目标
|
||||
|
||||
`default slot` 标记内容自定义
|
||||
|
||||
<demo-editor-mobilefirst link="badge/slot-default.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-badge"/>
|
||||
</p>
|
||||
|
||||
## Badge 标记
|
||||
|
||||
<nova-uxlink widget-name="Badge"></nova-uxlink>
|
||||
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
|
||||
</div>
|
||||
|
||||
### 自定义提示内容
|
||||
|
||||
`content slot` 自定义提示内容
|
||||
|
||||
<demo-editor-mobilefirst link="badge/slot-content.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-badge"/>
|
||||
</p>
|
||||
|
||||
## Badge 标记
|
||||
|
||||
<nova-uxlink widget-name="Badge"></nova-uxlink>
|
||||
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
|
||||
</div>
|
||||
|
||||
### 消息已读动态隐藏标记
|
||||
|
||||
`hidden` 隐藏标记
|
||||
|
||||
<demo-editor-mobilefirst link="badge/dynamic-hidden.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-badge"/>
|
||||
</p>
|
||||
|
||||
## Badge 标记
|
||||
|
||||
<nova-uxlink widget-name="Badge"></nova-uxlink>
|
||||
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
|
||||
</div>
|
||||
|
||||
### 跳转链接
|
||||
|
||||
`href`定义跳转链接
|
||||
|
||||
<demo-editor-mobilefirst link="badge/target.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-badge"/>
|
||||
</p>
|
||||
|
||||
## Badge 标记
|
||||
|
||||
<nova-uxlink widget-name="Badge"></nova-uxlink>
|
||||
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
|
||||
</div>
|
||||
|
||||
### 小圆点标记
|
||||
|
||||
通过`is-dot` 显示小圆点标记
|
||||
|
||||
<demo-editor-mobilefirst link="badge/is-dot.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-badge"/>
|
||||
</p>
|
||||
|
||||
## Badge 标记
|
||||
|
||||
<nova-uxlink widget-name="Badge"></nova-uxlink>
|
||||
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
|
||||
</div>
|
||||
|
||||
### 计数最大值
|
||||
|
||||
`max` 超过最大值会显示 '{max}+'
|
||||
|
||||
<demo-editor-mobilefirst link="badge/max.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-badge"/>
|
||||
</p>
|
||||
|
||||
## Badge 标记
|
||||
|
||||
<nova-uxlink widget-name="Badge"></nova-uxlink>
|
||||
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
|
||||
</div>
|
||||
|
||||
### 属性传值显示内容
|
||||
|
||||
通过绑定`data`属性传入自定义内容
|
||||
|
||||
<nova-demo-view link="badge/props-content.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## ButtonGroup 按钮组
|
||||
|
||||
<nova-uxlink widget-name="Buttongroup"></nova-uxlink>
|
||||
|
||||
以按钮组的方式出现，常用于多项类似操作。
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
通过 `v-model` 设置默认选中的按钮，并实现双向绑定。通过 `value` 也可设置默认选中按钮，但不能进行双向绑定。
|
||||
|
||||
<nova-demo-view link="button-group/base.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
<nova-attributes link="button-group"></nova-attributes>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Buttongroup 按钮组
|
||||
|
||||
<nova-uxlink widget-name="Buttongroup"></nova-uxlink>
|
||||
|
||||
以按钮组的方式出现，常用于多项类似操作。
|
||||
</div>
|
||||
|
||||
### 按钮组数据
|
||||
|
||||
通过 `data` 属性设置按钮组数据，对象中的 text 为按钮显示文本，value 用于双向绑定时指定的值。
|
||||
|
||||
<nova-demo-view link="button-group/data.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Buttongroup 按钮组
|
||||
|
||||
<nova-uxlink widget-name="Buttongroup"></nova-uxlink>
|
||||
|
||||
以按钮组的方式出现，常用于多项类似操作。
|
||||
</div>
|
||||
|
||||
### 默认插槽
|
||||
|
||||
使用默认插槽的方式时，ButtonGroup 的 `data、text-field、value-field、value / v-model、size` 属性对插槽中的按钮将不再生效。
|
||||
|
||||
但可根据使用场景在 Button 组件标签上对不同按钮设置不同的属性，具体参考 Button 组件属性。
|
||||
|
||||
<nova-demo-view link="button-group/slot-default.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Buttongroup 按钮组
|
||||
|
||||
<nova-uxlink widget-name="Buttongroup"></nova-uxlink>
|
||||
|
||||
以按钮组的方式出现，常用于多项类似操作。
|
||||
</div>
|
||||
|
||||
### 禁用状态
|
||||
|
||||
设置 `disabled` 属性为 true 可禁用整个按钮组。
|
||||
|
||||
<nova-demo-view link="button-group/disabled.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Buttongroup 按钮组
|
||||
|
||||
<nova-uxlink widget-name="Buttongroup"></nova-uxlink>
|
||||
|
||||
以按钮组的方式出现，常用于多项类似操作。
|
||||
</div>
|
||||
|
||||
### 朴素按钮
|
||||
|
||||
设置 `plain` 属性为 true 可显示为朴素按钮样式。
|
||||
|
||||
<nova-demo-view link="button-group/plain.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## ButtonGroup 按钮组
|
||||
|
||||
<nova-uxlink widget-name="Buttongroup"></nova-uxlink>
|
||||
|
||||
以按钮组的方式出现，常用于多项类似操作。
|
||||
</div>
|
||||
|
||||
### 设置组件大小
|
||||
|
||||
可以设置为：`medium`，`small`，`mini`
|
||||
<nova-demo-view link="button-group/size.vue"></nova-demo-view>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Buttongroup 按钮组
|
||||
|
||||
<nova-uxlink widget-name="Buttongroup"></nova-uxlink>
|
||||
|
||||
以按钮组的方式出现，常用于多项类似操作。
|
||||
</div>
|
||||
|
||||
### 数据字段映射
|
||||
|
||||
若按钮组数据对象中的字段不是默认的 text 和 value ，则可通过 `text-field`、`value-field` 属性进行映射。
|
||||
|
||||
<nova-demo-view link="button-group/text-value-field.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
|
||||
</div>
|
||||
|
||||
### 聚焦
|
||||
|
||||
通过 `autofocus` 属性设置是否默认聚焦。
|
||||
|
||||
<nova-demo-view link="button/autofocus.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<nova-demo-view link="button/base-saas.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
<nova-attributes link="button"></nova-attributes>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<nova-demo-view link="button/base.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
<nova-attributes link="button"></nova-attributes>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 事件
|
||||
|
||||
按钮的单击事件，该示例中单击按钮将会出现提示信息。
|
||||
|
||||
<nova-demo-view link="button/click.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 按钮组
|
||||
|
||||
<nova-demo-view link="button/slot-default.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、下拉按钮等类型。
|
||||
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<nova-demo-view link="button/base.vue"></nova-demo-view>
|
||||
|
||||
### 文字按钮
|
||||
|
||||
设置 `type` 属性为 `text` 即为文字按钮，可在标签子级或者通过 `text` 属性设置显示内容。
|
||||
|
||||
<nova-demo-view link="button/text.vue"></nova-demo-view>
|
||||
|
||||
### 线性按钮
|
||||
|
||||
配置 `plain` 属性为 true，即可展示为线性按钮的形式。
|
||||
|
||||
<nova-demo-view link="button/plain.vue"></nova-demo-view>
|
||||
|
||||
### 超链接按钮
|
||||
|
||||
通过设置 `href` 属性可跳转到指定页面。
|
||||
|
||||
<nova-demo-view link="button/link.vue"></nova-demo-view>
|
||||
|
||||
### 主题样式
|
||||
|
||||
通过 `type` 属性可以设置不同的主题样式，主要包括 primary、success、info、warning、danger、text。
|
||||
|
||||
<nova-demo-view link="button/type.vue"></nova-demo-view>
|
||||
|
||||
### 尺寸
|
||||
|
||||
通过 `size` 属性设置按钮不同的大小尺寸，包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。
|
||||
|
||||
<nova-demo-view link="button/size.vue"></nova-demo-view>
|
||||
|
||||
### 聚焦
|
||||
|
||||
通过 `autofocus` 属性设置是否默认聚焦。
|
||||
|
||||
<nova-demo-view link="button/autofocus.vue"></nova-demo-view>
|
||||
|
||||
### 防止表单重复提交
|
||||
|
||||
通过 `reset-time` 属性可设置单击后按钮禁用的时长，默认的禁用时长为 1000 毫秒。
|
||||
|
||||
可用于防止按钮连续点击出现表单重复提交的问题。
|
||||
|
||||
<nova-demo-view link="button/reset-time.vue"></nova-demo-view>
|
||||
|
||||
### 事件
|
||||
|
||||
按钮的单击事件，该示例中单击按钮将会出现提示信息。
|
||||
|
||||
<nova-demo-view link="button/click.vue"></nova-demo-view>
|
||||
|
||||
### 动态禁用按钮
|
||||
|
||||
设置 `disabled` 属性为 true 后，可以禁用按钮。
|
||||
|
||||
<nova-demo-view link="button/dynamic-disabled.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
|
||||
</div>
|
||||
|
||||
### 尺寸
|
||||
|
||||
通过 `size` 属性设置按钮不同的大小尺寸，包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。
|
||||
|
||||
<nova-demo-view link="button/size.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 主题样式
|
||||
|
||||
通过 `type` 属性可以设置不同的主题样式，主要包括 primary、success、info、warning、danger、text。
|
||||
|
||||
<nova-demo-view link="button/type.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 圆形按钮
|
||||
|
||||
直接配置 `circle` 属性为 true，即可展示为圆形按钮的形式。
|
||||
|
||||
<nova-demo-view link="button/circle.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 动态禁用按钮
|
||||
|
||||
设置 `disabled` 属性为 true 后，可以禁用按钮。
|
||||
|
||||
<nova-demo-view link="button/dynamic-disabled.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 图标按钮
|
||||
|
||||
指定 `icon` 属性值为需要的 Icon 图标即可展示为图标按钮。
|
||||
|
||||
:::tip Icon 图标用法
|
||||
先从 `@aurora/vue-icon` 中导入需要的 Icon，再在 data 函数中初始化 Icon 组件并赋值给一个属性。最后在模板中通过 `icon` 属性进行引用。<a href="#/webnova/zh-CN/component/icon" target="_blank">点击这里</a>查看更多图标。
|
||||
通过 `native-type` 设置 button、image 两种按钮的表单类型。该属性仅当属性 type 为 button 或 image 时使用。该属性的可选值为 button / submit / reset。
|
||||
:::
|
||||
|
||||
<nova-demo-view link="button/icon.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 图片按钮
|
||||
|
||||
以默认插槽的用法嵌入 img 标签，并引入图片。
|
||||
|
||||
<nova-demo-view link="button/image.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
|
||||
</div>
|
||||
|
||||
### 超链接按钮
|
||||
|
||||
通过设置 `href` 属性可跳转到指定页面。
|
||||
|
||||
<nova-demo-view link="button/link.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 线性按钮
|
||||
|
||||
配置 `plain` 属性为 true，即可展示为线性按钮的形式。
|
||||
|
||||
<nova-demo-view link="button/plain.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 防止表单重复提交
|
||||
|
||||
通过 `reset-time` 属性可设置单击后按钮禁用的时长，默认的禁用时长为 1000 毫秒。
|
||||
|
||||
可用于防止按钮连续点击出现表单重复提交的问题。
|
||||
|
||||
<nova-demo-view link="button/reset-time.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
|
||||
</div>
|
||||
|
||||
### 防止表单重复提交
|
||||
|
||||
通过 `round` 属性设置是否圆角按钮。
|
||||
|
||||
<nova-demo-view link="button/round.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
</div>
|
||||
|
||||
### 显示加载中
|
||||
|
||||
直接配置 `loading` 属性为 true，即可展示为加载中的样式。
|
||||
|
||||
<nova-demo-view link="button/loading.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
<nova-uxlink widget-name="Button"></nova-uxlink>
|
||||
|
||||
常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
|
||||
|
||||
</div>
|
||||
|
||||
### 文字按钮
|
||||
|
||||
设置 `type` 属性为 `text` 即为文字按钮，可在标签子级或者通过 `text` 属性设置显示内容。
|
||||
|
||||
<nova-demo-view link="button/text.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 定制样式类
|
||||
|
||||
设置 `button-class` 属性定制按钮样式
|
||||
|
||||
<nova-demo-view link="button/button-class.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-CalendarBar wapi-container-CalendarBar wapi-navigation-steps"/>
|
||||
</p>
|
||||
|
||||
## CalendarBar 日历栏
|
||||
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
组件 `v-model` 只接受字符串值，例如 `2022-12-18`
|
||||
|
||||
<nova-demo-view link="calendar-bar/basic-usage.vue"></nova-demo-view>
|
||||
|
||||
### 禁用
|
||||
|
||||
使用 `config.disabled` 配置一个方法，用于判断参数日期是否禁用。
|
||||
使用 `config.disabledColorClass` 配置禁用日期的字体颜色类名。
|
||||
使用 `config.disabledBackgroundColorClass` 配置禁用日期的背景颜色类名。
|
||||
|
||||
<nova-demo-view link="calendar-bar/disabled.vue"></nova-demo-view>
|
||||
|
||||
|
||||
### 日期标记
|
||||
|
||||
使用 `config.mark` 配置一个方法，用于判断参数日期是否存在标记。
|
||||
此方法返回空字符串表示不存在标记，返回非空字符串表示存在标记，且标记内容就是该字符串。
|
||||
使用 `config.markBackgroundColorClass` 配置标记的颜色类名。
|
||||
使用 `config.showMarkMessage` 配置是否开启标记 `title` 提示，默认值为 `false`。
|
||||
|
||||
<nova-demo-view link="calendar-bar/marked.vue"></nova-demo-view>
|
||||
|
||||
### 当前日期
|
||||
|
||||
用户传入的日期为 `当前日期`。
|
||||
使用 `config.currentColorClass` 配置 `当前日期` 的字体颜色类名；
|
||||
使用 `config.currentBackgroundColorClass` 配置 `当前日期` 的背景颜色类名。
|
||||
|
||||
<nova-demo-view link="calendar-bar/render-current.vue"></nova-demo-view>
|
||||
|
||||
### 今天
|
||||
|
||||
使用 `config.renderItem` 可以配置一个方法，对日期面板的某些项进行定制渲染。
|
||||
|
||||
<nova-demo-view link="calendar-bar/render-today.vue"></nova-demo-view>
|
||||
|
||||
### 周起始
|
||||
|
||||
使用 `config.weekFirst` 配置每周的起始天。默认值为 `0`，表示周起始为 `周日`。也可以配置为 `1 ~ 6`，分别表示 `周一 ~ 周六`。
|
||||
|
||||
<nova-demo-view link="calendar-bar/week-first.vue"></nova-demo-view>
|
||||
|
||||
### 工作日
|
||||
|
||||
用户传入的日期为 `当前日期`，当前日期所在月份为 `当前月份`，当前月份周六周日为 `周末`，非周六周日为 `工作日`。
|
||||
使用 `config.workday` 配置一个方法，用于判断 `工作日` 是否作为真正的工作日；
|
||||
使用 `config.holiday` 配置一个方法，用于判断 `周末` 是否作为真正的周末；
|
||||
使用 `config.workdayColorClass` 和 `config.holidayColorClass` 配置工作日和周末的字体颜色类。
|
||||
|
||||
<nova-demo-view link="calendar-bar/workday.vue"></nova-demo-view>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<nova-demo-view link="card/basic-usage.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 禁用
|
||||
|
||||
通过设置属性`disabled`禁用卡片
|
||||
|
||||
<nova-demo-view link="card/card-disabled.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 事件
|
||||
|
||||
`change` 事件：卡片勾选和取消勾选时触发
|
||||
`icon-click` 事件：操作栏按钮点击时触发
|
||||
<nova-demo-view link="card/card-events.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 卡片组
|
||||
|
||||
`card-group` 与 `card` 结合一起使用，提供响应式布局的能力
|
||||
|
||||
<nova-demo-view link="card/card-group.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 尺寸
|
||||
|
||||
支持`mini small medium large`4 个尺寸的卡片
|
||||
|
||||
<nova-demo-view link="card/card-size.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 卡片状态
|
||||
|
||||
支持 `success warning alerting danger` 4 种状态
|
||||
|
||||
<nova-demo-view link="card/card-status.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 卡片类型
|
||||
|
||||
支持 `text image video logo` 4 种类型
|
||||
<nova-demo-view link="card/card-type.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 单选
|
||||
|
||||
通过属性`check-type='radio'`设置卡片单选，需同时设置 label。
|
||||
注意：目前仅支持在 text 类型开启单选
|
||||
|
||||
<nova-demo-view link="card/check-type-radio.vue"></nova-demo-view>
|
||||
<br />
|
||||
|
||||
### 多选
|
||||
|
||||
通过属性`check-type='checkbox'`设置卡片多选，需同时设置 label。
|
||||
注意：目前仅支持在 text 类型开启多选
|
||||
|
||||
<nova-demo-view link="card/check-type-checkbox.vue"></nova-demo-view>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 自定义 class
|
||||
|
||||
属性`card-class`可自定义卡片的 class，属性`height`可设置卡片内容区的高度。
|
||||
|
||||
<nova-demo-view link="card/custom-class.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 操作栏选项配置
|
||||
|
||||
通过`options`属性配置操作栏，支持按钮的禁用（`disabled: true`）与隐藏（`hidden: true`）
|
||||
<nova-demo-view link="card/operate-bar.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-button"/>
|
||||
</p>
|
||||
|
||||
## Card 卡片
|
||||
|
||||
<nova-uxlink widget-name="Card"></nova-uxlink>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
||||
### 插槽
|
||||
|
||||
组件提供`default、title-left、title-right、footer`4 个插槽
|
||||
<nova-demo-view link="card/slot.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 宽高比
|
||||
|
||||
`aspect-ratio` 属性可以设置轮播图的宽高比，如果设置了 height，会以 height 为主，默认值为 16:2，可以设置任意的整数宽高比例。
|
||||
设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。
|
||||
|
||||
<nova-demo-view link="carousel/aspect-ratio.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 自动切换
|
||||
|
||||
配置 `autoplay` 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。
|
||||
|
||||
<nova-demo-view link="carousel/autoplay.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<nova-demo-view link="carousel/basic-usage.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### Carousel 属性
|
||||
|
||||
<nova-attributes link="carousel"></nova-attributes>
|
||||
|
||||
<br />
|
||||
|
||||
### Carousel-Item 属性
|
||||
|
||||
<nova-attributes link="carousel-item"></nova-attributes>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 总是显示切换箭头
|
||||
|
||||
<nova-demo-view link="carousel/carousel-arrow-always.vue"></nova-demo-view>
|
||||
|
||||
### hover 时显示切换箭头
|
||||
|
||||
<nova-demo-view link="carousel/carousel-arrow-hover.vue"></nova-demo-view>
|
||||
|
||||
### 隐藏切换箭头
|
||||
|
||||
<nova-demo-view link="carousel/carousel-arrow-never.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<nova-demo-view link="carousel/basic-usage.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### Carousel 属性
|
||||
|
||||
<nova-attributes link="carousel"></nova-attributes>
|
||||
|
||||
<br />
|
||||
|
||||
### Carousel-Item 属性
|
||||
|
||||
<nova-attributes link="carousel-item"></nova-attributes>
|
||||
|
||||
<br />
|
||||
|
||||
### 自动切换
|
||||
|
||||
配置 `autoplay` 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。
|
||||
|
||||
<nova-demo-view link="carousel/autoplay.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 总是显示切换箭头
|
||||
|
||||
<nova-demo-view link="carousel/carousel-arrow-always.vue"></nova-demo-view>
|
||||
|
||||
### hover 时显示切换箭头
|
||||
|
||||
<nova-demo-view link="carousel/carousel-arrow-hover.vue"></nova-demo-view>
|
||||
|
||||
### 隐藏切换箭头
|
||||
|
||||
<nova-demo-view link="carousel/carousel-arrow-never.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 宽高比
|
||||
|
||||
`aspect-ratio` 属性可以设置轮播图的宽高比，如果设置了 height，会以 height 为主，默认值为 16:2，可以设置任意的整数宽高比例。
|
||||
设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。
|
||||
|
||||
<nova-demo-view link="carousel/aspect-ratio.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 关闭循环轮播
|
||||
|
||||
配置 `loop` 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。
|
||||
|
||||
<nova-demo-view link="carousel/close-loop.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 设置高度
|
||||
|
||||
<nova-demo-view link="carousel/custom-height.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 指示器样式
|
||||
|
||||
`indicator-style` 属性可以设置轮播图指示器样式，支持 light 与 dark 两种类型，默认为 light。
|
||||
|
||||
<nova-demo-view link="carousel/indicator-style.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 指示器和触发方式
|
||||
|
||||
走马灯指示器默认显示在幻灯片内容上，配置 `indicator-position` 为 outside 后，将显示在外部。<br />
|
||||
|
||||
配置 `trigger` 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。
|
||||
|
||||
<nova-demo-view link="carousel/indicator-trigger.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 播放开始位置
|
||||
|
||||
<nova-demo-view link="carousel/initial-index.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 手动轮播
|
||||
|
||||
调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。
|
||||
|
||||
<nova-demo-view link="carousel/manual-play.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 轮播间隔时间
|
||||
|
||||
走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 `interval` 属性可以自定义。
|
||||
|
||||
<nova-demo-view link="carousel/play-interval.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 显示标题
|
||||
|
||||
通过 `title` 配置显示标题，需要与 `show-title` 结合使用。
|
||||
<nova-demo-view link="carousel/show-title.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### 纵向轮播
|
||||
|
||||
配置 `type` 属性为 vertical 即可实现纵向轮播。
|
||||
|
||||
<nova-demo-view link="carousel/up-down-carousel.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 关闭循环轮播
|
||||
|
||||
配置 `loop` 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。
|
||||
|
||||
<nova-demo-view link="carousel/close-loop.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 设置高度
|
||||
|
||||
<nova-demo-view link="carousel/custom-height.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 指示器样式
|
||||
|
||||
`indicator-style` 属性可以设置轮播图指示器样式，支持 light 与 dark 两种类型，默认为 light。
|
||||
|
||||
<nova-demo-view link="carousel/indicator-style.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 指示器和触发方式
|
||||
|
||||
走马灯指示器默认显示在幻灯片内容上，配置 `indicator-position` 为 outside 后，将显示在外部。<br />
|
||||
|
||||
配置 `trigger` 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。
|
||||
|
||||
<nova-demo-view link="carousel/indicator-trigger.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 播放开始位置
|
||||
|
||||
<nova-demo-view link="carousel/initial-index.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 手动轮播
|
||||
|
||||
调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。
|
||||
|
||||
<nova-demo-view link="carousel/manual-play.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 轮播间隔时间
|
||||
|
||||
走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 `interval` 属性可以自定义。
|
||||
|
||||
<nova-demo-view link="carousel/play-interval.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 显示标题
|
||||
|
||||
通过 `title` 配置显示标题，需要与 `show-title` 结合使用。
|
||||
<nova-demo-view link="carousel/show-title.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-business-slideimg"/>
|
||||
</p>
|
||||
|
||||
## Carousel 走马灯
|
||||
|
||||
<nova-uxlink widget-name="Carousel"></nova-uxlink>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
||||
### 纵向轮播
|
||||
|
||||
配置 `type` 属性为 vertical 即可实现纵向轮播。
|
||||
|
||||
<nova-demo-view link="carousel/up-down-carousel.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-ui-cascader-select"/>
|
||||
</p>
|
||||
|
||||
## CascaderSelect 级联选择
|
||||
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
使用 `v-model` 绑定组件 `当前值`，使用 `options` 绑定组件 `选项列表`，这两个数组长度必须相同。
|
||||
|
||||
<nova-demo-view link="cascader-select/basic-usage.vue"></nova-demo-view>
|
||||
|
||||
### 循环滚动
|
||||
|
||||
设置属性 `cycle-roll` 为 `true` 打开选项循环滚动功能。默认值为 `false`。
|
||||
|
||||
<nova-demo-view link="cascader-select/cycle-roll.vue"></nova-demo-view>
|
||||
|
||||
### 数组选项禁用
|
||||
|
||||
如果组件 `选项列表` 是数组值，可以使用属性 `disabled` 配置一个方法判断选项是否禁用。
|
||||
此方法的第一个参数是可见选项的当前值，其它参数是组件当前聚焦值，返回 `true` 则禁用选项。
|
||||
|
||||
<nova-demo-view link="cascader-select/disabled-array.vue"></nova-demo-view>
|
||||
|
||||
### 对象选项禁用
|
||||
|
||||
如果组件 `选项列表` 是对象值，使用 `optionMethod` 生成选项时即可指定是否禁用。
|
||||
`optionMethod` 方法的第一个参数是可见选项的当前值，其它参数是组件当前聚焦值，设置返回值的 `disabled` 为 `true` 则禁用选项。
|
||||
|
||||
<nova-demo-view link="cascader-select/disabled.vue"></nova-demo-view>
|
||||
|
||||
### 对象选项
|
||||
|
||||
组件的 `选项列表` 可以是对象值。此方式更方便生成动态选项值，但是选项值必须为数字值。
|
||||
此对象需配置选项范围 `range`，和生成方法 `optionMethod`。选项范围也可以指定为生成方法 `rangeMethod`。
|
||||
`rangeMethod` 的参数是组件当前聚焦值。
|
||||
`optionMethod` 的第一个参数是可见选项的当前值，其它参数是组件当前聚焦值。
|
||||
|
||||
<nova-demo-view link="cascader-select/object-option.vue"></nova-demo-view>
|
||||
|
||||
### 文字颜色
|
||||
|
||||
<nova-demo-view link="cascader-select/text-color-class.vue"></nova-demo-view>
|
||||
|
||||
### 城市级联
|
||||
|
||||
<nova-demo-view link="cascader-select/cities.vue"></nova-demo-view>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-radioboxgroup"/>
|
||||
</p>
|
||||
|
||||
## Checkbox 复选框
|
||||
|
||||
<nova-uxlink widget-name="Selectgroup"></nova-uxlink>
|
||||
|
||||
用于配置不同场景的选项，提供用户可在一组选项中进行多选。
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
<nova-demo-view link="checkbox/basic-usage.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
||||
### Checkbox 属性
|
||||
|
||||
<nova-attributes link="checkbox"></nova-attributes>
|
||||
|
||||
<br />
|
||||
|
||||
### Checkbox-Button 属性
|
||||
|
||||
<nova-attributes link="checkbox-button"></nova-attributes>
|
||||
|
||||
<br />
|
||||
|
||||
### Checkbox-Group 属性
|
||||
|
||||
<nova-attributes link="checkbox-group"></nova-attributes>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-radioboxgroup"/>
|
||||
</p>
|
||||
|
||||
## Checkbox 复选框
|
||||
|
||||
<nova-uxlink widget-name="Selectgroup"></nova-uxlink>
|
||||
|
||||
用于配置不同场景的选项，提供用户可在一组选项中进行多选。
|
||||
</div>
|
||||
|
||||
### 按钮形式复选框
|
||||
|
||||
在 `checkbox-group` 元素中嵌入 `checkbox-button` 即可实现按钮形式的复选框组。
|
||||
通过 `fill` 按钮形式的 Checkbox 激活时的填充色和边框色，默认值为：#409EFF。
|
||||
|
||||
<nova-demo-view link="checkbox/checkbox-button.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-radioboxgroup"/>
|
||||
</p>
|
||||
|
||||
## Checkbox 复选框
|
||||
|
||||
<nova-uxlink widget-name="Selectgroup"></nova-uxlink>
|
||||
|
||||
用于配置不同场景的选项，提供用户可在一组选项中进行多选。
|
||||
|
||||
</div>
|
||||
|
||||
### 事件
|
||||
|
||||
勾选值改变后将触发 `change` 事件。
|
||||
|
||||
<nova-demo-view link="checkbox/checkbox-events.vue"></nova-demo-view>
|
||||
|
||||
<br />
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-form-radioboxgroup"/>
|
||||
</p>
|
||||
|
||||
## Checkbox 复选框
|
||||
|
||||
<nova-uxlink widget-name="Selectgroup"></nova-uxlink>
|
||||
|
||||
用于配置不同场景的选项，提供用户可在一组选项中进行多选。
|
||||
|
||||
</div>
|
||||
|
||||
### 复选框组
|
||||
|
||||
通过 `checkbox-group` 元素把多个 `checkbox` 元素管理为一组，在 `checkbox-group` 中使用 `v-model` 绑定 Array 类型的变量即可实现双向绑定。 `checkbox` 的 `label` 属性是其对应的值，若该标签中无内容，则该属性也充当 checkbox 后的介绍。`label` 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
|
||||
|
||||
<nova-demo-view link="checkbox/checkbox-group.vue"></nova-demo-view>
|
||||
|
||||
### 配置式复选框组
|
||||
|
||||
提供 `options` 属性，支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 `checkbox` 或 `checkbox-button` 元素。
|
||||
|
||||
<br />
|
||||
|
||||
`options` 对象数组中包括三个字段：`label`、`text`、`events`。
|
||||
|
||||
<br />
|
||||
|
||||
另外还提供 `type` 属性，配合 `options` 属性一起使用，默认值为 `checkbox`。还可以配置为 `button`，配置后复选框组将以按钮的形式展示。
|
||||
|
||||
<demo-editor-mobilefirst link="checkbox/group-options.vue"></demo-editor-mobilefirst>
|
||||
|
||||
<br />
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue