mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
fix(review) step slot
This commit is contained in:
haibo tang
parent
31df24cb08
commit
cbb21b6108
@ -4,24 +4,30 @@
|
||||
:current="current"
|
||||
:status="currentStatus"
|
||||
>
|
||||
<n-step
|
||||
title="I Me Mine"
|
||||
:content="content1"
|
||||
/>
|
||||
<n-step
|
||||
title="Let It Be"
|
||||
:content="content2"
|
||||
|
||||
/>
|
||||
<n-step
|
||||
title="Come Together"
|
||||
:content="content3"
|
||||
/>
|
||||
<n-step
|
||||
title="Something"
|
||||
:content="content4"
|
||||
|
||||
/>
|
||||
<n-step title="I Me Mine">
|
||||
<div class="n-step-description">
|
||||
<p>Al through the day, I me mine I me mine, I me mine</p>
|
||||
<n-button :type="current === 1 ? currentStatus : null" size="small" @click="handleButton1Click">click me</n-button>
|
||||
</div>
|
||||
</n-step>
|
||||
<n-step title="Let It Be">
|
||||
<div class="n-step-description">
|
||||
<p>When I find myself in times of trouble Mother Mary comes to me</p>
|
||||
<n-button :type="current === 2 ? currentStatus : null" size="small" @click="handleButton2Click">click me</n-button>
|
||||
</div>
|
||||
</n-step>
|
||||
<n-step title="Come Together">
|
||||
<div class="n-step-description">
|
||||
<p>Here come old flat top He come grooving up slowly</p>
|
||||
<n-button :type="current === 3 ? currentStatus : null" size="small" @click="handleButton3Click">click me</n-button>
|
||||
</div>
|
||||
</n-step>
|
||||
<n-step title="Something">
|
||||
<div class="n-step-description">
|
||||
<p>Something in the way she moves Attracts me like no other lover</p>
|
||||
<n-button :type="current === 4 ? currentStatus : null" size="small" @click="handleButton4Click">click me</n-button>
|
||||
</div>
|
||||
</n-step>
|
||||
</n-steps>
|
||||
|
||||
<n-radio-group v-model="currentStatus" size="medium" name="basic">
|
||||
@ -79,66 +85,6 @@ export default {
|
||||
console.log('click 4, do something')
|
||||
this.current = 1
|
||||
}
|
||||
},
|
||||
content1 (h) {
|
||||
return h(
|
||||
'n-button',
|
||||
{
|
||||
props: {
|
||||
type: this.current === 1 ? this.currentStatus : null,
|
||||
size:"small"
|
||||
},
|
||||
on: {
|
||||
click: this.handleButton1Click
|
||||
}
|
||||
},
|
||||
['click me']
|
||||
)
|
||||
},
|
||||
content2 (h) {
|
||||
return h(
|
||||
'n-button',
|
||||
{
|
||||
props: {
|
||||
type: this.current === 2 ? this.currentStatus : null,
|
||||
size:"small"
|
||||
},
|
||||
on: {
|
||||
click: this.handleButton2Click
|
||||
}
|
||||
},
|
||||
['click me']
|
||||
)
|
||||
},
|
||||
content3 (h) {
|
||||
return h(
|
||||
'n-button',
|
||||
{
|
||||
props: {
|
||||
type: this.current === 3 ? this.currentStatus : null,
|
||||
size:"small"
|
||||
},
|
||||
on: {
|
||||
click: this.handleButton3Click
|
||||
}
|
||||
},
|
||||
['click me']
|
||||
)
|
||||
},
|
||||
content4 (h) {
|
||||
return h(
|
||||
'n-button',
|
||||
{
|
||||
props: {
|
||||
type: this.current === 4 ? this.currentStatus : null,
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: this.handleButton4Click
|
||||
}
|
||||
},
|
||||
['click me']
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
basic
|
||||
size
|
||||
vertical
|
||||
content
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
@ -4,28 +4,30 @@
|
||||
:current="current"
|
||||
:status="currentStatus"
|
||||
>
|
||||
<n-step
|
||||
title="I Me Mine"
|
||||
description="All through the day, I me mine I me mine, I me mine"
|
||||
:content="content1"
|
||||
/>
|
||||
<n-step
|
||||
title="Let It Be"
|
||||
description="When I find myself in times of trouble Mother Mary comes to me"
|
||||
:content="content2"
|
||||
|
||||
/>
|
||||
<n-step
|
||||
title="Come Together"
|
||||
description="Here come old flat top He come grooving up slowly"
|
||||
:content="content3"
|
||||
/>
|
||||
<n-step
|
||||
title="Something"
|
||||
description="Something in the way she moves Attracts me like no other lover"
|
||||
:content="content4"
|
||||
|
||||
/>
|
||||
<n-step title="I Me Mine">
|
||||
<div class="n-step-description">
|
||||
<p>Al through the day, I me mine I me mine, I me mine</p>
|
||||
<n-button :type="current === 1 ? currentStatus : null" size="small" @click="handleButton1Click">click me</n-button>
|
||||
</div>
|
||||
</n-step>
|
||||
<n-step title="Let It Be">
|
||||
<div class="n-step-description">
|
||||
<p>When I find myself in times of trouble Mother Mary comes to me</p>
|
||||
<n-button :type="current === 2 ? currentStatus : null" size="small" @click="handleButton2Click">click me</n-button>
|
||||
</div>
|
||||
</n-step>
|
||||
<n-step title="Come Together">
|
||||
<div class="n-step-description">
|
||||
<p>Here come old flat top He come grooving up slowly</p>
|
||||
<n-button :type="current === 3 ? currentStatus : null" size="small" @click="handleButton3Click">click me</n-button>
|
||||
</div>
|
||||
</n-step>
|
||||
<n-step title="Something">
|
||||
<div class="n-step-description">
|
||||
<p>Something in the way she moves Attracts me like no other lover</p>
|
||||
<n-button :type="current === 4 ? currentStatus : null" size="small" @click="handleButton4Click">click me</n-button>
|
||||
</div>
|
||||
</n-step>
|
||||
</n-steps>
|
||||
|
||||
<n-radio-group v-model="currentStatus" size="medium" name="basic">
|
||||
@ -83,78 +85,6 @@ export default {
|
||||
console.log('click 4, do something')
|
||||
this.current = 1
|
||||
}
|
||||
},
|
||||
content1 (h) {
|
||||
return h(
|
||||
'n-button',
|
||||
{
|
||||
'class': {
|
||||
'n-step-content-disable': false
|
||||
},
|
||||
props: {
|
||||
type: this.current === 1 ? this.currentStatus : null,
|
||||
size:"small"
|
||||
},
|
||||
on: {
|
||||
click: this.handleButton1Click
|
||||
}
|
||||
},
|
||||
['click me']
|
||||
)
|
||||
},
|
||||
content2 (h) {
|
||||
return h(
|
||||
'n-button',
|
||||
{
|
||||
'class': {
|
||||
'n-step-content-disable': false
|
||||
},
|
||||
props: {
|
||||
type: this.current === 2 ? this.currentStatus : null,
|
||||
size:"small"
|
||||
},
|
||||
on: {
|
||||
click: this.handleButton2Click
|
||||
}
|
||||
},
|
||||
['click me']
|
||||
)
|
||||
},
|
||||
content3 (h) {
|
||||
return h(
|
||||
'n-button',
|
||||
{
|
||||
'class': {
|
||||
'n-step-content-disable': false
|
||||
},
|
||||
props: {
|
||||
type: this.current === 3 ? this.currentStatus : null,
|
||||
size:"small"
|
||||
},
|
||||
on: {
|
||||
click: this.handleButton3Click
|
||||
}
|
||||
},
|
||||
['click me']
|
||||
)
|
||||
},
|
||||
content4 (h) {
|
||||
return h(
|
||||
'n-button',
|
||||
{
|
||||
'class': {
|
||||
'n-step-content-disable': false
|
||||
},
|
||||
props: {
|
||||
type: this.current === 4 ? this.currentStatus : null,
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: this.handleButton4Click
|
||||
}
|
||||
},
|
||||
['click me']
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,6 @@ function template (demos, demosLiteral, isSingleColumn = false) {
|
||||
}
|
||||
|
||||
function parseDemos (demosLiteral, env) {
|
||||
// console.log('parseDemos', demosLiteral, env)
|
||||
const demoNames = demosLiteral
|
||||
.split('\n')
|
||||
.map(demoName => demoName.trim())
|
||||
|
||||
@ -5,7 +5,6 @@ function createRenderer (wrapCodeWithCard = true) {
|
||||
const renderer = new marked.Renderer()
|
||||
const overrides = {
|
||||
table (header, body) {
|
||||
// console.log('renderer', header, body)
|
||||
if (body) body = '<tbody class="n-table__tbody">' + body + '</tbody>'
|
||||
return '<n-table single-column>\n' +
|
||||
'<thead class="n-table__thead">\n' +
|
||||
@ -16,12 +15,10 @@ function createRenderer (wrapCodeWithCard = true) {
|
||||
},
|
||||
|
||||
tablerow (content) {
|
||||
// console.log('tablerow', content)
|
||||
return '<tr class="n-table__tr">\n' + content + '</tr>\n'
|
||||
},
|
||||
|
||||
tablecell (content, flags) {
|
||||
// console.log('tablecell', content, flags)
|
||||
const type = flags.header ? 'th' : 'td'
|
||||
const tag = flags.align
|
||||
? '<' + type + ` class="n-table__${type}"` + ' align="' + flags.align + '">'
|
||||
@ -30,7 +27,6 @@ function createRenderer (wrapCodeWithCard = true) {
|
||||
},
|
||||
|
||||
code: (code, language) => {
|
||||
// console.log('code', code, language)
|
||||
const isLanguageValid = !!(language && hljs.getLanguage(language))
|
||||
if (!isLanguageValid) {
|
||||
throw new Error(`MdRendererError: ${language} is not valid for code`)
|
||||
|
||||
@ -44,11 +44,10 @@
|
||||
<div v-if="!vertical" class="n-step-splitor" />
|
||||
</div>
|
||||
<div
|
||||
v-if="description !== null || content !== null"
|
||||
v-if="description !== null || $scopedSlots.default"
|
||||
class="n-step-content__description"
|
||||
>
|
||||
<render :render="syntheticContent" />
|
||||
<!-- {{description}} -->
|
||||
<slot>{{ description }}</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -61,7 +60,6 @@ import mdCheckmark from '../../_icons/md-checkmark'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
|
||||
import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
|
||||
import render from '../../_utils/vue/render'
|
||||
export default {
|
||||
name: 'NStep',
|
||||
inject: {
|
||||
@ -73,8 +71,7 @@ export default {
|
||||
NIcon,
|
||||
mdCheckmark,
|
||||
mdClose,
|
||||
NIconSwitchTransition,
|
||||
render
|
||||
NIconSwitchTransition
|
||||
},
|
||||
mixins: [ themeable ],
|
||||
props: {
|
||||
@ -93,10 +90,6 @@ export default {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
content: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: null
|
||||
@ -126,14 +119,6 @@ export default {
|
||||
return 'wait'
|
||||
}
|
||||
return null
|
||||
},
|
||||
syntheticContent () {
|
||||
if (this.content === null) {
|
||||
return this.description
|
||||
} else {
|
||||
// debugger
|
||||
return this.content
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
69
test.html
69
test.html
@ -1,69 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<meta content="ie=edge" http-equiv="X-UA-Compatible">
|
||||
<title>Document</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
|
||||
<style type="text/css">
|
||||
.box {
|
||||
width: 200px;
|
||||
border: solid 1px red;
|
||||
/* height: auto */
|
||||
}
|
||||
.box:after{
|
||||
content: '';
|
||||
clear: both;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container1 {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
border: 1px solid gold;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.container2 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid green;
|
||||
float: left;
|
||||
}
|
||||
.container2:after{
|
||||
content: '';
|
||||
clear: both;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="box">
|
||||
|
||||
<div class="box">
|
||||
<div class="container1"></div>
|
||||
<div class="container2"></div>
|
||||
</div>
|
||||
<input id="test" type="text" name="address1" v-model="message">
|
||||
<div>{{message}}</div>
|
||||
<input type="text" name="address1" value="value1from">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
let vue = new Vue({
|
||||
el: '#box',
|
||||
data: {
|
||||
message: '{}'
|
||||
},
|
||||
filters:{
|
||||
parse: function(arg){
|
||||
return JSON.parse(arg)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user