js转vue.js语法

来源：互联网发布：自动骂人软件编辑：程序博客网时间：2024/05/22 16:05
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>
阅读全文
0 0