亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

分享一個(gè)功能強(qiáng)大的vue.js拖拽組件

stefan / 893人閱讀

摘要：介紹這是一個(gè)功能強(qiáng)大的可拖拽的組件。它可以自動(dòng)滾動(dòng)，鎖定坐標(biāo)系。支持拖拽時(shí)，流暢的動(dòng)畫效果。可以支持水平，垂直或者網(wǎng)格的拖拽。

介紹

vue-slicksort -- 這是一個(gè)功能強(qiáng)大的可拖拽的vue.js組件。 它可以自動(dòng)滾動(dòng)，鎖定坐標(biāo)系。支持拖拽時(shí)，流暢的動(dòng)畫效果。可以支持水平，垂直或者網(wǎng)格的拖拽。支持觸摸。

DEMO

安裝

通過npm安裝

$ npm install vue-slicksort --save

通過yarn安裝

$ yarn add vue-slicksort
插件應(yīng)用

引入組件

// Using an ES6 transpiler like Babel
import {ContainerMixin, ElementMixin} from "vue-slicksort";

// Not using an ES6 transpiler
var slicksort = require("vue-slicksort");
var ContainerMixin = slicksort.ContainerMixin;
var ElementMixin = slicksort.ElementMixin;

在你的vue文件中這樣引用

import Vue from "vue";
import { ContainerMixin, ElementMixin } from "vue-slicksort";

const SortableList = {
  mixins: [ContainerMixin],
  template: `
    
    
      
    

  `,
};

const SortableItem = {
  mixins: [ElementMixin],
  props: ["item"],
  template: `
    
  • {{item}}
    • 
  `,
};

const ExampleVue = {
  name: "Example",
  template: `
    
    
      
        
      
    
    
  `,
  components: {
    SortableItem,
    SortableList,
  },
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"],
    };
  },
};

const app = new Vue({
  el: "#root",
  render: (h) => h(ExampleVue),
});
    組件參數(shù)
    Property Type Default Description
    value Array - 列表的內(nèi)容
    axis String y 列表元素可以被橫向拖拽，縱向拖拽還是網(wǎng)格拖拽。用x,y,xy來表示。
    lockAxis String - 用于排序時(shí)在坐標(biāo)系中鎖定元素的移動(dòng)
    helperClass String - helper的自定義樣式類
    transitionDuration Number 300 元素移動(dòng)動(dòng)畫的持續(xù)時(shí)間
    pressDelay Number 0 如果需要當(dāng)元素被按下一段時(shí)間再允許拖拽，可以設(shè)置這個(gè)屬性
    pressThreshold Number 5 移動(dòng)允許被忽略的閾值，單位是像素
    distance Number 0 如果需要在拖拽出一定距離之后才被識(shí)別為正在拖拽的元素，可以設(shè)置這個(gè)屬性
    useDragHandle Boolean false 如果使用HandleDirective，設(shè)置為true
    useWindowAsScrollContainer Boolean false 是否設(shè)置window為可滾動(dòng)的容器
    hideSortableGhost Boolean false 是否設(shè)置window為可滾動(dòng)的容器
    useWindowAsScrollContainer Boolean true 是否自動(dòng)隱藏ghost元素
    lockToContainerEdges Boolean false 是否對(duì)正在拖拽的元素鎖定容器邊緣
    lockOffset String 50% 對(duì)正在拖拽的元素鎖定容器邊緣的偏移量
    shouldCancelStart Function - 在拖拽開始前這個(gè)方法將被調(diào)用
    getHelperDimensions Function - 可選方法({node, index, collection}),用于返回SortableHelper的計(jì)算尺寸

    輪子工廠--一個(gè)分享vue,angular優(yōu)秀組件的網(wǎng)站

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107164.html

    相關(guān)文章

    • iView 發(fā)布 3.0 版本，以及開發(fā)者社區(qū)等 5 款新產(chǎn)品

      摘要：相對(duì)時(shí)間組件錨點(diǎn)組件面板分割組件分割線組件單元格組件相對(duì)時(shí)間組件用于表示幾分鐘前幾小時(shí)前等相對(duì)于此時(shí)此刻的時(shí)間描述。單元格組件在手機(jī)上比較常見，在上則常用于固定的側(cè)邊菜單項(xiàng)。開發(fā)者社區(qū)這是發(fā)布會(huì)最勁爆的一款產(chǎn)品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我們成功地召開了 iView 3...

      FreeZinG 評(píng)論0 收藏0

    • 手把手教你寫vue裁切預(yù)覽組件

      摘要：版本裁切工具，包含預(yù)覽功能最終效果源碼地址第一步先用安裝腳手架不會(huì)安裝的看官網(wǎng)初始化第二步創(chuàng)建文件新建里新建，在配置訪問路由具體看源碼最終生成的文件結(jié)構(gòu)如下圖第三步注冊(cè)組件引用所有插件導(dǎo)入插件入口文件如果已安裝就跳過注冊(cè)插件全 vue版本裁切工具，包含預(yù)覽功能 最終效果： https://qiuyaofan.github.io/vue-crop-demo/ 源碼地址： https:/...

      FreeZinG 評(píng)論0 收藏0

    • 觀眾老爺們，來試試這個(gè)用 Vue 擼的數(shù)據(jù)可視化后臺(tái)吧

      摘要：至于如何優(yōu)雅地管理使用，再次祭出潘神的文章手摸手，帶你優(yōu)雅的使用掘金項(xiàng)目的后端接口文檔我是用的進(jìn)行的管理，其實(shí)有很多強(qiáng)大的功能，不僅僅是一個(gè)接口測(cè)試工具，接口文檔管理就是其中一個(gè)。 首先放個(gè)線上地址大家感受一下(由于后端用的是 leancloud 的免費(fèi)套餐，因此可能會(huì)比較慢)： vue-data-board P.S. 建議大家盡量自己注冊(cè)一個(gè)賬號(hào)(可以隨便填一個(gè)密碼)，如果用默認(rèn)的測(cè)...

      JinB 評(píng)論0 收藏0

    • 前端每周清單：Node.js 微服務(wù)實(shí)踐，Vue.js 與 GraphQL，Angular 組件技巧

      摘要：前端每周清單第期微服務(wù)實(shí)踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 前端每周清單第 26 期：Node.js 微服務(wù)實(shí)踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防 作者：王下邀月熊 編輯：徐川...

      wall2flower 評(píng)論0 收藏0

    • 前端最實(shí)用書簽(持續(xù)更新)

      摘要：前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點(diǎn)混亂所以將前端主流技術(shù)做了一個(gè)書簽整理不求最多最全但求最實(shí)用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點(diǎn)混亂; 所以將前端主流技術(shù)做了一個(gè)書簽整理,不求最多最全,但求最實(shí)用。 書簽源碼 書簽導(dǎo)入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

      sshe 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <