js语法:
<script>
$(function() {
    // Set up tour
    $(body).pagewalkthrough({
        name: introduction,
        steps: [{
           popup: {
               content: #walkthrough-1,
               type: modal
           }
        },  {
            wrapper: .con1,
            popup: {
                content: #walkthrough-2,
                type: tooltip,
                position: bottom
            }
        }, {
            wrapper: .con2,
            popup: {
                content: #walkthrough-3,
                type: tooltip,
                position: bottom
            }
        },{
            wrapper: .con3,
            popup: {
                content: #walkthrough-4,
                type: tooltip,
                position: left
            }
        },{
            wrapper: .con4,
            popup: {
                content: #walkthrough-5,
                type: tooltip,
                position: bottom
            }
        }]
    });

    // Show the tour
    $(body).pagewalkthrough(show);
});
</script>
转换成
vue.js语法

  
  
< script >
import $ from 'jquery'
import 'assets/js/jquery.pagewalkthrough.min.js'
export default {
name: 'helpdoc' ,
mounted () {
this .reard()
},
methods: {
reard () {
$( 'body' ).pagewalkthrough({
name: 'introduction' ,
steps: [{
popup: {
content: '#walkthrough-11' ,
type: 'modal'
}
},
{
wrapper: '.con11' ,
popup: {
content: '#walkthrough-22' ,
type: 'tooltip' ,
position: 'bottom'
}
},
{
wrapper: '.con22' ,
popup: {
content: '#walkthrough-33' ,
type: 'tooltip' ,
position: 'bottom'
}
},
{
wrapper: '.con33' ,
popup: {
content: '#walkthrough-44' ,
type: 'tooltip' ,
position: 'bottom'
}
},
{
wrapper: '.con44' ,
popup: {
content: '#walkthrough-55' ,
type: 'tooltip' ,
position: 'top'
}
}]
})
// Show the tour
$( 'body' ).pagewalkthrough( 'show' )
}
}
}
</ script >
Logo

前往低代码交流专区

更多推荐