js代码转vue
js代码divclass="jumbotron">h1id="step1">HTML in tooltiph1>pid="step4"class="lead">We're going to use HTML codes in tooltips via Programmatic APIp>aclass="btn btn-large btn-succes
·
js代码
// function startIntro(){
<
div
class
=
"jumbotron"
>
<
h1
id
=
"step1"
>
HTML in tooltip
</
h1
>
<
p
id
=
"step4"
class
=
"lead"
>
We're going to use HTML codes in tooltips via Programmatic API
</
p
>
<
a
class
=
"btn btn-large btn-success"
href
=
"javascript:void(0);"
@click
=
"
startIntro()
"
>
Show me how
</
a
>
</
div
>
// function startIntro(){
// var intro = introJs();
// intro.setOptions({
// steps: [
// {
// element: '#step1',
// intro: "This is a <b>bold</b> tooltip."
// },
// {
// element: '#step2',
// intro: "Ok, <i>wasn't</i> that fun?",
// position: 'right'
// },
// {
// element: '#step3',
// intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
// position: 'left'
// },
// {
// element: '#step4',
// intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
// position: 'bottom'
// },
// {
// element: '#step5',
// intro: '<strong>Get</strong> it, <strong>use</strong> it.'
// }
// ]
// });
// intro.start();
// }
vue语法
<
div
class
=
"jumbotron"
>
<
h1
id
=
"step1"
>
HTML in tooltip
</
h1
>
<
p
id
=
"step4"
class
=
"lead"
>
We're going to use HTML codes in tooltips via Programmatic API
</
p
>
<
a
class
=
"btn btn-large btn-success"
href
=
"javascript:void(0);"
@click
=
"
startIntro()
"
>
Show me how
</
a
>
</
div
>
import
mintro
from
'intro.js'
startIntro() {
var
introjs
=
mintro.introJs()
introjs.setOptions({
steps: [
{
element:
'#step1'
,
intro:
"This is a <b>bold</b> tooltip."
},
{
element:
'#step2'
,
intro:
"Ok, <i>wasn't</i> that fun?"
,
position:
'right'
},
{
element:
'#step3'
,
intro:
'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.'
,
position:
'left'
},
{
element:
'#step4'
,
intro:
"<span style='font-family: Tahoma'>Another step with new font!</span>"
,
position:
'bottom'
},
{
element:
'#step5'
,
intro:
'<strong>Get</strong> it, <strong>use</strong> it.'
}
]
});
introjs.start()
}
}
}
更多推荐
已为社区贡献13条内容
所有评论(0)