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

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

han32684年前 (2021-04-15)VUE3414

安装:

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


扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://hanwenblog.com/post/52.html

分享给朋友:

相关文章

vue引入本地json数据文件

    data() {         return {...

vue 去除前后空格trim的使用方法

一、使用trim修饰符<input v-model.trim = "massage" >二、使用filter过去属性 <...

vue element table expand 设置只可以展开一行、设置点击行即可打开扩展内容

在Vue中使用Element UI的el-table组件时,‌可以通过以下步骤设置只可以展开一行以及通过点击行即可打开扩展内容:‌设置只可以展开一行:‌通过监听expand-change事件来实现每次...

vue中$set的使用踩坑日记

vue中$set的使用踩坑日记

1、为什么要用set?在vue中,并不是任何时候数据都是双向绑定的。在官方文档中,有这样一段话,如下:从文档得知,当数据没有被双向绑定的时候,我们就需要使用set了2、set用法解决数据没有被双向绑定...

element中el-switch开关点击弹出确认框 阻止默认的el-switch 的点击事件 发送请求成功后才改变状态

element中el-switch开关点击弹出确认框 阻止默认的el-switch 的点击事件 发送请求成功后才改变状态

Switch 开关表示两种相互对立的状态间的切换,多用于触发「开/关」。常见用法: 1、绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactiv...