Merge branch 'readme-thumbnail'

zoom
Yanick Champoux 2019-05-26 11:42:07 -04:00
commit ebeb62861f
4 changed files with 11 additions and 18 deletions

View File

@ -1,5 +1,9 @@
Release history for vue-svg-pan-zoom Release history for vue-svg-pan-zoom
v1.0.1 2019-05-26
- corrects the thumbnail docs in the README. (GH#6)
v1.0.0 2019-04-30 v1.0.0 2019-04-30
- reworks thumbnail logic to be more vue-like. - reworks thumbnail logic to be more vue-like.

View File

@ -113,31 +113,20 @@ In a Single File Component:
style="width: 300px; height: 500px; border:1px solid black; " style="width: 300px; height: 500px; border:1px solid black; "
> >
<svg> ... </svg> <svg> ... </svg>
<svg slot="thumbnail" class="thumbViewClass"> <svg slot="thumbnail"> ... </svg>
...
</svg>
</SvgPanZoom> </SvgPanZoom>
</template> </template>
<script> <script>
import SvgPanZoom from 'vue-svg-pan-zoom'; import SvgPanZoom from 'vue-svg-pan-zoom';
export default { export default {
components: { SvgPanZoom }, components: { SvgPanZoom },
}; };
</script> </script>
<style> Just like the main `SvgPanZoom`component, the `thumbnail` slot needs to
@import 'vue-svg-pan-zoom/dist/vue-svg-pan-zoom.css';
</style>
Note that for the css import to work, you'll have to have
[postcss-import](https://github.com/postcss/postcss-import)
installed as a dep.
Also, just like the main `SvgPanZoom`component, the `thumbnail` slot needs to
be assigned to a `svg` node -- `embed` won't work. be assigned to a `svg` node -- `embed` won't work.
### Storybook demos ### Storybook demos

View File

@ -1,6 +1,6 @@
{ {
"name": "vue-svg-pan-zoom", "name": "vue-svg-pan-zoom",
"version": "1.0.0", "version": "1.0.1",
"description": "Vue component for svg-pan-zoom", "description": "Vue component for svg-pan-zoom",
"main": "dist/index.js", "main": "dist/index.js",
"author": "Yanick Champoux", "author": "Yanick Champoux",

View File

@ -10,12 +10,12 @@
<script> <script>
import { SvgPanZoom, SvgPanZoomThumbnail } from './index'; import { SvgPanZoom } from './index';
import RawTiger from './RawTiger.vue'; import RawTiger from './RawTiger.vue';
export default { export default {
components: { SvgPanZoom, RawTiger, SvgPanZoomThumbnail }, components: { SvgPanZoom, RawTiger },
methods: { methods: {
honk(){ console.log( "thumbnail was mounted!" ) } honk(){ console.log( "thumbnail was mounted!" ) }
}, },