vue 输入表单库,在开发项目时节省大量时间

1. Vue Select（制作表单）

官方地址：

完整的文档和示例

//安装
yarn add vue-select
//或
npm install vue-select

//引入
import Vue from "vue";
import vSelect from "vue-select";

Vue.component("v-select", vSelect);

2. Vue Input Tag（向表单添加标签）

官方地址：

//安装
yarn add vue-input-tag
//或
npm install vue-input-tag --save

//引入
import InputTag from 'vue-input-tag'
Vue.component('input-tag', InputTag)

//用法
<input-tag v-model="tags"></input-tag>

3.Vue Dropdowns（Vue 下拉菜单）

官方地址：

完整的文档和示例

//安装
yarn add vue-dropdowns
//或
npm install vue-dropdowns

//用例
<dropdown class="my-dropdown-toggle"
          :options="arrayOfObjects" 
          :selected="object" 
          v-on:updateOption="methodToRunOnSelect" 
          :placeholder="'Select an Item'"
          :closeOnOutsideClick="boolean">
</dropdown>

<script>
//引入
import dropdown from 'vue-dropdowns';

export default {
        data() {
          return {
            arrayOfObjects: [],
            object: {
              name: 'Object Name',
            }
          }
        },

        components: {
            'dropdown': dropdown,
        },

        methods: {
          methodToRunOnSelect(payload) {
            this.object = payload;
          }
        }
      }
</script>

<style scoped>
.my-dropdown-toggle {
  border-radius: 5px;

  ::v-deep .dropdown-toggle {
    color: tomato;
    font-size: 25px;
    font-weight: 800;
  }

  ::v-deep .dropdown-toggle-placeholder {
    color: #c4c4c4;
  }
}
</style>

4. Vue Color（颜色选择添加到表单中）

官方地址：

//安装
npm install vue-color

import { Photoshop } from 'vue-color'

new Vue({
  components: {
    'photoshop-picker': Photoshop
  }
})

//用法
var colors = {
  hex: '#194d33',
  hex8: '#194D33A8',
  hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
  hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
  rgba: { r: 25, g: 77, b: 51, a: 1 },
  a: 1
}
// 或
var colors = '#194d33'
// 或
var colors = '#194D33A8'
// 或
var colors = { h: 150, s: 0.66, v: 0.30 }
// 或
var colors = { r: 255, g: 0, b: 0 }
// 等等...

new Vue({
  el: '#app',
  components: {
    'material-picker': material,
    'compact-picker': compact,
    'swatches-picker': swatches,
    'slider-picker': slider,
    'sketch-picker': sketch,
    'chrome-picker': chrome,
    'photoshop-picker': photoshop
  },
  data () {
    return {
      colors
    }
  }
})

5. VueJS DatePicker（日期选择器）

官方地址：

//安装
npm install vuejs-datepicker --save

//引入
import Datepicker from 'vuejs-datepicker';

export default {
  // ...
  components: {
    Datepicker
  }
  // ...
}

//用法
var colors = {
  hex: '#194d33',
  hex8: '#194D33A8',
  hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
  hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
  rgba: { r: 25, g: 77, b: 51, a: 1 },
  a: 1
}
// 或
var colors = '#194d33'
// 或
var colors = '#194D33A8'
// 或
var colors = { h: 150, s: 0.66, v: 0.30 }
// 或
var colors = { r: 255, g: 0, b: 0 }
// 等等...

new Vue({
  el: '#app',
  components: {
    'material-picker': material,
    'compact-picker': compact,
    'swatches-picker': swatches,
    'slider-picker': slider,
    'sketch-picker': sketch,
    'chrome-picker': chrome,
    'photoshop-picker': photoshop
  },
  data () {
    return {
      colors
    }
  }
})

6. Vue Switches（切换开关）

官方地址：

完整的文档和示例

//安装
npm install vue-switches --save

//引入
import Switches from 'vue-switches';

new Vue({
    components: {
        Switches
    },
    data () {
        return {
            enabled: false
        }
    }
};

//使用
<switches v-model="enabled"></switches>

Prop	描述
label	始终显示打开或关闭的静态标签。
text-enabled	启用时显示的文本。
text-disabled	禁用时显示的文本。
theme	使用哪个主题。
color	使用哪种颜色。
type-bold	更大的风格。
emit-on-mount	默认情况下，当组件挂载时会发出“更改”事件。要禁用此功能，请将其设置为 false。

7. Vue Dropzone（拖放文件上传）

官方地址：

完整的文档和示例

//安装
npm install vue2-dropzone

//引入使用
<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
export default {
  name: 'app',
  components: {
    vueDropzone: vue2Dropzone
  },
  data: function () {
    return {
      dropzoneOptions: {
          url: 'https://httpbin.org/post',
          thumbnailWidth: 150,
          maxFilesize: 0.5,
          headers: { "My-Awesome-Header": "header value" }
      }
    }
  }
}

8. Vue Circle Sliders（圆形滑块）

官方地址：

//安装
npm install --save vue-circle-slider

//引入
import Vue from 'vue'
import VueCircleSlider from 'vue-circle-slider'

Vue.use(VueCircleSlider)

//用例

//插件将注册一个带有名称的全局组件
<circle-slider v-model="sliderValue"></circle-slider>

//自定义一些属性：
<circle-slider
  v-model="sliderValue"
  :side="150"
  :min="0"
  :max="10000"
  :step-size="100"
  :circle-width-rel="20"
  :progress-width-rel="10"
  :knob-radius="10"
></circle-slider>

用法功能基于 svg 的视图:
      通过绑定v-model
      定义最小值和最大值
      定义步长
      动画，同时按圈点击更新为新值
      触控设备支持 ( touchmove)
      尺寸定制：精确和相对定义
      颜色定制

Props	类型	默认	描述
side	Number	100	svg 正方形边的大小（以 px 为单位）
min	Number	0	最小值
max	Number	100	最大值
stepSize	Number	1	值之间的差距
circleColor	String	#334860	滑块圆周的颜色
progressColor	String	#00be7e	进度曲线的颜色
knobColor	String	#00be7e	旋钮颜色
knobRadius	Number	null	精确的旋钮半径（以 px 为单位）
knobRadiusRel	Number	7	相对旋钮半径。以 px 为单位的半径值将计算为：(side/2) / knobRadiusRel
circleWidth	Number	null	圆的精确宽度（以 px 为单位）
circleWidthRel	Number	20	相对圆的宽度。以 px 为单位的宽度值将计算为：(side/2) / circleWidthRel
progressWidth	Number	null	精确的进度曲线宽度（以 px 为单位）
progressWidthRel	Number	10	相对进度曲线宽度。以 px 为单位的宽度值将计算为(side/2) / progressWidthRel

9. Vue Phone Number（电话号码输入）

官方地址：

//安装
yarn add vue-phone-number-input
//或
npm i --save vue-phone-number-input

//引入
import VuePhoneNumberInput from 'vue-phone-number-input';
import 'vue-phone-number-input/dist/vue-phone-number-input.css';

Vue.component('vue-phone-number-input', VuePhoneNumberInput);

//用例
<VuePhoneNumberInput v-model="yourValue" />

Props API：

Props	Type	必须	默认
v-model	String/Int	true	-
id	String	false	VuePhoneNumberInput
color	String HEX	no	dogderblue
valid-color	String HEX	no	yellowgreen
error-color	String HEX	no	orangered
size	String	no
default-country-code (1)	String	no	null
preferred-countries (2)	Array no	null
ignored-countries	Array	no	null
only-countries	Array	no	null
no-validator-state	Boolean	no	false
no-flags	Boolean	no	false
disabled	Boolean	no	false
dark	Boolean	no	false
dark-color	String (hex)	no	#424242
required	Boolean	no	false
error	Boolean	no	false
clearable	Boolean	no	false
loader (3)	Boolean	no	false
translations (4)	Object	no	null
countries-height (5)	Number	no	30
no-use-browser-locale (6)	Boolean	no	false
fetch-country (7)	Boolean	no	false
no-country-selector (8)	Boolean	no	false
border-radius	Number	no	4
show-code-on-list	Boolean	no	false
no-example	Boolean	no	false

特殊 react

官方地址：

npm install react-tagsinput --save

//例子
import TagsInput from 'react-tagsinput'

import 'react-tagsinput/react-tagsinput.css' // If using WebPack and style-loader.

class Example extends React.Component {
  constructor() {
    super()
    this.state = {tags: []}
  }

  handleChange(tags) {
    this.setState({tags})
  }

  render() {
    return <TagsInput value={this.state.tags} onChange={::this.handleChange} />
  }
}