天给大家推荐一款超美观的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来判断是否放入；