天給大家推薦一款超美觀的pc端vue.js彈窗組件VueJsModal。

vue-js-modal 基于Vue構建的Modal對話框組件。單獨組件，方便使用。支持拖拽、縮放、異步調用組件。

安裝

$ npm i vue-js-modal -S

引入組件

// 在main.js中引入
import Vue from 'vue'
import VModal from 'vue-js-modal'
import 'vue-js-modal/dist/styles.css'
Vue.use(VModal)

調用方式

<template>
  <modal name="example"
    :width="300"
    :height="300"
    :resizable="true"
    :draggable="true"
    :adaptive="true"
    @before-open="beforeOpen"
    @opened="Opened"
    @before-close="beforeClose"
    @closed="Closed"
  >
    Hello, VueModal!
  </modal>
</template>
<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.$modal.show('example')
  },
  methods: {
    beforeOpen(event) {
      console.log('Opening...')
    },
    Opened(event) {
      console.log('Opened...')
    },
    beforeClose(event) {
      console.log('Closing...')
    },
    Closed(event) {
      console.log('Closed...')
    }
  }
}
</script>

調用內部 show、hide 方法顯示和隱藏彈窗

<template>
  <modal name="my-first-modal">
    This is my first modal
  </modal>
</template>

<script>
export default {
  mounted () {
    this.show()
  },
  methods: {
    show () {
      this.$modal.show('my-first-modal');
    },
    hide () {
      this.$modal.hide('my-first-modal');
    }
  }
}
</script>

另外還支持Modal動態調用組件

import MyComponent from './MyComponent.vue'
this.$modal.show(
  MyComponent,
  { text: 'This text is passed as a property' },
  { draggable: true }
)

// or

this.$modal.show(
  {
    template: `
      <div>
        <h1>This is created inline</h1>
        <p>{{ text }}</p>
      </div>
    `,
    props: ['text']
  },
  { text: 'This text is passed as a property' },
  { draggable: true, resizable: true },
  { 'before-close': event => {} }
)

附上模態框示例及倉庫地址

# demo地址
http://vue-js-modal.yev.io/

# 項目地址
https://github.com/euvl/vue-js-modal

ok，這次就分享到這里。如果大家有其它Vue彈窗組件，歡迎留言討論~

VSCode中，有許多與HTML相關的插件可以大大提高開發效率和便利性。以下是一些值得推薦的插件，它們各自具有獨特的功能和優點，可以幫助您更好地編寫、調試和預覽HTML代碼。

1. HTML Snippets: 這個插件提供了許多HTML代碼片段，可以幫助您快速編寫常見的HTML結構和元素。只需輸入簡短的縮寫，即可自動生成相應的HTML代碼，大大提高了編寫速度。

2. Emmet: Emmet是一個強大的代碼生成器，支持多種編程語言，包括HTML。通過簡單的縮寫和語法，您可以快速生成復雜的HTML結構和嵌套元素。Emmet還提供了許多自定義選項，可以根據您的需求進行靈活配置。

3. HTML Boilerplate: 這個插件提供了一個HTML模板，包含了常見的HTML結構和元素，如文檔類型聲明、字符編碼、頭部信息等。使用這個插件，您可以快速創建一個基本的HTML框架，然后在此基礎上進行進一步的開發。

4. HTML Preview: HTML Preview插件可以在VSCode中實時預覽HTML代碼的效果。您只需在編輯器中打開HTML文件，然后點擊預覽按鈕，即可在側邊欄中查看HTML頁面的渲染效果。這對于調試和預覽HTML代碼非常方便。

5. Color Highlight: Color Highlight插件可以自動識別HTML代碼中的顏色值，并在編輯器中高亮顯示。這使得您更容易發現和修改顏色值，提高了代碼的可讀性和可維護性。

6. HTML Boilerplate Generator: 這個插件可以幫助您快速生成HTML5的Boilerplate代碼，包括常用的meta標簽、字符編碼、視口設置等。它還提供了一些自定義選項，可以根據您的需求生成符合規范的HTML代碼。

7. HTML CSS Support: 這個插件提供了對HTML和CSS的完整支持，包括語法高亮、代碼片段、代碼折疊等功能。它還支持自動完成和錯誤檢查，可以幫助您更高效地編寫HTML和CSS代碼。

8. HTML/CSS/JS Prettify: 這個插件可以對HTML、CSS和JavaScript代碼進行格式化，使其更加整潔和易讀。您可以自定義格式化規則，也可以使用默認的規則進行快速格式化。這對于保持代碼風格一致和提高代碼可讀性非常有幫助。

9. HTML Validator: HTML Validator插件可以對HTML代碼進行驗證，檢查其是否符合W3C規范。它可以檢測出潛在的錯誤和不符合規范的地方，并給出相應的提示和建議。這對于編寫符合標準的HTML代碼非常有幫助。

10. Live Server: Live Server插件可以在本地啟動一個實時服務器，讓您在瀏覽器中實時預覽HTML、CSS和JavaScript代碼的效果。它支持自動刷新和熱更新，可以實時反映代碼的變化。這對于前端開發和調試非常方便。

以上是一些值得推薦的VSCode中與HTML相關的插件。它們各自具有獨特的功能和優點，可以幫助您提高開發效率和便利性。當然，具體選擇哪些插件還需要根據您的實際需求和喜好來決定。希望這些推薦能對您有所幫助！

?

npm install sortablejs --save

 bower install --save sortablejs

<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>
var el = document.getElementById('items');
var sortable = Sortable.create(el);

string：命名，個人建議用元素id就行,用處是為了設置可以拖放容器時使用
 array：[name,pull,put]
 name：同string的方法，
 pull：pull用來定義從這個列表容器移動出去的設置，true/false/'clone'/function
 true:列表容器內的列表單元可以被移出；
 false：列表容器內的列表單元不可以被移出；
 'clone'：列表單元移出，移動的為該元素的副本；
 function：用來進行pull的函數判斷，可以進行復雜邏輯，在函數中return false/true來判斷是否移出；
 put：put用來定義往這個列表容器放置列表單元的的設置，true/false/['foo','bar']/function
 true:列表容器可以從其他列表容器內放入列表單元；
 false：與true相反；
 ['foo','bar']：這個可以是一個字符串或者是字符串的數組，代表的是group配置項里定義的name值；
 function：用來進行put的函數判斷，可以進行復雜邏輯，在函數中return false/true來判斷是否放入；