| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
soap72twsite
8年前发布

一个轻量的 Vue 拖动排序插件

   <h2>Awe-dnd</h2>    <p>Makes your elements draggable in Vue.</p>    <p><img src="https://simg.open-open.com/show/71d3bf4d15f67bd9d94156a944357713.gif"></p>    <p>See Demo: <a href="/misc/goto?guid=4959725667822635608" rel="nofollow,noindex">http://hilongjw.github.io/vue-dragging/</a></p>    <p>Some of goals of this project worth noting include:</p>    <ul>     <li>support desktop and mobile</li>     <li>Vue data-driven philosophy</li>     <li>Supports both of Vue 1.0 and Vue 2.0</li>    </ul>    <h2>Requirements</h2>    <ul>     <li>Vue: ^1.0.0 or ^2.0.0</li>    </ul>    <h2>Install</h2>    <p>From npm:</p>    <pre>  <code class="language-groovy">$ npm install awe-dnd --save</code></pre>    <h2>Usage</h2>    <pre>  <code class="language-groovy">//main.js    import VueDND from 'awe-dnd'    Vue.use(VueDND)</code></pre>    <pre>  <code class="language-groovy"><!--your.vue-->  <script>  export default {    data () {      return {          colors: [{              text: "Aquamarine"          }, {              text: "Hotpink"          }, {              text: "Gold"          }, {              text: "Crimson"          }, {              text: "Blueviolet"          }, {              text: "Lightblue"          }, {              text: "Cornflowerblue"          }, {              text: "Skyblue"          }, {              text: "Burlywood"          }]      }    }  }  </script>    <template>    <div class="color-list">        <div             class="color-item"             v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"            :key="color.text"        >{{color.text}}</div>    </div>  </template></code></pre>    <h2>API</h2>    <p>v-dragging=&quot;{ item: color, list: colors, group: 'color' }&quot;</p>    <p>Arguments:</p>    <ul>     <li>{item} Object</li>     <li>{list} Array</li>     <li> <p>{group} String</p> <p>group is unique key of dragable list.</p> </li>    </ul>    <p>Example</p>    <pre>  <code class="language-groovy"><!-- Vue2.0 -->  <div class="color-list">      <div           class="color-item"           v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"          :key="color.text"      >{{color.text}}</div>  </div>    <!-- Vue1.0 -->  <div class="color-list">      <div           class="color-item"           v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"          track-by="color.text"      >{{color.text}}</div>  </div></code></pre>    <p> </p>    <p> </p>    
 本文由用户 soap72twsite 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1479449688641.html
Vue.js Vue.js开发