vue 输入表单库,在开发项目时节省大量时间
2024-06-16 07:25:14
文章目录
- 1. Vue Select（制作表单）
- 2. Vue Input Tag（向表单添加标签）
- 3.Vue Dropdowns（Vue 下拉菜单）
- 4. Vue Color（颜色选择添加到表单中）
- 5. VueJS DatePicker（日期选择器）
- 6. Vue Switches（切换开关）
- 7. Vue Dropzone（拖放文件上传）
- 8. Vue Circle Sliders（圆形滑块）
- 9. Vue Phone Number（电话号码输入）
- 特殊 react
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-sliderv-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} />}
}
vue 输入表单库,在开发项目时节省大量时间相关推荐
- vue监控表单输入事件，正则验证手机号，邮箱
vue监控表单输入事件,正则验证手机号,邮箱 <div class="input-name"><inputclass="input-type" ...
- 优雅地提高 React 的表单页面的开发效率
Den Form 为什么叫 Den Form ? 可能是因为 丹凤眼 非常迷人吧... 一个非常轻巧的 Form 实现, gzip 体积只有 3kb, 可以很方便跨越组件层级获取表单对象, 或者管理联 ...
- 带有托管代码的InfoPath2007表单模版发布到SharePoint表单库（浏览器方式查看）
在本篇文章中,将与大家分享如何将一个带有托管代码(manage code)的InfoPath2007表单模版发布到SharePoint Server2007的表单库中,并使得最终用户可以通过浏览器方式 ...
- @alitajs/dform 移动端表单库 3.0 强势来袭
@alitajs/dform 移动端表单库 3.0 强势来袭 一.回顾 2.0 前言 为了解决从事移动端 h5 开发的小伙伴被长表单支配的恐惧,我们在 2020 年年初推出了 dform 的第一个版本 ...
- antd提交表单_antd快速开发（Form篇）
前言 由于一直在做中台业务,后台项目特别多,但是后台项目的特点是:大量的列表和大量表单,重复开发会降低效率,所以我这边总结了一下使用antd组件搭建form的快捷方法.希望能对大家有用. 传统Form ...
- 关于Vue的表单验证
前言 最近在研究 Vue 如何实现表单的验证,在网上查阅资料以后,简单将这些方法整合一下,方便以后学习.如果有不准确之处,还望指正. Vue 实现表单验证的方法有如下几种: 一.基于 Vue 与 jQ ...
- 将含有自定义代码的Infopath模板发布到Sharepoint表单库中
最近一好友通过msn曰:"ocean最近没有写点什么?".想想也确实应该写点什么了.从实际的项目经验来说,也确实有很多东西可以写,至少也能写个小册子,但是始终没有静下心来写.上次去 ...
- java自定义表单系统_自定义表单二次开发
自定义表单二次开发 === 自定义表单的页面和业务逻辑增强采用JS增强和Java增强实现.——快速排序
- CentOS设置SSH Key登录
- leetcode 买卖股票的最佳时机含手续费(Java)
- mysql如何防止幻读
- Freemarker 之ftl
- Julia REPL 模式
- 智慧电厂三维可视化定位技术，高效管控人员/车辆
- css强制换行和强制不换行
- KVM中给windows虚拟机安装virtio驱动
- Unity3D+WebGL数据交互、传参
- 我爱Java系列之---【组员在idea中使用Git】
- 领英：全球人工智能人才25万 我国人才潜能不输欧美