当前位置:首页 > 经验笔记 > VUE > 正文内容

基于Vue的移动端图片裁剪组件(vue-imgcut)

han32686年前 (2021-04-15)VUE4932

安装:

npm install vue-imgcut –save

使用代码:

<template>
    <div>
        <imgCut ref="Uppicinput" @callback="callback" :width="200" :height="200">
            <div>上传按钮</div>
        </imgCut>
        <img :src="imgsrc">
    </div>
</template>


<script>
import { imgCut } from 'vue-imgcut'
export default {
    components: {
        imgCut,
    },
    data() {
        return {
            imgsrc: '',
        }
    },
    methods: {
        callback(img) {
            this.imgsrc = img
            console.log(img)
        },
    },
}
</script>

<style scoped lang="less">

</style>

使用展示:

image.png


标签: VUE

相关文章

vue引入本地json数据文件

    data() {         return {...

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

安装:Bashnpm install --save clipic使用代码:Markup<template>     ...

VUE拖放排序,好用的vue拖拽插件vuedraggable拖放排序

VUE拖放排序,好用的vue拖拽插件vuedraggable拖放排序

1  安装依赖:npm i -S vuedraggable2. 使用组件:html:    <draggable&...

vue 用webpack 打包的时候添加版本号, VUE 项目更新部署时,浏览器页面缓存问题

因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。module.exports = {  ...