【前端 VUE】vue 图片剪切

最新推荐文章于 2024-08-22 11:15:27 发布

原创

最新推荐文章于 2024-08-22 11:15:27 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

templateCreat。vue 弹框组件

<template>

<div v-if="showDialog" class="dialog">

<div v-if="showDialog" class="back-drop"></div>

<div class="alert" :class="{'alert-active':showDialogActive,'alert-big':big,'alert-middle':middle}" :style="'width:'+width+'px'">

<div class="title" >

<span style="padding-left:16px;">{ {title}}</span>

<i v-if="closes" @click="close" style="margin-right:12px;" class="el-message-box__close el-icon-close cursor"></i>

</div>

<div class="dialog-content">

<slot></slot>

</div>

</div>

</div>

</template>

<script>

import { setTimeout } from "timers";

export default {

name: "v-templateCreat",

props: {

title: {

type: String,

default: "温馨提示"

},

middle:{

type:Boolean,

default:false

},

big:{

type:Boolean,

default:false

},

width: {

default: 498

},

open:Boolean,

closes: {

type: Boolean,

default: true

},

},

data() {

return {

showDialog: false,

templateCreat: false,

showDialogActive: false,

};

},

methods: {

close() {

this.showDialogActive = false;

this.$emit('update:open', false);

setTimeout(() => (this.showDialog = false), 300);

},

openFn(){

this.showDialog = true;

this.checkDom();

},

checkDom(){

let timer = n