grapejs+vue实现新增VueSlider trait组件效果代码-html代码-BFW代码库

grapejs+vue实现新增VueSlider trait组件效果代码

代码语言：html

所属分类：其他

代码描述：grapejs+vue实现新增VueSlider trait组件效果代码

代码标签： grapejs vue 新增 VueSlider trait 组件效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-slider-component.umd.7.0.1.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vue-slider-component.3.2.24.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.min.js"></script>

    <!--引入grapesjs-preset-webpage-->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">

    <style type="text/css">
        body, html {
      margin: 0;
      height: 100%;
    }
    
        /* EOS */
    </style>


</head>

<body>
    <div id="gjs">
        <slider value="30"></slider>
        <br/><br/><br/>
        <slider value="75"></slider>
    </div>


    <script type="text/javascript">
        //<![CDATA[
        
        
        const VueSlider = window['vue-slider-component'];
        
        const hrefNextTrait = editor => {
          // Custom component
          editor.DomComponents.addType('slider', {
            isComponent: el =>.........完整代码请登录后点击上方下载按钮下载查看