文章目录
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} />
}
}