Vue Swatches recently reached version 2. If you were using v1 please consider reading the release notes or you can check v1 here
Vue Swatches is a UI Component for Vue that allows the user to choose colors.
Unlike classic color pickers, where all colors are available (167 77 216 colors), Vue Swatches only shows a bunch of predefined colors.
More decisions require more effort
With fewer options, the user experience will be improved
npm install --save vue-swatches
or
yarn add vue-swatches
<!-- Vue component -->
<template>
<div>
<v-swatches v-model="color"></v-swatches>
</div>
</template>
<script>
import VSwatches from 'vue-swatches'
// Import the styles too, globally
import "vue-swatches/dist/vue-swatches.css"
export default {
components: { VSwatches }, // window['vue-swatches'] - from CDN
data () {
return {
color: '#1CA085'
}
}
}
</script>
# serve with hot reload at localhost:8080
yarn serve
# distribution build with minification
yarn build
# build the documentation into docs
npm docs:dev
# run unit tests
yarn test:unit
This component has the same support than Vue itself
Vue does not support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all ECMAScript 5 compliant browsers.
However if you want to use this with IE9, you will probably need to work on the CSS styles. IE10 should be fine
Author: saintplay
Live Demo: https://saintplay.github.io/vue-swatches/
GitHub: https://github.com/saintplay/vue-swatches
#vuejs #javascript #vue-js