tangjinzhou
7 years ago
parent
c9006ec372
commit
4c37abf8b5
@ -1,185 +0,0 @@
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
|
||||
const Demo = {
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values)
|
||||
}
|
||||
})
|
||||
},
|
||||
normFile (e) {
|
||||
console.log('Upload event:', e)
|
||||
if (Array.isArray(e)) {
|
||||
return e
|
||||
}
|
||||
return e && e.fileList
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { getFieldDecorator } = this.form
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 14 },
|
||||
}
|
||||
return (
|
||||
<a-form onSubmit={this.handleSubmit}>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Plain Text'
|
||||
>
|
||||
<span class='ant-form-text'>China</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Select'
|
||||
hasFeedback
|
||||
>
|
||||
{getFieldDecorator('select', {
|
||||
rules: [
|
||||
{ required: true, message: 'Please select your country!' },
|
||||
],
|
||||
})(
|
||||
<a-select placeholder='Please select a country'>
|
||||
<a-select-option value='china'>China</a-select-option>
|
||||
<a-select-option value='use'>U.S.A</a-select-option>
|
||||
</a-select>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Select[multiple]'
|
||||
>
|
||||
{getFieldDecorator('select-multiple', {
|
||||
rules: [
|
||||
{ required: true, message: 'Please select your favourite colors!', type: 'array' },
|
||||
],
|
||||
})(
|
||||
<a-select mode='multiple' placeholder='Please select favourite colors'>
|
||||
<a-select-option value='red'>Red</a-select-option>
|
||||
<a-select-option value='green'>Green</a-select-option>
|
||||
<a-select-option value='blue'>Blue</a-select-option>
|
||||
</a-select>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='InputNumber'
|
||||
>
|
||||
{getFieldDecorator('input-number', { initialValue: 3 })(
|
||||
<a-input-number min={1} max={10} />
|
||||
)}
|
||||
<span class='ant-form-text'> machines</span>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Switch'
|
||||
>
|
||||
{getFieldDecorator('switch', { valuePropName: 'checked' })(
|
||||
<a-switch />
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Slider'
|
||||
>
|
||||
{getFieldDecorator('slider')(
|
||||
<a-slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }} />
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Radio.Group'
|
||||
>
|
||||
{getFieldDecorator('radio-group')(
|
||||
<a-radio-group>
|
||||
<a-radio value='a'>item 1</a-radio>
|
||||
<a-radio value='b'>item 2</a-radio>
|
||||
<a-radio value='c'>item 3</a-radio>
|
||||
</a-radio-group>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Radio.Button'
|
||||
>
|
||||
{getFieldDecorator('radio-button')(
|
||||
<a-radio-group>
|
||||
<a-radio-button value='a'>item 1</a-radio-button>
|
||||
<a-radio-button value='b'>item 2</a-radio-button>
|
||||
<a-radio-button value='c'>item 3</a-radio-button>
|
||||
</a-radio-group>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Rate'
|
||||
>
|
||||
{getFieldDecorator('rate', {
|
||||
initialValue: 3.5,
|
||||
})(
|
||||
<a-rate allowHalf/>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Upload'
|
||||
extra='longgggggggggggggggggggggggggggggggggg'
|
||||
>
|
||||
{getFieldDecorator('upload', {
|
||||
valuePropName: 'fileList',
|
||||
getValueFromEvent: this.normFile,
|
||||
})(
|
||||
<a-upload name='logo' action='/upload.do' listType='picture'>
|
||||
<a-button>
|
||||
<a-icon type='upload' /> Click to upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Dragger'
|
||||
>
|
||||
<div class='dropbox'>
|
||||
{getFieldDecorator('dragger', {
|
||||
valuePropName: 'fileList',
|
||||
getValueFromEvent: this.normFile,
|
||||
})(
|
||||
<a-upload-dragger name='files' action='/upload.do'>
|
||||
<p class='ant-upload-drag-icon'>
|
||||
<a-icon type='inbox' />
|
||||
</p>
|
||||
<p class='ant-upload-text'>Click or drag file to this area to upload</p>
|
||||
<p class='ant-upload-hint'>Support for a single or bulk upload.</p>
|
||||
</a-upload-dragger>
|
||||
)}
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
wrapperCol={{ span: 12, offset: 6 }}
|
||||
>
|
||||
<a-button type='primary' htmlType='submit'>Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default Form.create()(Demo)
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<demo-box :jsfiddle="jsfiddle">
|
||||
<template slot="component"><slot /></template>
|
||||
<template slot="description">
|
||||
<div v-html="cnHtml"></div>
|
||||
</template>
|
||||
<template slot="us-description">
|
||||
<div v-html="usHtml"></div>
|
||||
</template>
|
||||
<template slot="code">
|
||||
<div v-html="codeHtml"></div>
|
||||
</template>
|
||||
</demo-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import marked from 'marked'
|
||||
const hljs = require('highlight.js')
|
||||
const replaceDelimiters = function (str) {
|
||||
return str.replace(/({{|}})/g, '<span>$1</span>')
|
||||
}
|
||||
const renderHighlight = function (str, lang) {
|
||||
if (!(lang && hljs.getLanguage(lang))) {
|
||||
return ''
|
||||
}
|
||||
|
||||
try {
|
||||
return replaceDelimiters(hljs.highlight(lang, str, true).value)
|
||||
} catch (err) {}
|
||||
}
|
||||
const renderer = new marked.Renderer()
|
||||
renderer.heading = function (text, level) {
|
||||
return '<h' +
|
||||
level +
|
||||
' id="' +
|
||||
text.replace(/[^\w]+/g, '-') +
|
||||
'">' +
|
||||
text +
|
||||
'</h' +
|
||||
level +
|
||||
'>\n'
|
||||
}
|
||||
marked.setOptions({
|
||||
renderer,
|
||||
gfm: true,
|
||||
tables: true,
|
||||
breaks: true,
|
||||
pedantic: true,
|
||||
sanitize: true,
|
||||
smartLists: true,
|
||||
smartypants: true,
|
||||
html: true,
|
||||
highlight: renderHighlight,
|
||||
})
|
||||
const cnReg = /<cn>([\S\s\t]*?)<\/cn>/
|
||||
const usReg = /<us>([\S\s\t]*?)<\/us>/
|
||||
export default {
|
||||
name: 'demoContainer',
|
||||
props: ['code'],
|
||||
data () {
|
||||
const cn = this.code.match(cnReg) || []
|
||||
const us = this.code.match(usReg) || []
|
||||
const cnHtml = marked(cn[1].trim())
|
||||
const usHtml = marked(us[1].trim())
|
||||
const sourceCode = this.code.replace(cn[0], '').replace(us[0], '').trim()
|
||||
const codeHtml = marked('````jsx\n' + sourceCode + '````')
|
||||
return {
|
||||
codeHtml,
|
||||
cnHtml,
|
||||
usHtml,
|
||||
jsfiddle: {
|
||||
sourceCode,
|
||||
cn: cn[1].trim(),
|
||||
us: us[1].trim(),
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue