You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
227 lines
8.4 KiB
227 lines
8.4 KiB
<template> |
|
<div> |
|
<section class="demo-section"> |
|
<h4>类型</h4> |
|
<div> |
|
<x-button type="info" @click="info">Info</x-button> |
|
<x-button type="success" @click="success">Success</x-button> |
|
<x-button type="warning" @click="warning">Warning</x-button> |
|
<x-button type="error" @click="error">Error</x-button> |
|
<br><br> |
|
<x-button>Default</x-button> |
|
<x-button type="ghost">Ghost</x-button> |
|
<x-button type="dashed">Dashed</x-button> |
|
<x-button type="text">Text</x-button> |
|
<x-button type="ghost" disabled>Ghost(Disabled)</x-button> |
|
<x-button type="dashed" disabled>Dashed(Disabled)</x-button> |
|
<x-button type="text" disabled>Text(Disabled)</x-button> |
|
</div> |
|
</section> |
|
<section class="demo-section"> |
|
<h4>形状和图标</h4> |
|
<div> |
|
<x-button type="primary" shape="circle" icon="ans-icon-warn-empty" size="small"></x-button> |
|
<x-button type="primary" icon="ans-icon-search">Plugin</x-button> |
|
<x-button type="primary" shape="circle" icon="ans-icon-search">Plugin</x-button> |
|
<x-button type="primary" shape="circle">Circle</x-button> |
|
<br><br> |
|
<x-button type="ghost" shape="circle" icon="ans-icon-warn-empty"></x-button> |
|
<x-button type="ghost" icon="ans-icon-search">Plugin</x-button> |
|
<x-button type="ghost" shape="circle" icon="ans-icon-search">Plugin</x-button> |
|
<x-button type="ghost" shape="circle">Circle</x-button> |
|
</div> |
|
</section> |
|
<section class="demo-section"> |
|
<h4>大小</h4> |
|
<div> |
|
<x-button type="primary" size="large">Large</x-button> |
|
<x-button type="primary">Default</x-button> |
|
<x-button type="primary" size="small">Small</x-button> |
|
<x-button type="primary" size="xsmall">xSmall</x-button> |
|
<br><br> |
|
<x-button type="primary" shape="circle" size="large">Large</x-button> |
|
<x-button type="primary" shape="circle">Default</x-button> |
|
<x-button type="primary" shape="circle" size="small">Small</x-button> |
|
<x-button type="primary" shape="circle" size="xsmall">xSmall</x-button> |
|
</div> |
|
</section> |
|
<section class="demo-section"> |
|
<h4>状态</h4> |
|
<div> |
|
<x-button type="primary" disabled @click="info">Primary (Disabled)</x-button> |
|
<x-button type="dashed" disabled>Dashed (Disabled)</x-button> |
|
<x-button type="ghost" shape="circle" disabled>Ghost With Circle (Disabled)</x-button> |
|
<x-button type="primary" icon="ans-icon-search" :loading="spinnerLoading" ref="spinnerBtn" @click="handleLoadClick">Loading...</x-button> |
|
</div> |
|
</section> |
|
<section class="demo-section"> |
|
<h4>基本按钮组</h4> |
|
<div> |
|
<x-button-group v-model="checkedValue"> |
|
<x-button value="1">Cancel</x-button> |
|
<x-button value="2">Confirm</x-button> |
|
</x-button-group> |
|
<x-button-group size="small"> |
|
<x-button type="ghost">Yesterday</x-button> |
|
<x-button disabled type="ghost">Today</x-button> |
|
<x-button type="ghost">Tomorrow</x-button> |
|
</x-button-group> |
|
</div> |
|
</section> |
|
<section class="demo-section"> |
|
<h4>图标类型</h4> |
|
<div> |
|
<x-button-group :size="'large'" shape="circle"> |
|
<x-button type="primary" icon="ans-icon-search"></x-button> |
|
<x-button type="primary" icon="ans-icon-more"></x-button> |
|
<x-button type="primary" icon="ans-icon-close"></x-button> |
|
<x-button type="primary" icon="ans-icon-more"></x-button> |
|
</x-button-group> |
|
<x-button-group shape="circle"> |
|
<x-button type="primary" icon="ans-icon-arrow-to-left"></x-button> |
|
<x-button type="primary" icon="ans-icon-arrow-to-right"></x-button> |
|
</x-button-group> |
|
</div> |
|
</section> |
|
<section class="demo-section"> |
|
<h4>垂直排列</h4> |
|
<div> |
|
<x-button-group :vertical="true"> |
|
<x-button type="ghost" icon="ans-icon-arrow-up"></x-button> |
|
<x-button type="ghost" icon="ans-icon-arrow-right"></x-button> |
|
<x-button type="ghost" icon="ans-icon-arrow-down"></x-button> |
|
<x-button type="ghost" icon="ans-icon-arrow-left"></x-button> |
|
</x-button-group> |
|
</div> |
|
</section> |
|
<section class="demo-section"> |
|
<h4>圆角</h4> |
|
<div> |
|
<x-button-group shape="circle" value="open"> |
|
<x-button type="primary" value="open">开启</x-button> |
|
<x-button type="primary" value="close">关闭</x-button> |
|
</x-button-group> |
|
<x-button-group shape="circle" value="2"> |
|
<x-button :visible="false" type="ghost" icon="fa-github">苹果</x-button> |
|
<x-button type="ghost" icon="fa-html5" value="2">李子</x-button> |
|
<x-button type="ghost" icon="fa-firefox">橘子</x-button> |
|
<x-button :visible="false" type="ghost" icon="fa-chrome">香蕉</x-button> |
|
</x-button-group> |
|
</div> |
|
</section> |
|
<section class="demo-section"> |
|
<h4>大小</h4> |
|
<div> |
|
<x-button-group size="large"> |
|
<x-button type="ghost">Large</x-button> |
|
<x-button type="ghost">Large</x-button> |
|
</x-button-group> |
|
<x-button-group> |
|
<x-button type="ghost">Default</x-button> |
|
<x-button type="ghost">Default</x-button> |
|
</x-button-group> |
|
<x-button-group size="small"> |
|
<x-button type="ghost">Small</x-button> |
|
<x-button type="ghost">Small</x-button> |
|
</x-button-group> |
|
<x-button-group size="xsmall"> |
|
<x-button type="ghost">xSmall</x-button> |
|
<x-button type="ghost">xSmall</x-button> |
|
</x-button-group> |
|
</div> |
|
<div> |
|
<x-button-group size="large" shape="circle"> |
|
<x-button type="ghost">Large</x-button> |
|
<x-button type="ghost">Large</x-button> |
|
</x-button-group> |
|
<x-button-group shape="circle"> |
|
<x-button type="ghost">Default</x-button> |
|
<x-button type="ghost">Default</x-button> |
|
</x-button-group> |
|
<x-button-group size="small" shape="circle"> |
|
<x-button type="ghost">Small</x-button> |
|
<x-button type="ghost">Small</x-button> |
|
</x-button-group> |
|
<x-button-group size="xsmall" shape="circle"> |
|
<x-button type="ghost">xSmall</x-button> |
|
<x-button type="ghost">xSmall</x-button> |
|
</x-button-group> |
|
</div> |
|
</section> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { xButton, xButtonGroup } from '../src' |
|
|
|
export default { |
|
name: 'app', |
|
data: function () { |
|
return { |
|
name: 1, |
|
timeout: 0, |
|
spinnerLoading: false, |
|
checkedValue: '2' // for button-group two-way binding. |
|
} |
|
}, |
|
watch: { |
|
// Watcher for pipe the button-group value to console |
|
checkedValue (newValue) { |
|
console.log(newValue) |
|
} |
|
}, |
|
methods: { |
|
handleLoadClick () { |
|
// toggle button `loading` manually |
|
this.spinnerLoading = !this.spinnerLoading |
|
var timeout = 10 |
|
// Simulate a sync progress |
|
let loop = () => { |
|
timeout -= 1 |
|
if (timeout <= 0) { |
|
// release the async locker |
|
this.spinnerLoading = false |
|
return |
|
} |
|
setTimeout(loop, 1000) |
|
} |
|
setTimeout(loop, 500) |
|
}, |
|
handleLockerClick (e, next) { |
|
this.timeout = 10 |
|
// Simulate a sync progress |
|
let loop = () => { |
|
this.timeout -= 1 |
|
if (this.timeout <= 0) { |
|
// release the async locker |
|
next() |
|
return |
|
} |
|
setTimeout(loop, 1000) |
|
} |
|
setTimeout(loop, 500) |
|
}, |
|
handleBtnGroupSelected (value) { |
|
console.log(value) |
|
}, |
|
info () { |
|
// vMessage.info({ content: 'hello word' + (this.name++), duration: 2, onClose: function () {}, closable: false }) |
|
}, |
|
success () { |
|
// message.success({ content: 'hello word' + (this.name++), duration: 2, onClose: function () {}, closable: false }) |
|
}, |
|
error () { |
|
// message.error({ content: 'hello wordhello wordhello word' + (this.name++), duration: 0, onClose: function () {}, closable: true }) |
|
}, |
|
loading () { |
|
// message.loading({ content: 'hello word' + (this.name++), duration: 2, onClose: function () {}, closable: true }) |
|
}, |
|
warning () { |
|
// message.warning({ content: 'hello word' + (this.name++), duration: 2, onClose: function () {}, closable: false }) |
|
} |
|
}, |
|
components: { xButtonGroup, xButton } |
|
} |
|
</script> |
|
|
|
<style lang="scss"></style>
|
|
|